前端之路（二）CSS贰

1、盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，盒模型从内到外分为：content、padding、border、margin

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

2、盒模型宽高计算

盒模型有两种，标准盒模型和怪异（IE）盒模型，两种盒模型的计算公式有略微不同。

标准盒模型：

content|width|height + padding + border + margin

怪异盒模型：

width|height(content + padding + border) + margin

CSS3之后，可以通过box-sizing切换这两种模型，值为：content-box（标准盒模型）和border-box（怪异盒模型）

3、元素宽高

左右留白：网站左边内边距是固定的，内容在右侧甩出的空白不一样，可以给定一个足够的宽度，只设置左边的内边距，右边空白区域自动剩余。

在实际的使用中，一般不设置高度，是为了让内部的内容撑开盒子，达到让盒子自动撑高减小。当然，这不绝对，要视情况而定。

4、外边距（margin）

同级元素之间的边距，或者距离父元素之间的边距。

1）数值法设置margin

**单值法：**margin:1px，统一设置盒子上下左右的margin值。

**双值法：**margin:1px 2px，第一个值是上下margin，第二个值是左右margin。

**三值法：**margin:1px 2px 3px，第一个值是上margin，第二个是左右margin，第三个是下margin。

**四值法：**margin:1px 2px 3px 4px，分别是上、右、下、左，顺时针。

2）方向法

**margin-top：**上

**margin-bottom：**下

**margin-left：**左

**margin-right：**右

5、margin塌陷

margin塌陷现象：在垂直方向（左右不会引起塌陷）如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。

1）同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距离是较大的那个值。

解决方案：

如果两个元素垂直方向有间距，只需要设置给一个元素完整的间距，不要拆分给两个元素。

2）父子元素塌陷

在父元素没有设置padding、border、overflow的情况下，给子级设置margin-top时，他不会相对父级一起动，只有他的margin超过父级的margin时，才会生效，但会带着父级一起移动。

解决方案：

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。

（2）为父盒子添加overflow : hidden；

（3）为父盒子设定padding值，而非使用子盒子的margin。

6、border边框

用于设置盒子的边框。

1）按方向设置大小

border-top：上

border-bottom：下

border-left：左

border-right：右

2）设置属性

border-style：边框线形。值：solid，实线

​ dotted，点线

​ dashed，虚线

​ double，双线

border-width：边框宽度。值：像素值

​ thick，粗线

​ thin，细线

​ medium，中等宽线

border-color：边框颜色

border：综合写法，顺序：style width color

7、内边距（padding）

元素内容和边框之间的间距。

1）数值法设置padding

**单值法：**padding:1px，统一设置盒子上下左右的padding值。

**双值法：**padding:1px 2px，第一个值是上下padding，第二个值是左右padding。

**三值法：**padding:1px 2px 3px，第一个值是上padding，第二个是左右padding，第三个是下padding。

**四值法：**padding:1px 2px 3px 4px，分别是上、右、下、左，顺时针。

2）方向法

**padding-top：**上

**padding-bottom：**下

**padding-left：**左

**padding-right：**右

注意：当使用百分比设置margin和padding时，无论哪个方向都是参照父元素设置的。

8、标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准文档流的特征：

1）文本内容具有空白折叠现象。

2）文本内容高低不齐，底边对齐（baseline）。

3）文本内容如果超过了盒子的宽度会自动换行。

标准文档流的分类：

分为行内元素和块级元素。

所有的文本级标签，除了<P>都是行内元素。

所有的容器级标签还有<p>都是块级元素。

9、块级元素

1）特征：

可以设置宽高，有换行符。

独占一行，如果设置了宽高，那么容器范围是设置的宽高；如果没有设置宽度，默认是撑满父容器，即父容器宽度的100%。

非块级元素可以使用display:block属性设为块级元素。

可以包含块级元素和行内元素。

2）块级元素有：

<address>、<div>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<form>等

10、行内元素

1）特征：

不可以设置宽高，与其他行内元素在一行内从左到右依次排列。

容器默认包裹内容，宽度由内容撑开。

行内元素设置上下margin、padding不生效（不占位置但是背景色能呈现），左右生效。

非行内元素可以通过display:inline属性设为行内元素。

只能包含行内元素。

2）行内元素有：

<span>、<a>、<br>、<strong>、<sup>、<sub>、<em>、<del>、<select>、<label>等

11、行内块元素

1）特征：

可以设置宽高，与其他行内元素在一行内从左到右依次排列。

容器默认包裹内容，宽度由内容撑开。如果设置了宽高，那么容器的范围是设置的宽高。

非行内块元素可以通过display:inline-block属性设为行内块元素。

2）行内块元素有：

<img>、<input>、<textarea>等

12、元素隐藏

三种方式：

1）display:none，设置元素消失，不占位。（常用）

2）visibility:hidden，设置元素消失，占位。（不常用）

3）opacity：0，设置元素不透明度为0，消失占位。（实现透明度渐变效果常用）

区别：

1、空间占据

display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

2、子元素继承

display:none不会被子元素继承，但是父元素都不在了，子元素也就不会显示了

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 1使其重新显示
3、事件绑定

display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；

visibility:hidden 元素上绑定的事件也无法触发；

