101 lines
2.2 KiB
Plaintext
101 lines
2.2 KiB
Plaintext
css 做样式（层叠样式表）
|
||
|
||
三种写法
|
||
|
||
1：内联写法 优先级最高
|
||
2: 内部写法 优先级其次
|
||
3：外链写法 优先级最低
|
||
|
||
!important 改变优先级
|
||
|
||
|
||
选择器
|
||
|
||
class选择器 class="名称" .名称
|
||
|
||
id选择器 id="名称" #名称 （淘汰了）
|
||
|
||
区别：class可以重复使用，id选择器不建议重复使用
|
||
|
||
|
||
* 通配符选择器 全部选中所有标签的意思
|
||
一般用于清除默认样式的（但是不用了）
|
||
|
||
伪类选择器
|
||
|
||
标签选择器 标签名
|
||
|
||
选择器 {
|
||
css的属性名称: css的属性值;
|
||
}
|
||
|
||
|
||
路径写法：
|
||
|
||
./ 相对路径 当前路径
|
||
|
||
../ 相对路径 上一层路径
|
||
|
||
/ 根路径
|
||
|
||
|
||
绝对路径 C:\Users\bmy\Desktop\韩一伟\每天课程\2021-06-18
|
||
|
||
|
||
css 盒子模型
|
||
|
||
外边距 margin
|
||
内边距 padding
|
||
边框 border
|
||
|
||
写法
|
||
|
||
内容 content
|
||
|
||
css 盒子模型 宽高计算规则：
|
||
|
||
真实的宽高 == 你写的宽度 + （左右内边距 + 左右边框） x 你写的高度 + （左右内边距 + 左右边框）
|
||
|
||
box-sizing: border-box; 打破盒子模型的默认计算规则
|
||
|
||
|
||
|
||
css 浮动
|
||
|
||
让元素排在一行：
|
||
display: inline-block;
|
||
inline 转化为行内
|
||
block 转化为块级
|
||
inline-block 行内块级
|
||
|
||
float 浮动
|
||
|
||
子元素浮动后，父容器将没有高度，邻近的元素将会挤过去
|
||
解决：
|
||
1：手动加高度
|
||
2：overflow: hidden;
|
||
3：放在父元素后面的一个元素上 clear: both 清除浮动
|
||
|
||
flex 弹性盒子 留坑 （移动端的时候说）
|
||
|
||
|
||
|
||
css 定位 position
|
||
|
||
1: 相对定位 relative
|
||
|
||
元素设置相对定位后，脱离文档流，但是原本位置还在
|
||
定位参考对象 就是初始位置的左上角
|
||
|
||
2：绝对定位 absolute
|
||
元素设置绝对定位后，脱离文档流，但是原本位置被删除了
|
||
定位参考对象：
|
||
1：父元素如果设置了定位(只要有)，那么相对父元素来
|
||
2：父元素如果没设置了定位(只要有)，那么参考浏览器来
|
||
|
||
3：固定定位 fixed
|
||
元素设置固定定位后，脱离文档流，但是原本位置被删除了
|
||
定位参考对象：
|
||
就是浏览器
|
||
|
||
三个都类似浮动，会飘起来 |