1 选择器
通用选择器：匹配所有元素
*{
}
标签选择器
一般选择
header{
}
递推选择 选择header下的nav
header nav{
}
类选择器
.a{
}
<div class="a"> </div>
ID选择器 唯一
#a{
}
<div id="a"> </div>
2 CSS属性样式
*{ margin: 0; padding: 0;}
边框厚度为0 内部填充为0
header {
display: flex; justify-content: space-between; align-items: center;
}
- 显示方式：弹性盒子布局；
- 主轴（水平轴）元素对齐方式：左边第一元素紧贴左边，右边第一元素紧贴右边，中间间隔均匀；
- 主轴水平：垂直居中 主轴垂直：水平居中 （示例主轴水平）由
flex-direction: column决定主轴方向
自定义属性
data-xxx
弹性盒子的空间比例
flex:1 /*占据剩余空间*/
flex:1;
flex:2;/*按1：2比例占据剩余空间*/
3 字体设置
一种更方便的字体设置
html { font-size: 12px;} /*后续推荐使用rem单位*/
a { font-size: 1.5rem} /*一个rem表示一个12px*/
