一、CSS的三大特性
层叠性、继承性、优先性
1.1、层叠性
- 相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。
- 层叠性主要解决样式冲突的问题
层叠性原则：
- 样式冲突，遵循就近原则**（离作用处近的）
1.2、继承性
- CSS中的继承：子标签会继承父标签里面的某些样式，如文本颜色和字号等
- 行高的特殊继承：
body {
font:12px/1.5 Microsoft YaHei
}
/* 1.5的意思：让里面所有的子元素的行高是当前文字大小的1.5倍 */1.3、优先级
- 当同一个元素指定多个选择器，就会有优先级的产生
<head>
<style>
div{
color:pink;
}
.text {
color:red;
}
</style>
</head>
<body>
<div class="text">你笑起来真好看</div>
</body>- 选择器相同，则执行层叠性
- 选择器不同，则按权重
| 选择器 | 权重 |
|---|---|
| 继承或者 * | 0，0，0，0 |
| 元素选择器（标签选择器） | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style="" | 1，0，0，0 |
| ！important重要的 | 无穷大 |
- 等级判断是从左到右，如果某一位数值相同，则判断下一位数值
- 权重可以叠加，但是永远不会有进位
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
## 二、盒子模型
分为border(边框)、content(内容)、padding(内边距)、margin(外边距)
2.1、边框border
- CSS 边框属性指定一个元素边框的样式和颜色，边框由三部分组成：边框宽度（粗细） 边框样式 边框颜色
border : borde-width || border-style || border-color
/* 边框的复合写法 ， 没有先后顺序之分*/| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
border-style
边框样式 border-style可以设置如下值：
none:没有边框即忽略所有边框的宽度（默认值）solid:边框为单实线（最为常用的）dashed: 边框为虚线dotted: 边框为点线
border-collapse
- border-collapse 属性控制相邻单元格的边框，是表格的细线边框
border-collapse : collapse;- 表示相邻边框合并在一起
边框会影响盒子实际大小
边框会额外增加盒子的实际大小，因此我们有两种方案解决：
- 测量盒子大小的时候，不量边框
- 如果测量的时候包含了边框，则需要 width/height 减去边框宽度
2.2、内边距padding
- 用于设置内边距,即盒子边框与内容之间的距离
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding -top | 上内边距 |
| padding-bottom | 下内边距 |
- padding属性(简写属性)可以有一到四个值
| 值的个数 | 表达意思 |
|---|---|
| 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会影响盒子大小的情况：如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。若要保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
- padding不会影响盒子大小的情况：如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
2.3、外边距margin
- 用于设置外边距，即控制盒子和盒子之间的距离
- margin 简写方式代表的意义跟 padding 完全一致
[外边距典型应用]
外边距可以让块级盒子水平居中，但是必须满足两个条件。一是盒子必须制定了宽度(width)，二是盒子左右的外边距都设置为 auto。
.header {
width: 960px;
margin: auto;
}左右的外边距都设置为 auto 有三种写法：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。
[外边距合并]
使用 margin 定义块级元素的垂直外边距时，可能会出现外边距的合并。「嵌套块元素垂直外边距的塌陷」 和 「嵌套块元素垂直外边距的塌陷」
相邻块元素垂直外边距的合并。
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。*取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
![]()
- 我们尽量只给一个盒子添加 margin 值
嵌套块元素垂直外边距的塌陷。
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
![]()
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加
overflow: hidden（ 最优解）
还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题。
2.4、清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding: 0;
margin: 0;
}2.5、 圆角边框
- border-radius 属性用于设置元素的外边框圆角。
border-radius:10px;radius半径参数值可以是数值或百分比的形式- 正方形要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
- 矩形要设置为一个圆，设置为高度的一半就可以
- 该属性是一个简写属性，可以跟四个值，分别代表左上, 右上，右下，左下
/*
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
*/2.6、盒子阴影
- box-shadow 属性用于为盒子添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置，允许负值 |
| v-shadow | 必需。垂直阴影的位置，允许负值 |
| blur | 可选。模糊距离 ， 即影子的虚实 |
| spread | 可选，阴影的尺寸 ， 即影子的大小 |
| color | 可选，阴影的颜色。 |
| inset | 可选，将外部阴影（outset）改为内部阴影 |
注意：
- 默认的是外阴影（outset），但是不可以在后面写这个单词，否则导致阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列
[动态阴影]
- 原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果
div:hover {
box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);
}[文本阴影]
- text-shadow 属性将阴影应用于文本
text-shadow: h-shadow v-shadow blur color三、浮动
3.1、传统网页布局的三种方式
CSS 的三种传统布局方式：普通流（标准流） 、浮动 、 定位
3.2、浮动的使用
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘（先确定浮动的方位，然后吸附在盒子的边缘上）
选择器 {
float: 属性值;
}| 属性值 | 描述 |
|---|---|
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
- 网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
- 网页布局第二准则：先设置盒子大小，之后设置盒子的位置。
3.3、 浮动的特性
脱标：脱离标准流的控制，移动到指定位置
- 浮动的盒子不再保留原先的位置
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
- 浮动的元素是相互贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
- 浮动元素会具有行内块元素特性
任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
- 如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
3.4、 浮动元素和标准流父级搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
3.5、 浮动的注意点
1.浮动和标准流的父盒子搭配。
- 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
- 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止起问题。
- 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
3.6、清除浮动的本质
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流
选择器 {
clear: 属性值;
}| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
- 我们实际工作中，几乎只用
clear:both - 清除浮动的策略是：闭合浮动
- 只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
3.7、清除浮动的方法
- 额外标签法
- 额外标签法会在浮动元素末尾添加一个空的标签,例如：
<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 {
*zoom:1;
}4.双伪元素
- 也是给父元素添加
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}四、定位
将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子，当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
4.1 、定位的组成
定位 = 定位模式 +边偏移
- 定位模式用于指定一个元素在文档中的定位方式
- 边偏移则决定了该元素的最终位置
定位模式
通过 CSS 的
position属性来设置
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
- 位偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素的上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素的下边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
4.2、静态定位static(了解)
- 静态定位是元素的默认定位方式，无定位的意思
- 静态定位没有边偏移
选择器 {
position: static;
}4.3、相对定位relative
特点：
- 它是相对于自己原来的位置来移动的
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待
- 因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的
4.4、绝对定位absolute
- 绝对定位是元素在移动位置的时候，是相对于它的父元素来说的
特点：
- 如果没有父元素，或者父元素没定位，则以浏览器为准进行定位
- 如果父级有定位(相对、绝对、固定定位)，则以最近一级的有定位父元素为参考点移动位置
- 绝对定位不再占用原先的位置（脱标），所以绝对定位是脱离标准流的
绝对定位盒子水平居中
- 加了绝对定位的盒子不能通过
margin: 0 auto水平居中 但是可以通过以下计算方法实现水平和垂直居中
left:50%； 让盒子的左侧移动到父级元素的水平中心位置margin-left: -100px; 让盒子向左移动自身宽度的一半
.box {
position: absolute;
/* 1.left走50%，父容器宽度的一半 */
left: 50%;
/* 2.margin 负值往左边走 自己盒子宽度的一半 */
margin-left: -xx;
}4.5、子绝父相
子级使用绝对定位，父级则需要相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父只能是相对定位。
4.6、固定定位fixed
固定定位是元素固定于浏览器的可视区的位置
主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变
特点：
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先的位置(脱标)
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
- 固定定位小技巧： 固定在版心右侧位置
.box {
position: absolute;
/* 1.left走50%，父容器宽度的一半 */
left: 50%;
/* 2.margin 负值往左边走 自己盒子宽度的一半 */
margin-left: -xx;
}4.7、定位叠放z-index
- 用 z-index 来控制盒子的前后次序(z轴向外)，防止盒子重叠
选择器 {
z-index: 1;
}- 数值是整数，默认是auto
- 属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有 z-index 属性
4.8、定位扩展
绝对定位的盒子居中
- 加了绝对定位的盒子不能通过
margin: 0 auto水平居中 可通过该方法实现居中
- left: 50%; 让盒子的左侧移动父级元素的一半
- margin-left: -xxx px 让盒子向左移动自身宽度的一半
- 加了绝对定位的盒子不能通过
定位特殊特性
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
脱标的盒子不会触发外边距塌陷
- 浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题。
绝对定位(固定定位)会完全压住盒子
- 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片） ，即文字具有环绕效果
- 绝对定位（固定定位） 会压住下面标准流所有的内容。
五、元素的隐藏与显示
5.1、display显示隐藏
display用于设置一个元素应如何显示
display: none/block;
/*隐藏对象/显示元素*/display隐藏元素后，不再占有原来的位置
5.2、visibility可见性
visibility用于指定一个元素应可见还是隐藏
visibility: visible/hidden;
/*元素可视/元素隐藏*/visibility隐藏元素后，继续占有原来的位置。- 如果隐藏元素想要原来位置， 就用
visibility：hidden - 如果隐藏元素不想要原来位置， 就用
display：none
5.3、overflow溢出显示隐藏
overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
有定位的盒子， 请慎用 overflow:hidden 因为它会隐藏多余的部分。