CSS 笔记 1
1. CSS 优先级, 内部大于外部。
2. 几个属性:
flex-grow: 1;
让 当前元素 在剩余空间中, 占据尽可能多的高度,确保它能在中间居中。
max-height: 300px;
限制最大高度 300 像素, flex-grow: 1; 导致占的太满了,
同理, 高度,宽度,都可以设置为 最大,最小
width: 100vw; 铺满整个浏览器窗口的宽度
width: 100% ; 占据父元素的 100%
padding: 20px 0; 上下填充 20px,左右填充为0
justify-content, 这个很有用!!! 控制子元素的布局。
justify-content: center; 居中。
justify-content: space-between; 均匀分布
3. CSS 笔记
- justify 表示对齐
- em
h1 {font-size:2.5em;}
2.5em, 把默认字体大小,调整为 2.5倍。
em 的好处是, 响应式的布局 - 盒子模型:
- Margin(外边距) - 外部。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 内部。
- Content(内容) - 自身。
- 把一个元素设置为水平居中,
margin: auto;
4. 选择器
- 后代选择器
div h3 {background-color:yellow; }
表示 div 里面,全部的 h3 - p:before {content:"Read this: ";}
是一个选择器
向选定的元素前插入内容。
js 动态加载的内容,经常使用这个。 - 伪类, 冒号, h1::before
h1::before {xx: yy}
p:before {xx: yy}
1个冒号,是老版本,也能用。
2个冒号,新版本, 推荐使用