前端开发基础（CSS进阶）

一、CSS三大特性：

1、层叠性：

​	相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

2、继承性

子元素可以继承父元素的样式：
​	（text-，font-，line-这些元素开头的可以继承，以及color属性

行高的继承性

body {
   font:12px/1.5 Microsoft YaHei；
 }

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素的行高为 1.5
• 此时子元素的行高是：当前子元素的文字大小 * 1.5
• body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3、优先级

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行
  

优先级注意点:
	权重是有4组数字组成,但是不会有进位。
	可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
	等级判断从左向右，如果某一位数值相同，则判断下一位数值。
	可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
	继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
	div ul li ------> 0,0,0,3
	.nav ul li ------> 0,0,1,2
	a:hover -----—> 0,0,1,1
	.nav a ------> 0,0,1,1

二、盒子模型

网页布局的流程：

• 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
• 利用 CSS 设置好盒子样式，然后摆放到相应位置。
• 往盒子里面装内容

1、盒子模型的组成：

2、边框：

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；

（1）语法：

 border : border-width || border-style || border-color; 

边框样式可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

（2）相邻边框：

border-collapse: collapse; 表示相邻边框合并在一起

（3）边框会影响盒子实际大小

• 测量盒子大小的时候,不量边框。
• 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

3、内边距：

padding 属性用于设置内边距，即边框与内容之间的距离

（1）语法：


（2）内边距会影响盒子的实际大小

• 内容和边框有了距离，添加了内边距。
• padding影响了盒子实际大小
• 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
• 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小

4、外边距：

margin 属性用于设置外边距，即控制盒子和盒子之间的距离

（1）外边距应用：

外边距可以让块级盒子水平居中的两个条件：

• 盒子必须指定了宽度（width）。
• 盒子左右的外边距都设置为 auto 。

（2）外边距合并：

• 相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边
距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者
这种现象被称为相邻块元素垂直外边距的合并。

（3）嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案

• 可以为父元素定义上边框。

• 可以为父元素定义上内边距。

• 可以为父元素添加 overflow:hidden

（4）清除外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

 * {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

三、其他样式：

1、圆角边框：

border-radius:length;  

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius
  和border-bottom-left-radius
• 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

2、盒子阴影：

 box-shadow: h-shadow v-shadow blur spread color inset;

3、文字阴影：

 text-shadow: h-shadow v-shadow blur color;

四、浮动：

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

1、网页的三种传统布局方式

• 普通流（标准流）
• 浮动
• 定位

2、标准流（普通流或者文档流）

所谓的标准流: 就是标签按照规定好默认方式排列

• 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
• 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式

3、浮动

选择器 { float: 属性值; }

（1）浮动的特性：

• 浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)
  
• 浮动的元素会一行内显示并且元素顶部对齐
• 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
• 浮动的元素会具有行内块元素的特性，浮动元素的大小根据内容来决定，浮动的盒子中间是没有缝隙的

为了约束浮动元素位置, 我们网页布局一般采取的策略是:
先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

（4）浮动布局注意点：

• 浮动和标准流的父盒子搭配，先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
• 一个元素浮动了，理论上其余的兄弟元素也要浮动，一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
• 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

4、清除浮动

（1）为什么要清除浮动

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下
面的标准流盒子。

• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度
• 父级有了高度，就不会影响下面的标准流了

（2）清除浮动的方式：

• 第一种

 选择器{clear:属性值;} 

​	优点： 通俗易懂，书写方便
​	缺点： 添加许多无意义的标签，结构化较差
​	注意： 要求这个新的空标签必须是块级元素。
总结:
​	1、清除浮动本质是?
​	清除浮动的本质是清除浮动元素脱离标准流造成的影响
​	2、清除浮动策略是?
​	闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
​	3、额外标签法?
​	隔墙法, 就是在最后一个浮动的子元素后面添
​	4、加一个额外标签, 添加 清除浮动样式.
​	实际工作可能会遇到,但是不常用

• 额外标签法（隔墙法）

<div style="clear:both"></div>，或者其他标签（如<br />等）。

• 父级添加overflow属性

overflow:hidden | auto | scroll

优点：代码简洁
缺点：无法显示溢出的部分
注意：是给父元素添加代码

• 父级添加after伪元素

.clearfix:after {  
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 .clearfix {  /* IE6、7 专有 */ 
   *zoom: 1;
 } 

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易等

• 父级添加双伪元素

.clearfix:before,.clearfix:after {
   content:"";
   display:table; 
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }   

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等

五、CSS属性的书写顺序

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

非原创，网络上知识的搬运工。