目录
一、CSS基础
1.CSS基础简介
CSS 简介：Cascading Style Sheet，即层叠样式表，是一组样式设置规则，用于控制页面外观。
CSS 语法：由三部分构成，包括选择器、属性和值。
CSS 对大小写不敏感，是否包含空格不会影响CSS在浏览器中的效果。selector {property: value}
| 方式 | 描述 |
|---|---|
| 内联样式（行内样式） | 在标签内部通过 style 属性来修改元素的样式 |
| 内部样式表 | 将样式写在head中的style标签内，然后通过选择器为元素设置样式 |
| 外部样式表 | 可以将css样式编写到有一个外部 css 文件中然后通过link标签将其引入 |
内联样式只能对单个标签生效，会增加代码书写量，不易于进行维护修改。内部样式可以很方便的进行复用，但只能对一个网页起作用。外部样式表可以进行复用，可以使用浏览器的缓存机制，提高网页加载速度，提高用户体验。
样式的继承：我们为一个元素应用的样式同时也会继承到它的后代元素上 (部分样式不会被继承)
RGB值：rgb通过三种颜色不同浓度调配不同颜色，语法为 rgb (红色，绿色，蓝色)，值为0~255。16进制写法为 #红色绿色蓝色，值为 00~ff。
RGBA值：增加 a 表示不透明度，1完全不透明，0完全透明，.5半透明
HSL值：H 色相（0~360），S 饱和度（0%~100%），L 亮度（0%~100%）。
文档流（normal flow）：网页是一个多层的结构，一层叠着一层，通过CSS可以分别为每一层来设置样式。作为用户只能看到最上面的一层。这些层中，最下面的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。对于我们来说元素主要有两个状态：在文档流中和脱离文档流。
文档流中块元素的特点：1.块元素会在页面中独占一行（自上而下垂直排列）2.默认宽度是父元素的全部（会把父元素撑开）3.默认高度被内容撑开（子元素）
文档流中行内元素的特点：1.行内元素不会独占页面的一行，只占自身的大小 2.行内元素在页面中左向右水平排列，一行容纳不下换到第二行 3.行内元素的默认宽度和高度都被内容撑开
2.CSS选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 元素选择器 | E1 {} | 根据标签名来选定指定的元素 |
| id 选择器 | # id属性值 {} | 根据元素的 id 选中一个元素 |
| 类选择器 | .class属性值 {} | 根据元素的 class 属性值选中元素 |
| 通配选择器 | * {} | 选中页面中的所有元素 |
| 交集选择器 | E1E2...En {} | 同时选中符合多个条件的选择器（元素选择器在前） |
| 并集选择器 | E1,E2,...En {} | 同时选择多个选择器对应的元素 |
| 子元素选择器 | E1 > E2 {} | 选中指定父元素 E1 的指定子元素 E2 |
| 后代元素选择器 | E1 E2 {} | 选中指定元素 E1 内的指定后代元素 E2 |
| 兄弟元素选择器 | E1 + E2 {} | 选择 E1 后面紧跟的兄弟元素 E2 |
| 兄弟元素选择器 | E1 ~ E2 {} | 选择 E1 后面所有的兄弟元素 E2 |
| 属性选择器 | E1[属性名] {} | 选择含有指定属性的元素 |
| 属性选择器 | E1[属性名=属性值] {} | 选择含有指定属性及属性值的元素 |
| 属性选择器 | E1[属性名^=属性值] {} | 选择属性值以指定值开头的元素 |
| 属性选择器 | E1[属性名$=属性值] {} | 选择属性值以指定值结尾的元素 |
| 属性选择器 | E1[属性名*=属性值] {} | 选择属性值中含有某值的元素 |
| 伪类选择器 (排序) | : first-child | 选择第一个子元素 |
| : last-child | 选择最后一个子元素 | |
| : nth-child (n) | 选择第 n 个子元素 | |
| : first-of-type | 选择第一个指定子元素 | |
| : last-of-type | 选择最后一个指定子元素 | |
| : nth-of-type (n) | 选择第 n 个指定子元素 | |
| : not () | 将符合条件的元素从选择器中去除 |
| 伪类选择器 (链接) | : link | 表示没访问过的链接（正常的链接） |
| : visited | 表示访问过的链接（只能修改color） | |
| : hover | 表示鼠标移入的状态 | |
| : active | 表示鼠标点击的状态 |
| 伪元素选择器 | :: first-letter | 表示第一个字母 |
| :: first-line | 表示第一行 | |
| :: selection | 表示选中的内容 | |
| :: before | 表示元素的开始（结合 content 属性使用） | |
| :: after | 表示元素的最后（结合 content 属性使用） |
选择器的权重：内联样式 1000；id选择器 100；类和伪类选择器 10；元素选择器 1；通配选择器 0；继承的样式 没有优先级。
选择器优先级：1.要将所有选择器的优先级相加计算，最后优先级取高显示（分组选择器单独计算）。2.选择器的累加不会超过其最大的数量级。3.优先级计算相同，优先使用靠下的样式。4.在某一样式后边添加 ! important，则该样式获取最高优先级。
二、CSS盒模型
1.盒模型组成部分
盒模型（box model）：1.CSS将页面中的所有元素都设置为了一个矩形的盒子。2.将元素设置为矩形的盒子后，对页面的布局就变成了不同的盒子摆放到不同的位置。3.每一个盒子都由以下几个部分组成：内容区（content）内边距（padding）边框（border）外边距（margin）。
内容区：元素中所有子元素和文本内容都在内容区中排列。内容区大小由 width 和 height 设置。
边框：边框属于盒子边缘，盒子里边属于盒子内部，出了边框都是盒子的外部。要设置边框，需要至少设置三个样式：边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style。
1.border-width 有默认值，写一个值四边等宽，写四个值按上右下左设置四边宽度。缺值按上下、左右补齐。border-top-width border-bottom-width border-left-width border-right-width 用以分别指定宽度。（color 和 style 均可按此方式设置）
2.border-color 默认值是 color（前景色）
3.solid（实线）dotted（点状虚线）dashed（虚线）double（双线）
4.border 简写属性，通过该属性可以设置所有边框相关的样式，没有顺序要求，空格隔开。简写属性也有 border-xxx（TBLR）属性值给 none 表示去掉该侧边框。
内边距：内容区和边框之间的距离是内边距。内边距和 border 相同有四个方向。内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上。
1.一盒子的可见框的大小，由内容区、内边距和边框共同决定。
2.padding 简写属性可以同时指定四个方向的内边距，规则和 border-width 一样。
外边距：外边距不会影响盒子可见框的大小。但是外边距会影响盒子的位置。
| margin-top | 上外边距，设置一个正值，元素会向下移动 |
| margin-right | 默认情况下设置 margin-right 不会产生任何效果 |
| margin-bottom | 下外边距，设置一个正值，其下边的元素会向下移动 |
| margin-left | 左外边距，设置一个正值，元素会向右移动 |
1.margin 也可以设置负值，如果是负值则元素会向相反的方向移动。
2.元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其它元素。
3.margin 间歇属性可以同时设置四个方向的外边距。
2.盒模型页面布局
水平方向的布局：
1.一个元素在其父元素中，水平布局必须要满足以下的等式：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度。
2.如果相加结果使等式不成立，则成为过渡约束，则等式会自动调整。如果这七个值中没有为 auto的情况，则浏览器会自动调整 margin-right 值以使等式成立。width margin-left margin-right 的值可以设置为 auto。如果某个值为 auto，则会自动调整为 auto 的那个值使等式成立。width 的值默认就是 auto。多个 auto 值优先调节宽度，宽度非 auto 外边距大小等分。
垂直方向的布局：
1.子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用 overflow 属性来设置父元素如何处理溢出的子元素。属性值如下：
| visible | 默认值，子元素会从父元素中溢出，在父元素外部的位置显示 |
| hidden | 溢出内容会被裁剪不会显示 |
| scroll | 生成两个滚动条，通过滚动条来查看完整的内容 |
| auto | 根据需要生成滚动条 |
2.可使用 overflow-x 和 overflow-y 单独设置水平和垂直方向属性值。
行内元素的盒模型 ：
1.行内元素不支持设置宽度和高度
2.行内元素可以设置padding、border、margin，但是垂直方向都不会影响布局。
| display 属性用来设置元素显示的类型 | inline：将元素设置为行内元素 |
| block：将元素设置为块元素 | |
| inline-block：将元素设置为行内块元素，既可以设置宽度高度又不会独占一行 | |
| table：将元素设置为一个表格 | |
| none：元素不在页面中显示 |
| visibility 用来设置元素的显示状态 | visible 默认值，元素在页面中正常显示 |
| hidden 元素在页面中隐藏不显示，但是依然占据页面的位置 |
3.盒模型格式
盒子的大小：默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定。
| box-sizing用来设置盒子尺寸的计算方式 | content-box 默认值，宽度和高度用来设置内容区的大小 |
| border-box 宽度和高度用来设置整个盒子可见框的大小。为总大小 |
border-shadow 用来设置元素的阴影效果，阴影不会影响页面布局。
| 第一个值 | 水平偏移量，设置阴影水平位置，正值向右移动 负值向左移动 |
| 第二个值 | 垂直偏移量，设置阴影竖直位置，正值向下移动 负值向上移动 |
| 第三个值 | 阴影的模糊半径 |
| 第四个值 | 阴影的颜色 |
例：box-shadow: 10px 10px 50px rgba(0, 0, 0, .3) ;
outline 用来设置元素的轮廓线，用法和 border 一模一样。轮廓和边框的不同点，就是轮廓不会影响到可见框的大小。
border-radius：用来设置圆角，值为圆角的半径大小。可以分别指定四个角的圆角。四个值分别指定左上、右上、右下、左下，对角相同原则。可细分为 top-left，top-right，bottom-left，bottom-right。（将元素设置为一个圆形：border-radius: 50%）
三、浏览器默认样式
通常情况，浏览器都会为元素设置一些默认样式。默认样式的存在影响页面布局，通常必须驱虫药浏览器的默认样式。简单方法：*{margin：0；padding：0；}。或通过 link 引入重置样式表。
| reset.css | 直接去除了浏览器的默认样式 |
| normalize.css | 对默认样式进行了统一 |
扫一扫
9299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
