1.块级元素会独占一行，其与什么标签无关

 

　　2.display属性：可以指定其为块级还是行级元素

 

　　3.display属性：

 

　　none：隐藏显示，不会占空间inline:行级元素，元素不会独占一行，没有height高度属性，有行高inline-height（所有元素都有该属性）block:块级元素，元素独占一行inline-block:同时是行元素、块级元素--有高度，但是不会换行（效果看似与inline没什么区别）--典型行级 素：img

 

　　4.盒子模型：

 

　　margin：拉开与别人的距离--上右下左（以下顺序一样）

 

　　padding：把自己撑大

 

　　border：……

 

　　content：……

 

　　行内元素因为没有高度（但是有行高，所有元素都有行高），所以padding-top、padding-bottom不起作用；只有padding-left、padd   ing-right起作用。margin亦如此。行内元素不能设置height和Width＜/b>

 

　　5.（1）position：

 

　　static（默认）：以文档流从上到下的布局方式，行级元素从左到右水平布局，块级元素从上到下垂直布局（top、left、bottom、right失效，因为默认情况元素是静态的不能移动。）relative:为absolute提供参照、以它自己最初的位置为参照进行布局 absolute:以它最近的有position：relative属性的元素作为参照。若不存在，则以浏览器窗口（body）为参照。--已经脱离文档流，不占文档流空间。fixed：固定定位，以浏览器窗口为参照做定位。脱离文档流，不占文档流空间。

 

　　（2）网页的三种布局模型（方式）：

 

　　1、流动模型（Flow）--是默认的网页布局模型static，行元素从左到右水平分布，块级元素从上到下垂直分布

 

　　2、浮动模型 （Float）--浮动

 

　　3、层模型（Layer）--有三种定位方式：relative、absolute、fixe

 

　　6.float:

 

　　left:…

 

　　right:…

 

　　！！！以上一个临近的元素为基准做浮动

 

　　7.两种三栏布局：左右宽度不变，中间自适应

 

　　（1）position：absolute的方法：

 

　　先将左右元素position：absolute；，然后分别对左右元素的left:0和right:0、top:0、bottom：0等进行设置！！！而不是对margin-left,margin-right,margin-top设置！！

 

　　布局好两端后，对中间栏（没有脱离文档）进行调节--使它的内容不被覆盖：margin-left：左栏宽度；margin-right：右栏宽度；

 

　　（2）float方法：

 

　　先将左右两栏抽离文档流（仍然占空间），然后进行左右浮动（设置float时已经抽离文档流）；跟左右没有关系

 

　　！！！注意左中右的书写顺序（应该为左右中），因为float是以上一个临近的元素为基准做浮动的。对中间栏（没有脱离文档）进行调节--使它的内容不被覆盖：margin-left：左栏宽度；margin-right：右栏宽度；

 

　　（3） flex两栏布局--左边固定宽度，右边自适应。

 

　　1）大的包裹层设置display:flex属性，说明它是伸缩容器

 

　　2）然后对左栏设置固定的宽度值

 

　　3）最后设置右栏的flex属性值为1；表明权值是1，它将占满剩余的部分空间

 

　　参考：使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度） - 齐达内x - 博客园

 

　　flex三栏布局：左右宽度一定，中间自适应宽度

 

　　1）父元素display：flex

 

　　2）左右设置定宽，中间设置flex：1