盒子模型

​ 浏览器元素由一个个盒子组成，盒子构成包括外边距，内边距，边框，内容组成，这些大小共同组成了盒子的大小。

属性 说明
width 内容宽度
height 内容高度
border 边框大小
padding 内边距
margin 外边距
box-sizing 指定盒子模式
display 设置布局方式

盒子模式：

  1. content-box: 盒子大小=内容区+内边距x2 + 内边距x2
  2. border-box: 盒子大小=内容区大小（内容区实际大小=设置大小 - 边框x2 - 内边距x2）

布局方式：

  1. block：块级元素独占一行
  2. inline：行内元素只占据内容区大小，无法设置高度

定位

​ 在css中使用position属性进行元素定位

选项 说明
static 默认值，不进行定位
fixed 固定定位，将元素固定在浏览器窗口指定位置（回到顶部）
sticky 在浏览器窗口到达指定为位置时变成fixed定位（博客右侧目录）
relative 相对定位，通过设置偏移量进行移动，但位置还在原本地方
absolute 绝对定位，在包含元素内偏移

flex弹性布局

flex-direction 设置主轴方向
row 水平
column 垂直
row-reverse 水平反向
column-reverse 垂直反向
justify-content 对齐方式
flex-start 前对齐
fex-end 后对齐
center 剧中对齐
space-between 项目间隔相等
space-around 项目两侧间隔相等
space-evenly 间隔相等，包含容器边距
align-items 定义在交叉轴的对齐方式
flex-start 交叉轴前对齐
flex-end 交叉轴后对齐
center 居中
baseline 项目首行文字对齐
stretch 拉伸对齐
flex-wrap 换行
wrap 换行
nowrap 不换行
wrap-reverse 反向换行
项目属性 说明
order 项目排序
align-item 为项目设置单独的交叉轴对齐方式
flex(grow,shrink,basis) grow按照剩余空间拉伸元素，shrink 按被挤压空间缩小项目比例，basis默认大小

媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 大于1000时使用
@media(min-width:1000px){
    .box{
        width:25%
    }
}
# 小于601时使用
@media(min-width:601px){
    .box{
        width:50%
    }
}
# 同时满足时使用
@media(min-width:601px) and @media(max-width:999px){
    .box{
        width:25%
    }
}