1 CSS三大特性

1.1 层叠性

样式冲突，遵循的原则是就近原则，哪个样式距离结构近，就执行哪个样式

1.2 继承性

子元素可以继承父元素的样式（ text-、font-、line- 这些元素开头的属性可以继承，以及 color 属性）
特殊：行高的继承

body {
    font: 12px/1.5 'Microsoft YaHei';
    /*  此时子元素的行高是：当前元素的文字大小 * 1.5，body 行高 1.5 
    这样写法最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高  */
}

1.5的意思：让里面所有的子元素的行高是当前文字大小的1.5倍

1.3 优先级

选择器相同，则执行层叠性
选择器不同，则按权重

选择器	权重
继承或者 *	0，0，0，0
元素选择器（标签选择器）	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=""	1，0，0，0
！important重要的	无穷大

div {
    color: pink !important;  
}

助记：id大于类大于元素

2 CSS盒子模型（重要）

页面布局要学习三大核心

盒子模型
浮动
定位

盒子模型由元素的内容、内边距（padding）、边框（border）、和外边距（margin）组成

2.1 边框

边框由三部分组成：边框宽度（粗细）边框样式边框颜色

border : borde-width || border-style || border-color

属性	作用	属性值
border-width	定义边框粗细	10px
border-style	边框的样式	none，solid，dashed，dotted
border-color	边框颜色	red等

border: 1px solid red;         /* 没有顺序 */
border-collapse : collapse;    /* 表示相邻边框合并在一起 */

边框分开写法：

border-top: 1px solid red; 	          	/* 只设定上边框， 其余同理 */

注意：边框会影响盒子实际大小（算在内）

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

2.2 内边距padding

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

属性	作用
padding-left	左内边距
padding-right	右内边距
padding -top	上内边距
padding-bottom	下内边距

值的个数	意思
padding : 5px;	1个值，代表上下左右都有5像素内边距
padding :5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding :5px 10px 20px 30px	4个值，上是5像素，右是10像素，下20像素，左是30像素，顺时针

padding影响盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

padding不会影响盒子大小

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

2.3 外边距margin

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

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距可以让块级盒子水平居中，但是必须满足两个条件

盒子必须制定了宽度(width)
盒子左右的外边距都设置为 auto

/* 三种写法 */
margin-left: auto; margin-right: auto;

margin: auto;

margin: 0 auto;

注意：

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可

外边距合并问题

使用 margin 定义块级元素的垂直外边距时，可能会出现外边距的合并。

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

解决方案：尽量只给一个盒子添加 margin 值

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

解决方案：

可以为父元素定义上边框

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

可以为父元素添加 overflow: hidden

还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题

清除内外边距：

* {
    padding: 0;
    margin: 0;
}

盒子布局稳定性：

按照优先使用宽度（width）内边距（padding）外边距（margin）。

原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。

3 圆角边框

border-radius 属性用于设置元素的外边框圆角，设置圆的半径，单位百分比或数值px

/* 分开写 */
border-top-left-radius: 10px；
border-top-right-radius: 10px；
border-bottom-right-radius: 50%；
border-bottom-left-radius: 10%

4 盒子阴影

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

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离。
spread	可选，阴影的尺寸。
color	可选，阴影的颜色。
inset	可选，将外部阴影（outset）改为内部阴影

模糊距离：影子的虚实
阴影尺寸：影子的大小

div:hover {
      box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);      
}

5 文字阴影

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

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色。

6 传统网页布局三种方式

网页布局的本质➡用 CSS 来摆放盒子。把盒子摆放到相应位置

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

6.1 标准流

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

块级元素会独占一行，从上向下顺序排列

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
常用元素：span、a、i、em

6.2 浮动

为什么需要浮动

让多个块级元素水平排在一行上，两个盒子左右对齐等

什么是浮动

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认）
left	元素向左浮动
right	元素向右浮动

浮动的特性

脱标：浮动元素会脱离标准流（脱标），浮动的盒子不再保留原先的位置
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性：

任何元素都可以浮动
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙

浮动元素经常和标准流父级搭配使用，先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
建议:如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

6.3 清除浮动

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

总结：

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
准确地说，并不是清除浮动，而是清除浮动后造成的影响

清除浮动本质

如果父盒子本身有高度，则不需要清除浮动

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

6.4 清除浮动的方法

选择器{clear:属性值;}   clear 清除

属性值	描述
left	不允许左侧有浮动元素(清除左侧浮动的影响)
right	不允许右侧有浮动元素(清除右侧浮动的影响)
both	同时清除左右两侧浮动的影响

实际工作中,几乎只用clear: both

额外标签法

例如<div style="clear:both"></div>，或者其他标签（如</br>等）
注意：要求这个新的空标签必须是块级元素

父级添加 overflow 属性

可以给父级添加： overflow为 hidden| auto| scroll 都可以实现

after伪元素

: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;
}

6.5 清除浮动小结

为什么需要清除浮动？

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了。

清除浮动方式	优点	缺点
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

6.6 定位

为什么需要定位

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
当我们滚动窗口的时候，盒子是固定屏幕某个位置的
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位组成：

定位 = 定位模式 + 边偏移

定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移就是定位的盒子移动到最终位置

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素的上边线的距离
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素的下边线的距离
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离

静态定位static（了解）就是默认无定位

相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋）

特点：

它是相对于自己原来的位置来移动的
不脱标，继续保留原来位置
因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。

绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的

特点：

如果没有祖先元素，或者祖先元素没定位，则以浏览器为准进行定位(Document 文档)
如果祖先元素父级有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占用原先的位置（脱标）

子绝父相

意思：子级使用绝对定位，父级则需要相对定位

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结：因为父级需要占有位置，因此是相对定位，子盒子不要占有位置，则是绝对定位

固定定位fixed

可以在浏览器页面滚动时元素的位置不会改变

特点：

以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
固定定位不再占有原先的位置(脱标)

6.7 定位的拓展

绝对定位盒子居中

绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中在使用绝对定位时要向实现水平居中，可以按照下面的方法：

堆叠顺序（z-index）

在使用「定位」布局时，可能会「出现盒子重叠的情况」。

加了定位的盒子，默认「后来者居上」，后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以「调整盒子的堆叠顺序」

z-index的特性如下：

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上
数字后面不能加单位
z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

一个行内的盒子，如果加了「浮动」、「固定定位」和「绝对定位」，不用转换，就可以给这个盒子直接设置宽度和高度（行内块）等
我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

7 元素显示与隐藏

display 显示

display: none 隐藏对象
特点：隐藏之后，不再保留位置。
display: block 除了转换为块级元素之外，同时还有显示元素的意思。

visibility 可见性

visibility: visible; /*元素可视*/

visibility: hidden;  /*元素隐藏*/

特点：隐藏之后，继续保留原有位置

overflow 溢出

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

使用场景：

清除浮动
隐藏超出内容，隐藏掉, 不允许内容超过父盒子

小结：

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

CSS笔记--超详细--零基础--简洁易懂（二）