CSS 布局

清除默认样式

* {
    margin: 0;
    padding: 0;
}

// 左浮动
.leftfix {
    float: left;
}

// 右浮动
.rightfix {
    float: right;
}

// 清除浮动影响
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

[toc]

盒子模型

• 外边距 margin：盒子与外界距离
• 边框 border：盒子边框_{压在 content 上}
• 内边距 padding：内容和外框距离
• 内容 content：元素中的文本与后代

盒子相关属性均不能继承

盒子组成

内容 content

属性名	含义
width	内容区宽度 默认 = 父属性content - margin - border - padding
max-width	内容区最大宽度
min-width	内容区最小宽度
height	内容区高度
max-height	内容区最大高度
min-height	内容区最小高度

内边距 padding

属性	含义	值
padding-top	上内边距	长度
padding-right	右内边距	长度
padding-bottom	下内边距	长度
padding-left	左内边距	长度
padding	边距	· padding: 值一px;：四个方向边距都是值一 · padding: 值一px 值二px;：上下，左右 · padding: 值一px 值二px 值三px;：上，左右，下 · padding: 值一px 值二px 值三px 值四px;：上，右，下，左

• 行内元素左右内边距没问题，上下内边距不能完美设置

边框 border

属性名	含义	值
border-width	边框宽度	长度值
border-color	边框颜色	颜色值
border-style	边框样式	· none：默认值 · solid：实线 · dashed：虚线 · dotted：点线 · double：双实线
border-radius	圆角	长度值
outline	外轮廓	复合值
border	边框	复合值

外边距 margin

属性	内容
margin-left	上外边距
margin-right	右外边距
margin-top	左外边距
margin-bottom	下外边距
margin	外边距

• 子元素 margin 参考父元素 content 计算

• 上左 margin 影响自己位置

• 下右 margin 影响后面兄弟元素位置

• margin 值为 auto 为居中

• margin 塌陷：首个子元素的上外边距会应用在父元素；首个子元素下外边距会应用在父元素

  解决方案：给父元素设置 css：overflow: hidden

• margin 合并：上面兄弟元素的下外边距和下面兄弟上外边距合并，取最大值

盒子布局

盒子大小

每次想要知道盒子总大小都要计算：盒子大小 = content + padding + border

这里 width 和 height 是内容区的大小而非整个盒子，思维上比较反人类，可以使用怪异盒模型

box-sizing: 值;

值	含义
content-box	默认，width 和 height 是内容区的大小
border-box	width 和 height 是盒子的大小

这样设置整个盒子大小后，如果还设置了边框和内边距，内容部分会自动压缩

内容溢出

溢出就是内容里的要素太多啦，超出了 content 框架

属性	内容	值
overflow	处理溢出内容方式	· visible：显示，默认 · hidden：隐藏 · scroll：显示滚动条，不论内容是否溢出 · auto：自动显示滚动条，内容溢出不溢出
overflow-x	横向处理溢出内容方式	同上
overflow-y	纵向处理溢出内容方式	同上

多列布局

语法	含义
column-count: 数字;	列数
column-width: 长度;	列宽
columns: 列数 列宽;	列宽列数
column-gap: 长度;	列边距
column-rule-style: 风格;	列边框风格
column-rule-width: 长度;	列边框宽度
column-rule-color: 颜色;	列边框颜色
column-rule: 复合值	列边框风格、宽度、颜色
column-span: 值;	是否跨列，值可为 none、all

元素隐藏

属性	内容	值
visibility	隐藏但占位	· show：默认显示 · hidden：隐藏
display	隐藏且不占位	· none：隐藏

子元素在父元素居中

1. 行内块元素、行内元素可以被父元素当文本处理_{可以用 text-align、line-height、text-indent 等文本属性}
2. 子元素在父元素水平居中

• 若子元素为块元素，父元素加上：margin:0 auto
• 若子元素为行内元素、行内块元素，给父元素加上：text-aligin:center

3. 子元素在父元素垂直居中

• 若子元素为块元素，子元素加上：margin-top: 值;，值为 (父元素 content - 子元素盒子总高度) / 2
• 若子元素为行内元素、行内块元素，给父元素的：height=line-heigh;、 font-size=0;，每个子元素加上：vertical-align:middle;

元素之间空白间隔

空白类型	产生原因	解决方案
元素之间空白间隔	行内元素与行内块元素彼此之间换行会被解析为空白字符	给父元素设置 font-size: 0;，再给要显示文字元素单独设置
行内块幽灵空白	行内块元素与文本基线对齐，但是基线和底部有距离	· 给行内块设置 vertical，值不是 baseline 就好 · 若父元素只有图片，更改图片显示模式 display:block但如果有文字，会被挤下去 · 父元素设置 font-size:0还有其他文字，需要单独设置文字大小

盒子效果

盒子阴影

虽然是很土的效果，但鼠标悬浮突出来的感觉经常使用

box-shadow: h-shadow v-shadow blur spread color inset;

值	含义
h-shadow	阴影水平位置
v-shadow	阴影垂直位置
blur	可选，模糊距离
spread	可选，模糊外延
color	可选，阴影颜色
inset	可选，内部阴影

浮动

原本是做文字环绕图片的工作

浮动特点

