1、CSS的组成
css 样式由选择符和声明组成，而声明又由属性和值组成。
选择符{属性:值}:p{color:red;}
1.1、选择符（选择器）
选择符：又称选择器，指明网页中要应用样式规则的元素。
1.2、声明（样式）
声明：在英文大括号“｛｝”中的的就是声明。属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p {
font-size:12px;
color:black
}
2、CSS的形式
从CSS 样式代码插入的形式来看基本可以分为内联式、嵌入式和外部式三种。
2.1、行内式CSS样式
把CSS代码直接写在现有的HTML标签中，CSS样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
<p style="color:red;font-size:12px">
这里文字是红色。
</p>
2.2、内嵌式CSS样式
就是可以把CSS样式代码写在head标签里的<style type="text/css"></style>标签之间。如下面代码实现把<span>标签中的文字设置为红色：
<style type="text/css">
span{ color:red; }
</style>
2.3、外链式CSS样式
写在单独的一个css文件中,外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
3、CSS选择器
页面上的标签越多，效率越低。
4、继承性
5、层叠性
6、CSS的排版样式
6.1、文字排版
6.2、段落排版
7、CSS盒模型
7.1、重要性元素分类
7.2、块级元素和行内元素的相互转换（display）
7.3、盒模型--边框
7.4、盒模型--外边距
7.5、盒模型--内边距
8、CSS布局模型
清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。
8.1、流动模型
8.2、浮动模型
8.2.1、浮动的副作用
- 背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
- 边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
- margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
8.2.2、清除浮动
方法1：给父级添加高度
有的时候是不能给父级添加高度的，所以这个方法就用不了（父级没有高度的情况下）
方法2：用clear：both（外墙法）
总共用的有三种放置clear：both的方法，清除左右浮动：外墙法，又称隔墙法，不能使父亲撑开高度。隔开两部分的浮动clear:both是指不允许元素浮动在该元素的两侧。
方法3：同样用clear：both（内墙法）
方法4：使用overflow：hidden溢出隐藏，可以把溢出边框的内容隐藏掉
如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令。
方法5：After伪类清除浮动（压轴方法：网易；要背）
8.3、层模型（定位）
8.4、居中显示
8.4.1、水平居中
- 行内或类行内元素（比如文本和链接），在块级父容器中让行内元素居中，只需使用 text-align: center;即可。
- 块级元素，让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto（前提是已经为元素设置了适当的 width 宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）。
- 多个块级元素，如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display 值。
8.4.2、垂直居中
-
行内或类行内元素（比如文本和链接）单行对于单行行内或者文本元素，只需为它们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中。
-
多行文本，同样可以使用等值 padding-top 和 padding-bottom 的方式实现垂直居中。如果你在使用过程中发现这种方法没见效，那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器，然后使用 vertical-align 属性实现垂直居中。
-
块级元素，已知元素的高度，无法获知元素的具体高度是非常常见的一种状况，比如：视区宽度变化，会触发布局重绘，从而改变高度；对文本施加不同的样式会改变高度；文本的内容量不同会改变高度；当宽度变化时，对于宽高比例固定的元素（比如图片），也会自动调整高度……如果我们知道元素的高度，可以这样来实现垂直居中
-
未知元素的高度，如果我们不知道元素的高度，那么就需要先将元素定位到容器的中心位置，然后使用 transform 的 translate 属性，将元素的中心和父容器的中心重合，从而实现垂直居中。
8.4.2、水平垂直居中
9、Z-index 层级
9、Z-index 层级
兼容问题
居中的目的，不出现水平滚动条（1024*768）
网友评论