2017.11.6笔记

DIV+CSS布局

一、盒子模型内外边距和边框介绍

当你的浏览器展现一个元素时，这个元素会占据一定的空间。这个空间由四部分组成：
Margin
Border
Padding
Content

1.边框

用 border 属性给元素四周指定统一的边框。在属性值中指定边框的宽度（通常是以显示到屏幕上的像素为单位），样式,还有颜色。
样式包括：
solid、dotted、dashed、double、inset、outset、ridge、groove
你也可以通过设置样式为none或hidden来明确地移除边框。
如果一次只指定某一个方向的边框，就用属性：border-top，border-right， border-bottom，border-left。

2.外边距和内边距

使用外边距和内边距调整元素的位置，并在其周围创建空间。用margin属性或者padding属性分别设置外边距和内边距的宽度。
如果你指定一个宽度，它将会作用于元素四周（上、右、下、左）。
如果你指定两个宽度， 第一个宽度会作用于顶部和底部，第二个宽度作用于右边和左边。
你也可以按照顺序指定四个宽度： 上、右、下、左。
注意：
外边距margin可以为负，内边距不可以为负。
行内元素设置上下边距不影响行高。
边框是可见的，边距是不可见的，只能看到对其他元素的影响。

3.简写属性：

我们可以根据规定顺序，简写属性：
设置两个属性值，那么第一个值表示上下边框的属性，第二个值表示左右边框的属性。
设置三个属性值，第一个值表示上边框属性，第二个值表示左右边框属性，第三个值表示下边框属性。
设置四个值，依次表示上右下左边框的属性。

4.行内元素的盒子模型

行内元素的盒子模型只能得到一行高度的空间，行高由line-height属性决定，没有设置该属性则为内容默认高度。
如果设置上下边框或者边距，会导致盒子高度超过行高，盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。
综上所述，不推荐对行内元素设置盒子属性，一般先用display属性设置内联元素为块级元素显示，再设置盒子属性。

5.元素盒子属性的默认值

大多HTML元素的盒子属性默认值都为0。
少部分HTML元素盒子属性存在默认值，如：body,p,ul,li,form标签等，因此我们在需要的时候可以先初始化他们的属性为0。

二、display属性和实例

1.元素的显示和隐藏

使用display:none将元素隐藏起来，此时元素不占用页面空间。
使用visibility:hidden也可以隐藏元素，此时元素占用空间。

2.通过display改变内联元素或块级元素

(1)display:block就是将元素显示为块级元素.
block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度默认是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
(2)display:inline就是将元素显示为行内元素.
inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底外边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
(3)display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

三、浮动和清除浮动

1.什么是浮动

我们可以用一句话描述浮动的元素的特点：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

2.如何清除浮动

清除浮动
清除浮动的底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。
(1)display:block使生成的元素以块级元素显示,占满剩余空间。
(2)height:0 避免生成内容破坏原有布局的高度。
(3)visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。
(4)通过content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。
(5)zoom:1触发IE hasLayout。
通过分析发现，除了clear:both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容。

四、CSS position属性

CSS有三种基本的定位机制:普通流、浮动和绝对定位。
position属性设置元素定位类型，可以通过top,bottom,right,left属性，控制元素的定位位置。
position属性值有static，relative，absolute，fixed四个值。

1.static静态定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top,bottom,right,left属性的影响。

2.fixed固定定位

脱离标准流，在页面中不占位置 。
不管页面有多大，永远相对于浏览器的边框来定位 。

3.relative 相对定位

不脱离标准流，在页面中占位置 。
相对于自己原来的位置来进行定位 。

4.absolute绝对定位

脱离标准流，在页面中不占位置（浮起来）。
如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。

5.定位元素的重叠

Z-index属性控制定位元素的重叠顺序，属性值是z轴上的值。
Z-index只能在绝对定位元素上奏效（position:absolute）。
Z-index的值是设置一个定位元素沿Z轴的位置，其值越大，离用户越近，所以若两个定位元素，Z-index值越大的将会覆盖值越小的定位元素。
默认值是0，可以是正负数。