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 笔记

1. justify 表示对齐
2. em

   h1 {font-size:2.5em;}
   2.5em， 把默认字体大小，调整为 2.5倍。
   em 的好处是， 响应式的布局

3. 盒子模型:
   • Margin(外边距) - 外部。
   • Border(边框) - 围绕在内边距和内容外的边框。
   • Padding(内边距) - 内部。
   • Content(内容) - 自身。
4. 把一个元素设置为水平居中，

   margin: auto;

4. 选择器

1. 后代选择器

   div h3 {background-color:yellow; }
   表示 div 里面，全部的 h3

2. p:before {content:"Read this: ";}

   是一个选择器
   向选定的元素前插入内容。
   js 动态加载的内容，经常使用这个。

3. 伪类， 冒号, h1::before

   h1::before {xx: yy}
   p:before {xx: yy}
   1个冒号，是老版本，也能用。
   2个冒号，新版本， 推荐使用