• 脱离文档流
• 浮动后均可设置宽高
• 不会独占一行
• 不会 margin 合并和 margin 塌陷
• 不会被当作文本处理

浮动影响

• 对兄弟元素影响：后面兄弟元素会占据浮动元素之前的位置，在浮动元素下面

• 对父元素影响：不能撑起父元素高度，导致父元素高度塌陷；父元素宽度依然束缚浮动元素

• 解决方案：给浮动元素父元素设置伪元素；兄弟元素要么浮动要么都不浮动

  .选择器:affter {
      content: "";
      display: block;
      clear: both;
  }

定位

可以通过 z-index 调整定位层级

相对定位

以原定位置为参考点移动

position: relative;  /* 开启相对位置 */
left: 值px;
right: 值px;
top: 值px;
bottom: 值px;

• left 和 right 不能一起设置
• top 和 bottom 不能一起设置

只是视觉位置变化，不会挤压其他元素，但会盖在其他元素身上

如果都进行相对定位，后面盖前面的s

绝对定位

递归查询父元素直到查询到设置定位的元素，以该元素为参考点定位

position: absolute;

绝对定位和浮动不能同时设置，否则浮动失效

固定定位

一直会固定在那儿，不管怎么滑动

position: fixed;

固定定位和浮动不能同时设置，否则浮动失效

粘性定位

在元素到达某个位置时候固定，以递归查询具有“滚动”机制的祖先为准

position: sticky;

定位元素位置

定位元素充满包含块

• 宽与包含块一致：

  left: 0;
  right: 0;

• 高与包含块一致：

  top: 0;
  bottom: 0;

定位元素在包含块居中

left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 值px;
width: 值px;

伸缩盒 flex 布局

适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

在移动端用的多_{毕竟移动端不好用传统的盒子模型}

开启伸缩容器只需要开启 flex 元素即可

display: flex;

伸缩容器的子元素会成为伸缩项目，但孙代之后不会

所有伸缩项目都会块状

主轴 & 侧轴

伸缩盒就像个弹簧，盒子里的元素跟弹簧一样拉伸压缩。那弹簧具体是怎么个摆放，这就是主轴 & 侧轴

• 主轴：伸缩项目沿着主轴排列，默认水平从左到右
• 侧轴：与主轴垂直的方向

主轴确定了方向，还要确定塞满了怎么办

语法	值	图示
flex-direction: 值;	· row：默认，水平从左到右 · row-reverse：水平从右到左 · column：垂直从上到下 · column-reverse：垂直从下到上
flex-wrap: 值;	· nowrap：默认值，不换行，压缩伸缩盒宽度 · wrap：自动换行，不压缩盒宽 · wrap-reverse：反向换行
flex-flow: flex-direction flex-wrap;

主轴对齐方式

伸缩确定方向，也要确定伸缩元素之间怎么对齐

含义	语法	值	图示
主轴对齐	justify-content: 值;	· flex-start：默认，主轴起点对齐 · flex-end：主轴终点对齐 · center：居中对齐 · space-between：均匀分布，两端对齐 · space-around：均匀分布，两端距离是中间距离一半 · space-evenly：均匀分布，两端距离和中间距离一致
副轴单行对齐	align-items: 值;	· flex-start：默认，主轴起点对齐 · flex-end：主轴终点对齐 · center：居中对齐 · baseline：与第一行文字基线对齐 · stretch：若伸缩项目未设置高度，占满整个容器高
副轴多行对齐	align-content: 值;	· flex-start：默认，主轴起点对齐 · flex-end：主轴终点对齐 · center：居中对齐 · space-between：均匀分布，两端对齐 · space-around：均匀分布，两端距离是中间距离一半 · space-evenly：均匀分布，两端距离和中间距离一致 · stretch：占满整个侧轴

伸缩

伸缩

语法	含义
flex-basis: 长度;	主轴基准长度，会让原本宽或高失效 浏览器根据该值判断主轴是否有多余空间
flex-grow: 数字;	根据主轴剩余空间放大比例，根据各伸缩元素的值按比例缩放
flex-shrink：数字;	空间不足且设置不换行，根据各比例缩放
flex: 值;	复合 flex-grow、flex-shrink、flex-basis，默认 0 1 auto
order: 数值;	按照数值排序

· flex: 1 1 auto 可简写为 flex: auto
· flex: 1 1 0 可简写为 flex: 1
· flex: 0 0 auto 可简写为 flex: none
· flex: 0 1 auto 可简写为 flex: 0 auto

响应式布局

CSS3 针对不同媒体类型可以定制不同的样式规则

可以直接根据媒体类型设计

@media 媒体 {
    /* CSS 样式 */
}

语法	媒体类型
@media print {}	打印机
@media screen{}	屏幕

除了直接指定媒体类型，还可以根据屏幕宽度确定

@media (属性: 值) {
    /* CSS 样式 */
}

值	含义
width	检测视口宽度
max-width	检测视口最大宽度
min-width	检测视口最小宽度
height	检测视口高度
max-height	检测视口最大高度
min-height	检测视口最小高度
device-width	检测视口设备屏幕宽度
max-device-width	检测视口设备屏幕最大宽度
min-device-width	检测视口设备屏幕最小宽度
orientation	检测视口是否横屏 · portrait：纵向窗口 · landscape：横向窗口