81 lines
1.6 KiB
Plaintext
81 lines
1.6 KiB
Plaintext
选择器
|
||
|
||
选择器类型 {
|
||
css属性名: css属性值;
|
||
}
|
||
|
||
标签选择器
|
||
|
||
通配符 *
|
||
重置标签的默认样式
|
||
|
||
class选择器
|
||
.名字
|
||
|
||
|
||
id选择器
|
||
#名字
|
||
|
||
一般用在js上
|
||
id="login"
|
||
|
||
|
||
伪类选择器
|
||
|
||
|
||
定位：position
|
||
作用：实现各种复杂布局的
|
||
|
||
1：相对定位 relative
|
||
如果元素被设置了相对定位，
|
||
|
||
那么它会脱离文档流，
|
||
但原本位置不会被删除
|
||
他的定位参考对象是原本的位置(左上角)
|
||
|
||
2：绝对定位 absolute
|
||
|
||
那么它会脱离文档流，
|
||
原本位置被删除了
|
||
他的定位参考对象是原本的位置
|
||
1: 如果该元素的父容器设置了定位，那么参考父容器来定位
|
||
2: 如果该元素的父容器没有设置定位，那么参考浏览器边框定位
|
||
|
||
3：固定定位 fixed
|
||
那么它会脱离文档流，
|
||
原本位置被删除了
|
||
参考浏览器边框定位
|
||
|
||
|
||
4：普通定位（流式定位）
|
||
|
||
|
||
两种方案让元素横着排列：
|
||
|
||
1:
|
||
display: inline-block;
|
||
inline
|
||
block
|
||
|
||
2: float 浮动
|
||
|
||
|
||
盒子模型：
|
||
|
||
margin（外边距） padding（内边距） border（边框） content（内容）
|
||
|
||
padding: 10px;
|
||
padding: 10px 20px;
|
||
padding: 5px 30px 20px;
|
||
padding: 10px 20px 30px 40px;
|
||
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
|
||
真实宽高 = content 宽高 + padding（内边距）+ border（边框）
|
||
|
||
|
||
box-sizing: border-box;
|
||
200x200 = content 宽高 + padding（内边距）+ border（边框） |