155 lines
2.6 KiB
Plaintext
155 lines
2.6 KiB
Plaintext
css 层叠样式表
|
||
|
||
|
||
|
||
写法：
|
||
|
||
1：内部写法 优先级最高
|
||
|
||
写在开始标签上
|
||
|
||
<p style="color:red;"></p>
|
||
|
||
|
||
|
||
2：内链写法
|
||
|
||
<heade>
|
||
...
|
||
<style>
|
||
p {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</heade>
|
||
|
||
3：外链写法
|
||
|
||
|
||
css结构
|
||
|
||
选择器 {
|
||
css属性名: css属性值;
|
||
css属性名: css属性值;
|
||
css属性名: css属性值;
|
||
css属性名: css属性值;
|
||
}
|
||
11111111111111
|
||
|
||
选择器 (暂留坑)
|
||
|
||
标签（标签名）选择器
|
||
|
||
class 类选择器 .类名称
|
||
|
||
* 通配符 选择器 （优先级最低） 用来 清除 标签自带 的样式
|
||
|
||
id 选择器 #id名称
|
||
|
||
伪类选择器 :xxxxxx
|
||
111111111111111
|
||
|
||
css 优先级
|
||
|
||
!important 可以让元素的优先级最高
|
||
|
||
路径：
|
||
|
||
|
||
绝对路径
|
||
C:\Users\bmy\Desktop\front-end-team\每天课程\index.css
|
||
|
||
相对路径
|
||
|
||
C:\Users\bmy\Desktop\front-end-team\每天课程\2022-03-04\index.css
|
||
|
||
/ 根路径 C:\
|
||
|
||
./ 当前路径
|
||
|
||
|
||
../ 上一级
|
||
|
||
|
||
注意事项：
|
||
|
||
1：避免使用公共类名 选中 标签
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
盒子模型
|
||
|
||
外边距 margin
|
||
|
||
内边距 padding
|
||
|
||
边框 border
|
||
|
||
内容 content
|
||
|
||
标准盒子模型：
|
||
|
||
元素的真实宽度 = 你写的 （宽度+左右padding+左右边框） + 高 （上下内边距+上下边框）
|
||
|
||
怪异盒子模型：
|
||
|
||
box-sizing: border-box;
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
常用css 属性：
|
||
|
||
list-style: none; 清除 li 标签的小圆点
|
||
text-decoration: none; 清除 a 标签的下划线
|
||
|
||
display:
|
||
inline 行内标签
|
||
block 块标签
|
||
inline-block 行内块标签
|
||
none 隐藏元素
|
||
|
||
font-size 字体大小
|
||
background 背景色
|
||
outline: none; 清除 input button 外边框
|
||
border-radius 圆角
|
||
|
||
overflow：设置子元素宽高 超过 父元素 宽高后 如何显示
|
||
|
||
scroll 超过部分，以滚动的显示展示
|
||
hidden
|
||
|
||
|
||
居中的一些方式：
|
||
|
||
水平居中：
|
||
|
||
块标签的居中 margin: 0 auto;
|
||
必须在子元素上设置宽度
|
||
|
||
块标签内部行标签(文字) text-align: center;
|
||
|
||
垂直居中：
|
||
|
||
单行文字（行标签 & 文字）在父标签内部垂直居中 line-height: 就是父标签的高度
|
||
|
||
两个行内标签进行相互对其的时候使用的： vertical-align: bottom;
|
||
|
||
|
||
被定位的元素，如何设置垂直水平居中？？？
|
||
|
||
元素设置 50% 距离，然后margin 减去自身宽度或者高度的一半
|
||
|
||
left: 50%;
|
||
margin-left: -8px
|
||
|
||
calc 数学计算函数，可以进行加减乘除运算
|
||
|
||
|