opacity: 0元素上面绑定的事件是可以触发的。

4、过渡动画

transition对于display无效，

transition对于visibility也是无效的，

transition对于opacity有效。

13、居中

**单行文本：**设置height和line-height相同。

**多行文本：**不设置高度，通过padding双值法设置上下padding，左右设为0。

**子容器：**水平居中使用margin：0 auto；垂直居中，若父容器已知高度，使用margin-top（注意塌陷问题）。如果父容器高度不一定，则可以在父容器中使用上下padding。

**行内块：**水平text-align；垂直vartical-align：middle；

14、浮动

浮动不同于标准文档流，浮动按元素的类型排列；

浮动的元素都脱离了标准文档流，不再占据以前的位置。

浮动出现的初衷是为了实现文字环绕效果。

浮动分为：left（左浮动）、right（右浮动）、none（无，标准文档流）

1）特征

浮动可以按照从左到右紧密排列。

浮动的元素具有块级元素的部分特点，可以设置宽高、padding、margin但是没有换行符。

浮动的元素不存在上下margin合并的问题。

浮动的元素都脱离了标准文档流，不再占据以前的位置。

一个元素设置浮动后，其他同级元素都要设置浮动。

元素设置浮动后，原有的自适应占父元素宽度百分百的宽度变为包裹的内容的宽度。

元素设置浮动后，会影响后面元素的布局，所以要及时清除浮动。

2）浮动的元素塌陷问题

在父元素不设置宽高的情况下，若是子元素都设置了浮动，则会呈现出父元素塌陷的问题。

解决方案：

1、给父元素设置高度：在确定宽高的情况下可以使用，但是一般情况下，父元素的宽高由内容撑起，因此此方案有效但是不常用。

2、外墙法：在父元素后面加入一个同级的空元素（div），然后在这个空元素中设置清除浮动。这种方法会添加很多无用元素，增加结构层代码量，且我们完全可以直接在后面的元素中清除浮动。

3、内墙法：在父元素内部的最后加入一个空元素（div），然后在这个空元素中设置清除浮动。问题类似于外墙法，但是撑起了父元素的高度也解决了塌陷。

4、给浮动的元素的容器添加浮动：给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

5、父元素设置display:inline-block，达不到想要的布局效果

6、使用CSS的overflow属性：

给浮动元素的容器添加overflow:hidden;（溢出隐藏）或overflow:auto;（溢出自适应）可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

但是这种方式在需要内容溢出盒子时，可能会影响内容的显示效果。

7、使用邻接元素处理：什么都不做，给浮动元素后面的元素添加clear属性。

8、使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

也可以直接用父元素:after直接加给父元素，但是最好还是写一个clearfix类

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

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

9、双伪元素清除浮动

.clearfix::after,
.clearfix::before {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

15、伪元素和伪类的区别

1）伪类允许出现在选择器的任何位置，伪元素只能跟在选择器的最后一个简单选择器后面。

2）伪类操作的对象是文档树中已有的元素，而伪元素则创建了一个文档树之外的新元素（本质）。

3）伪类是类，伪元素是元素，权重不同。

16、浮动元素依次贴边

默认盒子会按照顺序排列，如果前面有兄弟，则紧贴着兄弟。如果没有兄弟，盒子将贴在父亲的边上。如果一行容不下，会另起一行然后渲染。方向永远是从左到右，从上到下，在另起一行后即使发现上面有空隙容得下，也不会挤进去。

17、浮动与行内块的区别

浮动：使元素脱离标准文档流，向指定的方向移动，遇到其他相邻浮动元素或者父元素的边就会停下来。

行内块：同时具有行内元素和块元素的特点，可以实现对元素的有序排列。不会贴边，会另起一行。

两者区别：

1）当标签高度不一致时，浮动会改变排列的顺序，行内块会依旧遵循排列的顺序。

2）浮动元素脱离标准文档流，不占用空间，行内块会抢占空间。

18、margin对元素宽度的影响

如果块元素没有设置宽度，其宽度默认为父元素宽度。此时如果修改margin值，会影响元素的宽度，正值宽度减小，负值宽度加大。

如果设置了宽度，则宽度恒定不受margin值影响，只改变元素位置。在其中，margin-left改变位置的优先级大于margin-right。

19、margin对浮动元素的影响

对于标准文档流来说，块元素默认占满整行，因此设置水平方向的margin不会影响后面的元素。

margin是相对于原有位置移动的。

如果让盒子浮动，此时设置盒子的边距会影响后面的元素，前面的元素不受影响.

​ 1）如果浮动的盒子通过margin移动是受前面元素影响的，那么盒子移动的距离就是前面所有盒子移动的距离。

​ 2）如果盒子2要移动到盒子1前面，移动的距离与盒子1的移动距离无关，与两个盒子的宽度有关：盒子1+盒子2

​ 3）当盒子2移动到盒子1前面，盒子3与盒子1贴边，为盒子3设置margin时，其移动距离为盒子1移动距离+盒子2宽度+自身移动距离（margin）

公式：

设定w为盒子自身宽度，w1代表盒子1的宽……

​ d为移动距离，d1代表盒子1的移动距离……

2贴1边：d2=w1+w2

2溢出，3贴1边:d3=d1+w2+d3