css

CSS3

通配符选择器或者继承样式为0   * ns|* * |*
标签选择器权重为1    elementname
类选择器权重为10    .name
id选择器权重为100   #name
内连选择器选中为1000 
!important为无穷大

内容区
内边距  padding
边框    border
外边距  margin  不会影响盒子大小

flex 布局

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

flexible box 弹性布局 任何容器都可以

/* 通过给父盒子添加flex属性 来控制子盒子的位置和排列方式 */
div {
    /* 响应式布局 */
    display:flex; 
    width: 80%;
    height: 300px;
    background-color: pink;
    /* 父级设置 平均分配 */
    justify-content: space-around;  
}
div span {
    /* width: 150px; */
    height: 100px;
    background-color: pink;
    margin-right: 5px;
    /* 子级设置 平均分配 */
    flex: 1;
}

flex布局父项属性

{
/* 设置主轴的方向; 默认是X轴*/
flex-direction: {
    row: 默认从左到右
    row-reverse: 从右到左
    column: 从上到下
    column-reverse: 从下到上
}
/* 设置主轴上的子元素排列方式; */
justify-content: {
    flex-start: 默认值 从头部开始
    flex-end: 从尾部开始
    center: 在主轴居中对齐
    space-around: 平分剩余空间
    space-between: 先两边贴边 在平分剩余空间(重要)
}
/* 设置子元素是否换行; 默认不换行*/
flex-wrap: {
    nowrap: 不换行
    wrap: 换行
}
/* 设置侧轴上的子元素的排列方式(多行); */
align-content: {
    flex-start: 默认值 在侧轴的头部开始排列
    flex-end: 在侧轴的尾部开始排列
    center: 在侧轴中间显示 
    space-around: 子项在侧轴平分剩余空间
    space-between: 子项在侧轴先分布在两头 在平分剩余空间(重要)
    stretch: 设置子项元素高度平分父元素高度
}
/* 设置侧轴上的子元素排列方式(单行); */
align-items: {
    flex-start: 默认值 从上到下
    flex-end: 从下到上
    center: 挤在一起居中(垂直居中) 
    stretch: 拉伸
}
/* 符合属性 相当于同时设置了 flex-direction 和 flex-wrap; */
flex-flow: {
    row wrap
    column wrap
}
}

flex布局子项属性

{
flex: 子项目占的份数;
align-self: 控制子项自己在侧轴的排列方式;
order: 属性定义子项的排列顺序(前后顺序);
}