2017.11.6笔记

盒子模型外边距和内边距的介绍

浏览器中的一个元素是由四个部分组成的

1.边框

用border属性给元素四周指定统一的边框。在属性值里指定边框的宽度（通常是以显示屏的像素为单位）、样式还有颜色。

也可以通过设置样式为none或hidden来明确的移出边框。

一次只指定一个方向的边框就用属性：border-top,border-right,border-bottem,border-left。

2.外边距和内边距

使用外边距和内边距调整元素位置，并在其周围创建空间。用margin属性或者padding属性分别设置外边距和内边距的宽度。

• 如果你指定一个宽度，它将会作用与元素四周（上下左右）
• 如果你指定两个宽度，第一个宽度会作用于顶部和底，第二个宽度作用与右边和左边。
• 你也可以按照顺序指定四个宽度：上下左右。

注意：

• 外边距margin可以为负，内边距不可以为负
• 行内元素设置上下边距不影响行高。
• 边框是可见的，边距是不可见的，只能看到对其他元素的影响。

3.简写属性:

我们可以根据规定顺序，简写属性：

• 设置两个属性值，那么第一个值表示上下边框的属性，第二个值表示左右边框的属性。
• 设置三个属性值，第一个值表示上边框属性，第二个值表示左右边框属性，第三个值表示下边框思属性。
• 设置四个值，一次表示上右下左边框的属性。

例如：

          h1{margin：10px 0px 15px 5px}

4.行内元素的盒子模型

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

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

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

display属性和实例

1.元素的显示与隐藏

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

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

• display：block就是将元素显示为块级元素。
• display：inline就是将元素显示为行内元素。
• display：inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。（准确的说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性）

浮动与清除浮动

1.什么是浮动

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

div{float:left/right};

浮动会脱离文档流

脱离文档，也就是说浮动不会影响普通元素的布局。我们可以直接理解成，浮动的元素在普通文档流的上面一层，更靠近屏幕的上层。

浮动元素脱离了文档流，并不占用文档流的位置，自然父元素也就不能被撑开，所以没了高度。

2.如何清除浮动

清除浮动

清除浮动的底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的，而不是在浮动元素上。

清除浮动的最佳实践

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

• display:block使生成的元素以块级元素显示,占满剩余空间。
• height:0 避免生成内容破坏原有布局的高度。
• visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互。
• 通过content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。
• zoom：1触发IE hasLayout。

通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容。

触发BFC

BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。

BFC的主要特征

• BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
• BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：

• float 为 left | right
• overflow 为 hidden | auto | scorll
• display 为 table-cell | table-caption | inline-block | flex | inline-flex
• position 为 absolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。所以以上的BFC触发方法都可以用来解决浮动问题，但是要选择合适的使用场景。

总结

有很多方法可以进行清除浮动这样的操作，归根到底，从原理上讲其实分为两种。
其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。 （after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素）；
其二，使父元素触发BFC。 （通过设置父元素 overflow 或者display：table 属性来闭合浮动）

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值越大的将会覆盖值越小的定位元素。

对齐与居中

• margin:0 auto;设置左右外边距的大小，控制元素的水平居中。
• position属性设置元素的左右对齐
• float属性设置左右对齐
• padding属性设置水平垂直居中
• line-height属性设置水平垂直居中
• 绝对定位和transform属性设置水平垂直居中