（初级）css布局

一、单列布局
1、基础知识
块级元素 div p ul li dl dt
行级元素 img span input strong同一行显示、无换行
2、盒子模型
盒子模型 （边框border、外边距margin、内边距padding、内容content）
盒子模型3维立体图：自上往下（边框、内容和内边距、背景图片、背景颜色、
外边距）
样式追求就近原则（行内样式>内部样式>外部样式）
3、自动居中
margin： 0px auto;实现自动居中（原理：外边距=（浏览器的宽度-外包含层的宽度）/2）（此时不能同时设置浮动和绝对定位）
一般情况下： 父层设置一宽度，子层设置100%就可以。（子层继承父层宽度）

4、css布局笔记

4-1 margin：auto

#main {

  width: 600px;

  margin: 0 auto;

}

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案。

4-2 max-width

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

二、横向两列布局
1、浮动定位
能够实现多列布局
float属性（left、right、none）：当元素没有设置宽度值，而设置了浮动属性，元素宽度随内容的变化而变化。
清除浮动的常用方法：
1-1、clear属性：clear:both;或者clear:left clear:right
1-2、同时设置width:100%(或固定宽度) + overflow:hidden;
不建议使用空标签进行消除浮动！！！
三、绝对定位布局

通过设置position属性实现（静态定位（static）、相对定位（relative）、绝对定位（absolute相对于最近的“positioned”祖先元素）、固定定位（fixed相对于视窗））

position:relative;top:10px;left 10px;会出现覆盖现象（top、left、bottom、right是偏移量）
绝对定位参照基准
1、无祖先元素（已<html>为偏移参照基准）
2、有已定位祖先元素（已距离最近的已定位的祖先元素为偏移参照基准）
当一个元素设置绝对定位，没有设置宽度时，元素宽度根据内容进行调节。
横向两列布局
使用absolute实现横向两列布局（常用于一列固定宽度，另一列宽度自适应。）
主要应用技能
relative-父元素相对定位
absolute-自适应宽度元素绝对定位
注意：固定宽度列的高度>自适应宽度的列。

（中级）如何用CSS进行网页布局
1、网页也设计特点
网页宽度自适应（调节浏览器宽度，网页宽度自动修改）
网页长度理论上没有限制。
2、自适应宽度和固定宽度两列布局
自适应：width：50%对于每个div（只要两者和位100%即可）
3、使用position定位实现三列布局
自适应：width：33.33%对于每个div（只要三者和位100%即可）
固定宽度：
.left{width:200px;height:500px;position:absolute;left:0;top:0}
.middle{height:500px;margin:0 300px 0 200px}
.right{width:300px;height:500px;position:absolute;right:0;top:0}

CSS布局基础的更多相关文章

  1. css布局基础总结

    前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...

  2. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  3. [CSS布局基础]居中布局的实现方式总结

    [原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 做Web开发少不了做页面布局.码路工人给大家总结一下 ...

  4. CSS布局基础之二认识Viewport

    什么是viewport viewport,等同于浏览器窗口. 功能:约束你网站中最顶级包含块(containing block)元素html标签. 什么是包含块(containing block)?下 ...

  5. CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系

    设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...

  6. CSS布局基础--BFC

    1,什么是BFC BFC(Block Formatting Context)块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其他环境中的布局. ...

  7. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  8. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  9. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

随机推荐

  1. Linux 修改计算机名

    查看计算机名:在终端输入hostname 修改的话 hostname +计算机名(重启后失效) 要永久修改的话要修改配置文件/etc/sysconfig/network 修改hostname=你要改的 ...

  2. Java String.compareTo()方法

    描述:java.lang.String.compareTo() 方法比较两个字符串的字典. 比较是基于字符串中的每个字符的Unicode值.此String对象表示的字符序列的 参数字符串表示的字符序列 ...

  3. android actionbar标题栏

    在android的actionBar中,actionBar的视图是固定的,左边是程序的图标和title,右边是添加的menuItem,如果想要定制actionbar中的view就要自定义视图. 首先要 ...

  4. 一个zip压缩类，欢迎吐槽

    package com.utils; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import j ...

  5. mac下git中文乱码

    今天从window切mac,git使用时各种问题.典型的就是,git commit 可以使用中文注释,但是使用 git log 查看的时候发现都是乱码,乱码效果如下: <B1><E0 ...

  6. BZOJ_1028_[JSOI2007]_麻将_(模拟+贪心)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1028 同一种花色的牌,序数为\(1,2,...,n\).定义"和了"为手上 ...

  7. 关于ie6对齐

    先来没有任何对齐时的样子: 1.一种是在父级没有高度的情况下居中. 给每个独立的元素都加上vertical-align:middle; 针对文字可以不加,加与不加都可以居中对齐.但是无法做到绝对的居中 ...

  8. Java Web编程的主要组件技术——Struts的高级功能

    参考书籍:<J2EE开源编程精要15讲> Struts对国际化的支持 "国际化"(I18N)指一个应用程序在运行时能根据客户端请求所来的国家/地区.语言的不同显示不同的 ...

  9. POJ 3177 Redundant Paths (桥，边双连通分量，有重边)

    题意:给一个无向图,问需要补多少条边才可以让整个图变成[边双连通图],即任意两个点对之间的一条路径全垮掉,这两个点对仍可以通过其他路径而互通. 思路:POJ 3352的升级版,听说这个图会给重边.先看 ...

  10. win7/8下VirtualBox虚拟共享文件夹设置

    1. 安装增强功能包(VBoxGuestAdditions)   打开虚拟机,运行ubuntu,在菜单栏选择"设备->安装增强功能",根据提示即可安装成功(成功后也可 以实现 ...