一、CSS
1. 起源
台湾人魏培源开发ViolaWWW浏览器使用了一种规则具有层次嵌套性的样式表 ，为之后 CSS 标准的诞生提供了启发。
2. 介绍
如果把Web网页比喻成一间屋子那么HTML就是组成这间房子的基本结构框架 ，CSS 则是装饰房子的一些颜料
3.选择器
3.1 基础选择器
| 选择器 | 别名 | 说明 |
|---|---|---|
| tag | 标签选择器 | 指定类型的标签 |
| #id | ID选择器 | 指定身份(唯一性)的标签 |
| .class | 类选择器 | 指定类名的标签 |
| * | 通配符选择器 | 所有类型的标签 |
3.2 层次选择器
| 选择器 | 别名 | 说明 |
|---|---|---|
| div1 div2 | 后代选择器 | 元素的后代元素 |
| div1>div2 | 子代选择器 | 元素的子代元素 |
| div1~div2 | 相邻同胞选择器 | 元素相邻的同胞元素 |
| div1l`div2 | 通用同胞选择器 | 元素后面的同胞元素 |
3.3 集合选择器
| 选择器 | 别名 | 说明 |
|---|---|---|
| div1,div2 | 并集选择器 | 多个指定的元素 |
| div1.div2 | 交集选择器 | 指定类名的元素 |
3.4 条件选择器
| 选择器 | 说明 |
|---|---|
| :lang | 指定标记语言的元素 |
| :dir | 指定书写方向的元素 |
| :has | 包含指定元素的元素 |
| :is | 指定条件的元素 |
| :not | 非指定条件的元素 |
| :where | 指定条件的元素 |
| :scope | 指定元素作为参考点 |
| :any-link | 所有包含href的链接元素 |
| :local-link | 所有包含href且属于绝对地址的链接元素 |
3.5 行为选择器
| 选择器 | 说明 |
|---|---|
| :active | 鼠标激活的元素 |
| :hover | 鼠标悬浮的元素 |
| ::selection | 鼠标选中的元素 |
3.6 状态选择器
| 选择器 | 说明 |
|---|---|
| :target | 当前锚点的元素 |
| :link | 未访问的链接元素 |
| :visited | 已访问的链接元素 |
| :focus | 输入聚焦的表单元素 |
| :required | 输入必填的表单元素 |
| :valid | 输入合法的表单元素 |
| :invalid | 输入非法的表单元素 |
| :in-range | 输入范围以内的表单元素 |
| :out-of-range | 输入范围以外的表单元素 |
| :checked | 选项选中的表单元素 |
| :optional | 选项可选的表单元素 |
| :enabled | 事件启用的表单元素 |
| :disabled | 事件禁用的表单元素 |
| :read-only | 只读的表单元素 |
| :read-write | 可读可写的表单元素 |
| :target-within | 内部锚点元素处于激活状态的元素 |
| :focus-within | 内部表单元素处于聚焦状态的元素 |
| :focus-visible | 输入聚焦的表单元素 |
| :blank | 输入为空的表单元素 |
| :user-invalid | 输入合法的表单元素 |
| :indeterminate | 选项未定的表单元素 |
| :placeholder-shown | 占位显示的表单元素 |
| :current() | 浏览中的元素 |
| :past() | 已浏览的元素 |
| :future() | 未浏览的元素 |
| :playing | 开始播放的媒体元素 |
| :paused | 暂停播放的媒体元素 |
3.7 结构选择器
| 选择器 | 说明 |
|---|---|
| :root | 文档的根元素 |
| :empty | 无子元素的元素 |
| :first-letter | 元素的首字母 |
| :first-line | 元素的首行 |
| :nth-child(n) | 元素中指定顺序索引的元素 |
| :nth-last-child(n) | 元素中指定逆序索引的元素 |
| :first-child | 元素中为首的元素 |
| :last-child | 元素中为尾的元素 |
| :only-child | 父元素仅有该元素的元素 |
| :nth-of-type(n) | 标签中指定顺序索引的标签 |
| :nth-last-of-type(n) | 标签中指定逆序索引的标签 |
| :first-of-type | 标签中为首的标签 |
| :last-of-type | 标签中为尾标签 |
| :only-of-type | 父元素仅有该标签的标签 |
3.8 属性选择器
| 选择器 | 说明 |
|---|---|
| [attr] | 指定属性的元素 |
| [attr=val] | 属性等于指定值的元素 |
| [attr*=val] | 属性包含指定值的元素 |
| [attr`=val] | 属性以指定值开头的元素 |
| [attr$=val] | 属性以指定值结尾的元素 |
| [attr~=val] | 属性包含指定值（完整单词）的元素（不推荐使用） |
| [attr\l=va1] | 属性以指定值（完整单词）开头的元素（不推荐使用） |
3.9 伪元素
| 选择器 | 说明 |
|---|---|
| ::before | 在元素前插入的内容 |
| ::after | 在元素后插入的内容 |
4. CSS字体属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| font-family | ‘微软雅黑’,“宋体”,“黑体” | 网页字体 |
| font-size | 常用单位：px(像素) | 字体大小 |
| font-weight | 常用：400与正常相同，700与粗体相同i | 字体粗细 |
| font-style | italic斜体、oblique倾斜、normal默认 | 文字样式 |
5. CSS文本外观
| 属性名 | 属性值 | 说明 |
|---|---|---|
| color | 例如：red、green | 文本颜色 |
| text-align | left、right、center | 文本水平对齐方式 |
| text-decoration-line | underline下划线、overline上划线、none没有线 | 装饰文本 |
| text-decoration-style | solid实线、double双线、dotted虚线、wavy波浪线 | 装饰文本颜色 |
| text-decoration-color | 想要啥颜色就用啥 | 装饰文本颜色 |
| text-indent | 常用单位：em(相对长度单位) | 文本缩进 |
| line-height | 常用单位：px(像素) | 文本行高 |
6. CSS特性与权重
6.1 CSS特性
层叠性、继承性、优先级
6.2 CSS权重
- 简单记忆法：
- 通配符和继承权重为0,
- 标签选择器为1,
- 类(伪类)选择器为 10,
- id选择器 100,
- 行内样式表为 1000,
- !important 无穷大.
7. CSS元素显示转换
- display 属性指定元素的显示行为
| 属性值 | 说明 |
|---|---|
| display: block; | 把 行内元素 转换为 块级元素 |
| display: inline; | 把 块级元素转换为行内元素 |
| display: inline-block | 把元素转换为行内块元素 |
8. 背景background
| 属性 | 属性值 | 说明 |
|---|---|---|
| background-color | 颜色 | 背景颜色 |
| background-image | url(‘图片地址’) | 背景图片 |
| background-repeat | repeat-x水平重复、repeat-y垂直重复、no-repeat不重复 | 背景图片平铺 |
| background-position | x% y%、xpos ypos、left top center bottom right | 背景位置 |
| background-attachment | scroll默认、fixed图片固定、local与元素的内容一起滚动 | 背景图片固定 |
9. 盒子模型
9.1 边框border
| 属性 | 属性值 | 说明 |
|---|---|---|
| border-width | 常用单位：px(像素) | 边框的粗细 |
| border-style | solid实线、dashed虚线、dotted点线 | 边框的样式 |
| border-color | 颜色 | 边框的颜色 |
| border-radius | px或者% | 圆角边框 |
9.2 内边距padding
| 属性 | 属性值 | 说明 |
|---|---|---|
| padding-top | 常用单位：px(像素) | 上内边距 |
| padding-right | 常用单位：px(像素) | 右内边距 |
| padding-bottom | 常用单位：px(像素) | 下内边距 |
| padding-left | 常用单位：px(像素) | 左内边距 |
9.3 外边距margin
| 属性 | 属性值 | 说明 |
|---|---|---|
| margin-top | 常用单位：px(像素) | 上外边距 |
| margin-right | 常用单位：px(像素) | 右外边距 |
| margin-bottom | 常用单位：px(像素) | 下外边距 |
| margin-left | 常用单位：px(像素) | 左外边距 |
10. 阴影
| 属性 | 属性值 | 说明 |
|---|---|---|
| box-shadow | 顺序：水平阴影,垂直阴影,模糊距离,阴影大小,阴影颜色,外层阴影 | 盒子阴影 |
| text-shadow | 顺序：平阴影,垂直阴影,模糊距离,阴影颜色 | 文字阴影 |
11. 浮动
为什么需要浮动？
- 为了更好地布局页面。
- 可以让多个块级元素一行内排列显示
| 属性 | 属性值 | 说明 |
|---|---|---|
| float | left | 元素向左浮动 |
| float | right | 元素向右浮动 |
11.1 浮动特性
- ①脱标：
- 脱离标准普通流的控制（浮）移动到指定位置（动）
- 浮动的盒子不再保留原先的位置
- ②浮动元素一行显示
- ③浮动的元素具有行内块元素特点：
- 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度
11.2 浮动注意点
①如果一个子元素浮动了,尽量其他盒子也浮动,这样保证这些子元素一行显示
②浮动的子标签无法撑开父盒子的高度,则需要清除浮动
11.3 清除浮动
clear语法：
选择器{clear:属性值;}
| 属性 | 说明 |
|---|---|
| left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
| right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
| both | 同时清除左右两侧浮动的影响 |
我们实际工作中， 几乎只用 clear: both;
11.4 清除浮动方式
-
（1）额外标签法
-
在浮动元素末尾添加一个空的标签
例如：<div style="clear:both"></div>- W3C推荐
- 优点： 通俗易懂，书写方便
- 缺点： 添加许多无意义的标签，结构化较差
-
-
（2）父级添加 overflow 属性
overflow:hidden- 优点：代码简洁
- 缺点：无法显示溢出的部分
-
（3）父级添加after伪元素
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 专有 */ *zoom: 1; }- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
- 代表网站： 百度、淘宝网、网易等
-
（4）父级添加双伪元素
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }- 优点：代码更简洁
- 缺点：照顾低版本浏览器
- 代表网站：小米、腾讯等
11.5 总结
1、清除浮动本质是?
清除浮动的本质是清除浮动元素脱离标准流造成的影响
2、清除浮动策略是?
闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子
3、额外标签法?
隔墙法, 就是在最后一个浮动的子元素后面添
4、加一个额外标签, 添加 清除浮动样式.
实际工作可能会遇到,但是不常用
12. 定位position
12.1 为什么使用定位
定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
通俗地讲：定位可以把盒子定位到任何位置。
应用场景：页面固定的广告栏、页面小图标
12.2 定位的组成
定位 = 定位模式 + 边偏移
- 定位模式：用于指定一个元素在文档中的定位方式
- 边偏移：决定了该元素的最终位置
12.2.1 边偏移
- 属性：
- top：顶端偏移量
- bottom：底部偏移量
- left ：左侧偏移量
- right ：右侧偏移量
凡是有定位地方必定有边偏移
12.2.1 定位模式(position)
语法：
选择器 {
position: 属性值;
}
| 值 | 说明 |
|---|---|
static |
静态定位 |
relative |
相对定位 |
absolute |
绝对定位 |
fixed |
固定定位 |
12.3 定位模式介绍
12.3.1 静态定位(static)
语法：
选择器 {
position: static;
}
①静态定位是元素的默认定位,则是无定位.
②布局时几乎不用
12.3.2 相对定位(relative)
语法：
选择器 {
position: relative;
}
①继续占有位置, 没有脱标
②移动位置参照点是自己原来的位置
③给绝对定位当爹的(子绝父相)
12.3.3 绝对定位(absolute)
语法：
选择器 {
position: absolute;
}
①完全脱标(不占位置)
②父元素没有定位, 则以浏览器为准定位
③父元素要有定位(子绝父相)
12.3.3.1 绝对定位的特点：
①如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）
通俗: 如果没有爸爸或者爷爷, 则以天地(网页)为父, 走天下(位移).
②如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
③绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）
12.3.3.2 定位口诀(子绝父相)
①子绝父相：子级是绝对定位的话，父级要用相对定位。
②为什么?
-
绝对定位是需要父亲的, 不然以天地(网页)为父, 有了父亲之后, 可以在父亲的世界到处移动.
-
父盒子需要加定位限制子盒子在父盒子内显示
-
父盒子布局时，需要占有位置，因此父亲只能是相对定位
所以相对定位经常用来作为绝对定位的父级
③ 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位
12.3.4 固定定位(fixed)
语法 ：
选择器 {
position: fixed;
}
①固定定位：是元素固定于浏览器可视区的位置
②主要使用场景：可以在浏览器页面滚动时元素的位置不会改变, 例如: 广告
③固定定位的特点：
- 以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不在占有原先的位置
12.3.5粘性定位(sticky)
语法：
选择器 {
position: sticky;
top: 10px;
}
①以浏览器的可视窗口为参照点移动元素（固定定位特点）
②粘性定位占有原先的位置（相对定位特点）
③必须添加 top 、left、right、bottom 其中一个才有效
12.4 定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static 静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative 相对定位 | 否 (占有位置) | 相对于自身位置移动 | 基本单独使用 |
| absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 要和定位父级元素搭配使用 |
| fixed 固定定位 | 是（不占有位置） | 浏览器可视区 | 单独使用，不需要父级 |
| sticky 粘性定位 | 否 (占有位置) | 浏览器可视区 | 当前阶段少 |
12.5 堆叠顺序（z-index）
语法：
选择器 {
z-index: 1;
}
①定位布局出现盒子重叠的情况，则需要z-index来控制盒子的前后次序。
②数值越大，盒子越靠上
③数字后面不能加单位
CSS小技巧
1.把单行文字垂直居中
height: 40px;
line-height: 40px;
2.背景半透明
background: rgba(0, 0, 0, .3)
3.边框会影响盒子的实际大小
width: 180px;
height: 180px;
bo/* */rder: 10px solid red;
/* 盒子大小为200*200 */
4.内边距会影响盒子实际大小
width: 160px;
height: 160px;
padding: 20px;
/* 盒子大小为200*200 */
5.块级盒子水平居中对齐
margin:auto;
6.行内元素/行内块元素水平居中对齐
margin: 100px auto;
text-align: center;
7.清除内外边距
margin: 0;
padding: 0;
8.行内块中间有缝隙,用浮动解决
float: left;
width: 50px;
height: 50px;
background-color: green;
9.绝对定位的盒子居中
.box {
position: absolute;
/* 1. left 走 50% 父容器宽度的一半 */
left: 50%;
top: 50%;
/* 2. margin 负值 往左边走 自己盒子宽度的一半 */
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: green;
}
<div class="box"></div>
Comments | NOTHING