126 lines
2.5 KiB
Plaintext
126 lines
2.5 KiB
Plaintext
css：
|
||
|
||
三种写法
|
||
|
||
内联
|
||
|
||
内部
|
||
|
||
外链
|
||
|
||
|
||
|
||
语法：
|
||
|
||
css属性名称: css属性数值;
|
||
|
||
|
||
选择器：
|
||
|
||
class（类） . 选择器 class="test" .test
|
||
id（）选择器 # id="test" #test
|
||
|
||
区别：
|
||
1: id选择器的优先级高于class选择器
|
||
2：id选择器是用来标识唯一性的，一般不会去重复使用
|
||
|
||
|
||
* （通配符）选择器 选中所有的标签，来设置你的样式
|
||
|
||
标签 选择器
|
||
|
||
|
||
选择器类型, 选择器类型, 选择器类型, ..... {
|
||
css属性名称: css属性数值;
|
||
}
|
||
|
||
|
||
伪类选择器
|
||
|
||
|
||
|
||
父 选择器类型 子 选择器类型 : 表示父子嵌套
|
||
|
||
选择器类型, 选择器类型 ：同时选中多个
|
||
|
||
|
||
|
||
../ 表示当前文件夹的上一层
|
||
./ 表示当前文件夹
|
||
/ 表示根路径
|
||
|
||
|
||
css属性记录：
|
||
|
||
!important 提升css属性的优先级
|
||
|
||
|
||
nth-child ():
|
||
使用公式（an+ b）.描述：a代表一个循环的大小，
|
||
N是一个计数器（从0开始），以及b是偏移量。
|
||
|
||
|
||
|
||
盒子模型：
|
||
|
||
外边距 margin
|
||
内边距 padding
|
||
边框 border
|
||
内容 content
|
||
|
||
真实高度的计算规则：
|
||
|
||
真实高度 = 你写的宽高 + 边距 + 边框
|
||
|
||
box-sizing: border-box; 改变盒子模式的计算规则
|
||
|
||
|
||
把块元素放一行：
|
||
|
||
1：display: block;
|
||
block 块
|
||
inline 行
|
||
inline-block 行内块级
|
||
|
||
2：浮动 float
|
||
left
|
||
right
|
||
|
||
问题：元素设置浮动后，将从文档流中脱离，他原本位置被删除，会导致父元素没有高度，
|
||
那么紧接着在父元素后面的内容，就会挤过去。
|
||
|
||
解决：
|
||
clear: both; 加在 父元素后面的内容
|
||
overflow: hidden; 加载 父元素上，自动设置高度
|
||
height 手动设置高度
|
||
|
||
|
||
|
||
line-height: 行高 只针对块标签
|
||
|
||
设置文本段落的垂直行高
|
||
|
||
设置当行文本的垂直居中
|
||
|
||
|
||
居中的各种方式
|
||
|
||
1：一个具有宽度块标签想在另外一个元素内部居中
|
||
margin: 0 auto;
|
||
|
||
2：单行文本的居中line-height，数值应该是你想要居中的父元素的高度
|
||
|
||
3: 被定位的元素如何设置垂直水平居中？
|
||
移动50%，然后 margin 减去自身宽度或者高度的一半
|
||
|
||
top: 50%;
|
||
|
||
|
||
margin-top: calc(-12px / 2);
|
||
选择一个，一般都是下面的
|
||
transform: translateY(-50%);
|
||
|
||
4: 元素内部的文字水平居中，可以使用text-align: center;
|
||
|
||
5: 设置两个行内标签的对齐，选中高的元素 设置 vertical-align
|