#### 二、CSS的背景
###### 2.1. 背景颜色
💡💡
{background-color: 定义元素的背景颜色}
background-color: 颜色值;
默认为透明色
background-color:transparent;
###### 2.2. 背景图片
💡💡
background-image:none|url
###### 2.3. 背景平铺
💡💡
background-repeat:repeat|no-repeat|repeat-x|repeat-y
平铺|不平铺|横向平铺|纵向平铺
###### 2.4. 背景图片位置
💡💡
background-position:x y;
position: top|bottom|left|right|center 方位名词
###### 2.5. 背景图片固定
💡💡
background-attachment:scroll|fixed
scroll 随对象内容而滚动
fixed 背景图形固定
###### 2.6. 背景复合写法
💡💡
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 background:pink url repeat fixed top;
###### 2.7. 背景色半透明
💡💡
background:rgba(0,0,0,0.3);
z最后一个参数是alpha透明度 取值范围在0~1
#### 三、CSS三大特性
###### 3.1.层叠性
>
> 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
>
>
>
💡💡**样式冲突 就近原则 样式不冲突，不会层叠**
###### 3.2.继承性
>
> CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
>
>
>
💡💡**字标签会继承父标签的某些样式**
###### 3.3.优先级
>
> 当同一个元素指定多个选择器，就会有优先级的产生
>
>
>
💡💡 **优先级很重要很重要 要记牢**
* 考虑选择器权重
* 越细分权重越大
* 继承的权重为0
**通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.**
💡💡
* 权重表格：
| 选择器 | 选择器权重 |
| --- | --- |
| 继承 | 0,0,0,0 |
| 元素选择器 0,0,0,1 | |
| 类选择器，伪类选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式，style=‘’ | 1,0,0,0 |
| ！important | 无穷大 =指定 |
#### 四、CSS盒子模型
>
> 网页布局的核心本质： 就是利用 CSS 摆盒子
>
>
>
###### 4.1.边框
💡💡
border:border-width||border-style||border-color
/*简写 无顺序*/ border:1px solid red; /*分开写 这是上边框 其余同理*/ border-top:1px solid red;
💡💡边框样式:
* none 默认无
* solid 单实现 最常用
* dashed 虚线
* dotted 点线
###### 4.2.表格的细线边框
💡💡
border-collapse:collapse; /*collapse合并*/
###### 4.3.边框会影响盒子实际大小
💡💡 解决方法:
1. 测量盒子大小的时候，不量边框
2. 如果测量时包含边框，则需要用width/height减去边框宽度
###### 4.4.内边距
>
> padding 属性用于设置内边距，即边框与内容之间的距离。
>
>
>
* padding-top 上内边距
* padding-bottom 下
* padding-left 左
* padding-right 右
💡💡
| 值的个数 | 表达意思 |
| --- | --- |
| padding:5px; | 1个值，上下左右都有5像素内边距 |
| padding:5px 10px; | 2个值，上下边距为5像素，左右为10像素 |
| padding:5px 10px 20px; | 3个值，上内边距为5像素，左右为10像素，下为20像素 |
| padding:5px 10px 20px 30px; | 4个值，上右下左，顺时针 |
###### 4.5.外边距
>
> margin 属性用于设置外边距，即控制盒子和盒子之间的距离
>
>
>
* margin-top 上外边距
* margin-bottom 下
* margin-left 右
* margin-right 左
💡💡
**margin间写表达方式和padding一样
外边距可以让盒子水平居中**
.header {width:200px; margin:0 auto;} /*块级元素水平居中*/
**行内元素或者行内块元素水平居中给其父元素添加text-align:center**
###### 4.6.外边距合并
1. 相邻块元素垂直外边距的合并
💡💡解决方案：
* 尽量只给一个盒子添加 margin 值。
2. 嵌套块元素垂直外边距的塌陷
💡💡解决方案：
* 可以为父元素定义上边框。
* 可以为父元素定义上内边距。
* 可以为父元素添加 overflow:hidden。
###### 4.7.清除内外边距
>
> 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
>
>
>
💡💡
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }
#### 五、CSS3新增样式
###### 1.1.圆角边框
>
> CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。**border-radius** 属性用于设置元素的外边框圆角
>
>
>
border-radius:length;
💡💡
* 参数值可以为数值或百分比的形式
* 如果是正方形，设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
* 该属性是一个简写属性,分别代表左上角、右上角、右下角、左下角
* 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
###### 5.2.盒子阴影
>
> CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
>
>
>
box-shadow: h-shadow v-shadow blur spread color inset;
###### 5.3.文字阴影
>
> CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本
>
>
>
💡💡
text-shadow: h-shadow v-shadow blur color;
#### 六、浮动
###### 6.1.传统网页布局的三种方式
* 普通流（标准流）
* 浮动
* 定位
标准流：
>
> 标准流: 就是标签按照规定好默认方式排列
>
>
>
###### 6.2.为什么需要浮动
>
> 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.
>
>
>
💡💡
**浮动典型应用：可以让多个块级元素一行内排列显示**。
网页布局第一准则：**多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动**。
###### 6.3.什么是浮动
>
> float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
>
>
>
选择器 { float: 属性值; } 属性值：none left right
###### 6.4.浮动特性
* 浮动元素会脱离标准流（脱标）(脱标：浮动的盒子不再保留原先的位置)
* 浮动的元素会一行内显示并且元素顶部对齐
>
> 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
>
>
>
* 浮动的元素会有行内块的特性
###### 6.5.浮动元素经常和标准流父级搭配使用
💡💡为了约束浮动元素位置, 网页布局一般采取的策略是:
>
> 先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准则·
>
>
>
#### 七、网络布局注意点
###### 7.1.浮动和标准流的父盒子搭配。
>
> 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
>
>
>
###### 7.2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
>
> 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
>
>
> 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
>
>
>
#### 八、清除浮动
###### 8.1.为什么需要清除浮动
>
> 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
>
>
>
###### 8.2.清除浮动本质
💡💡本质:
>
> * 清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度
> * 清除浮动的本质是清除浮动元素脱离标准流造成的影响
>
>
>
**如果父盒子本身有高度，则不需要清除浮动**
###### 8.3.清除浮动样式
选择器{clear:属性值;}
* 用 clear: both;比较多
* 清除浮动的策略是: 闭合浮动.
###### 8.4.清除浮动之额外标签法
>
> 额外标签法也称为隔墙法，是 W3C 推荐的做法。
>
>
>
💡💡方法：
额外标签法会在浮动元素末尾添加一个空的标签 如
，或者其他标签（如等）
* 优点： 通俗易懂，书写方便
* 缺点： 添加许多无意义的标签，结构化较差
* 注意： 要求这个新的空标签必须是块级元素
###### 8.5.清除浮动之父级添加 overflow 属性
>
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**
**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**
**[需要这份系统化资料的朋友，可以戳这里获取](https://gitee.com/vip204888)**
