前言：
本文接上篇文章，继续记录学习css时的笔记。
一、 CSS 的元素显示模式
元素显示模式就是指元素以什么方式进行显示，元素显示模式主要分为块元素、行内元素以及行内块元素。三者之间可以转换。
1.块元素
一般指该元素自身独占一行，如div标签，p标签，ul标签，li标签等。
注意 块元素独占一行
块元素的高度、宽度、外边距以及内边距都可以控制
块元素的宽度默认是容器（父级宽度）的100%
块元素本质是一个容器，里面可以放行内或者块级元素
2.行内元素
一般指多个元素共用一行，如a标签，span标签等。
注意 行内元素一行上可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素
3.行内块元素
一般是指该元素同时具有块元素和行内元素的特点，如img标签，input标签。
注意 行内块元素的高度，行高，外边距以及内边距都可以控制
行内块元素的默认宽度就是它本身内容的宽度
4.元素显示模式的转换
转换为块元素 ：display:block;
转换为行内元素 ：display:inline;
转换为行内块元素 ：display:inline-block;
二、CSS背景属性
1.背景颜色
使用 background-color：颜色值；来定义背景颜色
eg:背景颜色为透明色
background-color : transparent ;2.背景图片
使用background-image属性来添加背景图片
background-image:none;注意 none 指无背景图，url (url)添加背景图片后面的地址。
3.背景平铺
使用background-repeat属性对背景图像进行平铺
background-repeat: repeat;| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺 |
| no-repeat | 不平铺 |
| repeat-x | 在横向上平铺 |
| repeat-y | 在纵向上平铺 |
4.背景图片位置
使用 background-position属性可以改变图片在背景中的位置
background-position: x y;注意 x坐标和y坐标可以使用方位名词（top、center、bottom、center、right)或者精确单位
5.背景图像固定
使用background-attachment属性是否固定或者随着页面其余部分滚动
background-attachment: scroll;注意 scroll控制背景图像随内容对象滚动，fixed控制背景图像固定
6.背景色半透明
background: rgba(0, 0, 0, 0.3)三、盒子模型
CSS盒子模型主要包括边框、外边框、内边距。
1.边框
利用border设置元素的边框。由边框宽度、样式、颜色组成。
注意 border-width定义边框粗细，单位为px;
border-style定义边框的样式 （none代表没有边框；solid代表存在边框且边框为单实线；dashed代表边框为虚线；dotted代表边框为点线）；
border-color定义边框颜色。
边框会影响盒子的实际大小。
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
控制相邻边框合并。
border-collapse:collapse;圆角边框
border-radius属性用于设置元素的外边框圆角。
border-radius:length;注意 length可以理解为所要设置的圆角的半径；
参数值可以为数值或者百分比的形式
2.内边距
用padding属性用于设置内边距，即边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
padding属性（简写属性）可以有一到四个值：
padding后跟一个值，代表上下左右内边距的大小；
padding后跟两个值，代表上下边距是第一个值，左右边距是第二个值；
padding后跟三个值，上内边距是第一个值，左右内边距第二个值，下内边距为第四个值
padding后跟四个值，上对应第一个值，右对应第二个值，下对应第三个值，左对应第四个值，
顺时针方向
3.外边距
margin属性设置外边距，即盒子与盒子之间的距离。
使用起来与内边距相似。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
4.清除内外边距
网页元素很多有默认的内外边距，在布局前首先要清除网页元素的内外边距
* {
padding:0;
margin:0;
}四、浮动
传统网页布局的三种方式：普通流（标准流）、浮动、定位。
网页布局的实质是：用css来摆放盒子，把盒子摆到相应位子。
1. 什么是浮动？
使用float属性创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。
选择器 { float: 属性值；}注意 none代表元素不浮动；left代表元素向左浮动； right 代表元素向右浮动。
2. 为什么需要浮动？
标准流无法完成所有的布局效果，此时就可以用浮动完成布局。因此浮动可以改变元素标签默认的排列方式。
3. 浮动特性
3.1 浮动元素会脱离标准流（脱标）
脱离标准普通流的控制移动到指定位置叫脱标；脱标后浮动的盒子不再保留原先的位置。
3.2 浮动的元素会一行显示并且元素顶部对齐
若多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列；浮动元素是互相贴靠在一起的，无缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子则会另起一行对齐。
3.5 浮动的元素会具有行内块元素的特性
4. 约束浮动元素
为了约束浮动元素的位置，通常把浮动元素与标准流父级元素搭配使用。先用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置，复合网页布局第一准则。
5. 清除浮动
1.为什么要清除浮动?
一般浮动元素都有一个标准流的父元素，他们都有高度。在很多情况下，由于盒子内容大小的不确定性，父盒子不方便直接给出高度，子盒子浮动不占有位置，导致父盒子高度为零，直接影响到下面的标准流盒子。
2. 清除浮动的本质？
清除浮动的本质是清除浮动元素造成的影响；若父盒子本身有高度，则不需要清除浮动；清除浮动后父级根据浮动的子盒子自动检测高度，父级有高度便不会影响下面的标准流了
3.清除浮动的方法
（1）额外标签法
（2）父级添加 overflow 属性；
（3）父级添加 after 伪元素；
（4) 父级添加双伪元素；
