1、常⽤的⻓度单位
px：逻辑像素（pc端默认1：1显⽰）
em：相对于当前字体⼤⼩进⾏计算
%：相对于⽗元素⼤⼩进⾏计算
2、颜⾊单位
RGB
RGBA：A表⽰透明度,值在0~1之间
16进制： #R(值)G（值）B（值）
颜⾊单词
3、字体样式
4、⽂本样式
5、伪类样式
顺序
link > visited > hover > active
6、层次选择器
子元素选择器：
父元素 > 子元素
后代选择器 祖先元素
后代元素 后一个兄弟选择器：选择器 + 选择器
后所有兄弟选择器：选择器 ~ 选择器
7、伪类选择器
伪类：元素的一种特殊状态，浏览器中没有dom对象与之对 应
：link：链接未访问状态
：visited:链接访问过的状态
：hover： 鼠标悬浮状态
：active：元素激活状态
：focus：获取光标状态
8、伪元素选择器
::first-letter:第一个字符
::first-line:首行
:before：当前元素的“内容”之前
:after：当前元素“内容”之后
9、属性选择器
[属性名]：含有指定属性名的元素
[属性名=“值”]：含有指定属性值的元素
[属性名^="值"]:属性值以指定内容开头的元素
[属性名$="值"]:属性值以指定内容结尾的元素
[属性名*=“值”]:属性值包含指定内容的元素
10、结构伪类选择器
:first-child: 选取第一个子元素
:last-child：最后一个子元素
:nth-child：选择指定位置的子元素
特征：先位置，再类型
:first-of-type:选取第一子元素
:last-of-type:选取最后一个子元素
:nth-of-type()：选择指定位置的子元素
特征：先类型，再位置
11、理解样式继承
1、子元素会继承父元素样式
2、样式一般都有继承性，某些样式不能被继承：例如：背 景，边框，定位
12、、选择器的优先级和权重定义：
不同选择器，选中同一个元素，并设置同一个样式， 且值不同，这样就产生了样式冲突，如何显示则取决于样式 的优先级，即权重 ！
imporment
内联：1000
id：100
类和伪类：10
元素：1
通配符：0
继承：没有优先级
交集选择器：权重累加
权重累加不会超过当前层级
并集选择器，各个选择器单独计算，不进行累加
权重相同最后设置的样式起作用
13、盒⼦模型、盒⼦模型的重要属性、属性4个值设置的不同⽅式
定义：任何元素都可以理解为四边形的盒子，即元素的盒子 模型
盒子模型的构成(属性)：
内容:(content)
内边距(padding)
边框 （border）
外边距(margin)
值：
一个值：四个值相同
两个值：上下 左右
三个值： 上 左右 下
四个值： 上 右 下 左
14、浮动元素的属性和值
float：
- none：默认值，元素在文档流中
- left：元素脱离文档流，向左浮动
- right：元素脱离文档流，向右浮动
15、浮动元素的特性
- 浮动特性：
1、设置元素的float属性值为非 float，则元素会脱离文档流
2、当元素脱离文档流，紧跟着下 面的兄弟元素会自动上移
3、块元素浮动后，默认宽度消失 （占整行），宽/高为手动设置值
4、行内元素浮动后，设置的宽高 就会起作用
5、浮动的元素不会覆盖文本，文 本会呈现环绕效果
6、元素浮动后，会向左上或右上 移动，直到遇到父元素或其他浮动元素的边框，停靠在该位 置（水平布局）
7、如果浮动上面有未浮动的块元 素，则浮动元素不会超过块元素
8、如果浮动元素一行放置不下， 会自动换行。
9、浮动元素不会超过它上面的兄 弟元素，最多并排
16、⾼度塌陷场景
在子父元素中，子元素设置浮动后，父元素的高度不能被子 元素撑开，出现高度塌陷
解决办法
| .outer { border: 1px solid red; overflow: hidden; } .inner { width: 200px; height: 200px; background-color: #bfc; float: left; } </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html> |
17、解决外边距传递
| .box { width: 200px; height: 200px; background-color: red; overflow：hidden； } .box2 { width: 200px; height: 200px; background-color: #bfc;
margin-top: 100px; } </head> <body> <div clabox"> <div class="box2"></div> </div> </body> </html>
|
17、解决外边距重叠
| .box { width: 200px; height: 200px; background-color: red; margin-bottom: 100px; } .box2{ width: 200px; height: 200px; background-color: #bfc; margin-top: 100px; } .outer { /* 开启BFC */ /* overflow: hidden; */ display: table; } </style> </head> <body> <div class="outer"> <div class="box"></div> </div>
<div class="box2"></div> </body> </html> |
扫一扫
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
