前端css布局

CSS盒子模型

盒子组成

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子

margin（外边距）：盒子与外界的距离
border（边框）：盒子的边框
padding（内边距）：紧贴内容的补白区域
content（内容）：元素中的文本或后代元素都是它的内容

图示如下：

外边距margin不会影响盒子的大小，但会影响盒子的位置

盒子类型属性：box-sizing

content-box（默认值）盒子大小：border + padding + content

在CSS中，设置box-sizing为content-box时，height和width属性为content内容区大小

border-box（IE盒子模型）height和width属性设置的就是盒子的总大小（根据padding和border自动内减）

resize属性可以控制是否允许用户调节元素尺寸。常见值有：none、both、horizontal、vertical

盒子四大区域

content内容

CSS属性名	功能	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域的最大宽度	长度
min-width	设置内容区域的最小宽度	长度
height	设置内容区域的高度	长度
max-height	设置内容区域的最大高度	长度
min-height	设置内容区域的最小高度	长度

border边框

border：border-width border-style border-color（无固定顺序）
border-style值：none、solid（实线）、dashed（虚线）、dotted（点线）

border连写很多：border-left-style、border-left-width、border-left-color

css

/*上边框*/
border-top:solid 1px red;
/*下边框*/
border-bottom:solid 1px red;
/*左边框*/
border-left:solid 1px red;
/*右边框*/
border-right:solid 1px red;

padding内边距

padding的值不能为负数，行内元素padding垂直方向会有问题，不建议这么做

css

/*上 右 下 左*/
padding:10px;
/*上下  左右*/
padding:20px 30px;
/*上  左右  下*/
padding:20px 30px 40px;
/*上 右 下 左*/
padding:20px 30px 40px 50px;
/*单方向设置*/
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;

margin外边距

marigin用于盒子的移动（可以为负数）参考父元素的content计算

水平居中：margin：0 auto；
给行内元素设置上下margin无效
上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素的位置

css

/*上 右 下 左*/
margin:10px;
/*上下  左右*/
margin:20px 30px;
/*上  左右  下*/
margin:20px 30px 40px;
/*上 右 下 左*/
margin:20px 30px 40px 50px;
/*单方向设置*/
margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;

margin塌陷：

互相嵌套的块级元素，第一个元素上margin作用在父元素上，最后一个元素下margin作用在父元素上
解决办法：
- 给父元素设置padding-top或border-top
- 给父元素设置overflow: hidden;
- 把子元素转换为行内块 display: inline-block;
- 浮动、绝对定位、相对定位的盒子不会有嵌套块级元素外边距塌陷现象

margin合并：

垂直布局的块级元素上下 margin会合并，最终合并为margin的最大值
解决办法：上下兄弟，只用设置一个外边距即可

布局技巧

行内元素、行内块元素可以被父元素当做文本处理
子元素水平居中：
- 块级元素：margin：0 auto；
- 行内块、行内元素：text-align: center;
子元素垂直居中：
- 块元素：margin-top: (content - 子元素总高)/2
- 行内、行内块：height = line-height&&vertical-align:middle
  （绝对垂直居中：font-size：0）

隐藏元素常见方式

display: none;

真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，这个元素的任何子元素也会同时被隐藏。display: none;会触发浏览器的重绘与回流

这种方式产生的效果就像元素完全不存在，但在DOM中依然可以访问到这个元素，也可以通过DOM来操作它

opacity: 0;

只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用。此外还能响应用户交互，如响应用户点击事件

visibility: hidden;

元素会隐藏，也会占据着自己的位置，并对网页的布局起作用。与opacity不同的是它不会响应任何用户交互，元素在读屏软件中也会被隐藏

如果对于子元素的visibility被设置为visible而父元素的visibility设置为hidden，子元素依旧可以显示而父元素会被隐藏

overflow: hidden; + postion

使用position与overflow属性的意义就是把元素脱离文档流移出视觉区域，超出屏幕显示的部分隐藏掉

overflow: hidden; + height: 0 !important;

使用height: 0;将元素高度设置为0，使用overflow: hidden将超出部分裁剪隐藏，即可实现隐藏效果

CSS常见问题拓展

margin-left: auto;为什么可以使元素靠右？
The following constraints must hold among the used values of the other properties:
margin-left + border-left-width + padding-left+ width + padding-right +border-right-width + margin-right = width of containing block
你的属于其中一种情况：
If there is exactly one value specified as auto, its used value follows from the equality.

也就是在上述等式中，只有你设置的margin-left: auto，那么margin-left将会被设置为满足上述等式，而等式的右边是容器盒子宽度，等式中的其它值(除过width)都为0，因此margin-left = width of containing block - width(div)

margin：0 auto;为什么可以使元素居中？
If both margin-left and margin-rightare auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

当 margin-left 和 margin-right 都为 auto 时，两者就会一样，从而使元素居中

CSS浮动

随着flex、grid等布局的兼容性越来越好，float几乎已经不用了，了解即可

浮动语法：

css

选择器 {
    float:none/left/right;
}

浮动特性

文档流：指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列

文本流：指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列

浮动元素会脱离文档流但不会脱离文本流，当浮动时其不会影响周围的盒子模型，但是文字会环绕在浮动元素周围。可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层

重要特性：

不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高，顶部对其
浮动元素具有行内块的特性（设置宽高、不独占一行），但不会被当成文本处理，并且没有行内块的空白问题
浮动元素不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding
浮动的元素比标准流高半个级别，可以覆盖标准流的元素
浮动的元素会受到上面元素边界的影响，且遵循同方向浮动原则：下一个浮动元素会在上一个浮动元素后面左右浮动
浮动只会影响后面的标准流，不会影响前面的标准流

使用浮动注意点：

浮动元素经常搭配标准流父级，先用标准流父级元素排列上下位置，之后内部子元素采取浮动排列左右位置
子浮父不浮、兄弟一起浮（一浮全浮 ）

浮动影响

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

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

清除浮动

清除浮动的原因：父级元素没有高度、子盒子浮动、影响后续布局

清除浮动，父级会根据浮动子盒子自动检测高度、如果父级元素本身有高度，则不需要清除浮动

语法：

css

选择器 {
    clear：left/right/both；
}

清除浮动方法：

给父元素指定高度
使用额外标签

html

<div class="parent">
  <div class="float-left">浮动元素1</div>
  <div class="float-left">浮动元素2</div>
  <div style="clear:both"></div>
</div>

父级添加overflow属性，设置属性为hidden、auto、scroll，本质上是开启元素BFC
父级添加after伪元素：

css

.clearfix::after {
    content:'';
    display:block;
    clear:both;
    /*后两项针对老浏览器*/
    height:0;
    visibility:hidden
}

父级添加双伪元素:

css

.clearfix::after,.clearfix::before {
    content:'';
    display:table;
}
.clearfix::after{
	clear:both;
}
/*双伪元素，其中before的主要作用是解决外边距塌陷问题，本质上after就已经够了*/

CSS定位

定位组成

定位：摆放盒子，按照定位的方式移动盒子。定位 = 定位模式 + 边偏移
定位元素：设置**（绝对定位、固定定位）**后，不管之前是什么元素，一律为定位元素。定位元素默认宽、高都被内容所撑开，且能自由设置宽高

定位模式：static(静态定位)、relative、absolute、fixed、sticky

边偏移：top、bottom、left、right

五大定位方式

静态定位

static属性是HTML元素的默认值，即没有定位，遵循正常的文档流对象，对于top、bottom、left、right、z-index属性的设置都被忽略

相对定位

相对定位position: relative，元素的位置是相对其原本位置进行偏移，其不脱离文档流

设置偏移属性后会移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块

绝大多数情况下，相对定位，会与绝对定位配合使用（子绝父相）

绝对定位

绝对定位position: absolute，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。绝对定位完全脱离文档流与文本流，不占据文档空间

在网页定位中，绝对定位通常有两种用法：

子绝父相：子元素绝对定位，父元素相对定位，让子元素相对于父元素进行移动。父元素是相对定位，对网页的布局影响比较小
子绝父绝：遵循子绝父相的时，发现父元素有绝对定位，此时父元素里面的孩子直接子绝也可

固定定位

固定定位position: fixed，元素的位置相对于浏览器窗口，为固定位置，即使是窗口滚动元素也不会移动。固定定位完全脱离文档流与文本流，不占据文档空间

在<iframe>中的元素使用fixed是相对于<iframe>进行定位的，<iframe>类似于在页面中创建了一个新的浏览器窗口

黏性定位

粘性定位position: sticky，元素的位置基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在position: relative与position: fixed定位之间切换

在页面显示时sticky的表现类似于position: relative
当页面滚动超出目标区域时，sticky的表现类似于position: fixed，它会固定在目标位置

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是top、right、bottom、left其中之一，必须通过指定top、right、bottom、left四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同

定位总结

定位模式	是否脱离标准流	移动位置
static 静态定位	否（占有位置）	不能使用边偏移
relative 相对定位	否（占有位置）	相对于自身位置移动
absolute 绝对定位	是（不占有位置）	带有定位的父级
fixed 固定定位	是（不占有位置）	浏览器可视区
sticky 粘性定位	否（占有位置）	浏览器可视区

定位层级

z-index，用于元素设置显示层级
数值可以为：正数、负数、0、auto。数字越大盒子越靠上（默认为auto）

css

选择器 {
	z-index:1;
}

不同布局方式元素的层级关系：标准流 < 浮动 < 定位
定位元素之间的层级关系相同（相对定位、绝对定位、固定定位）

示例代码：

html

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  div {
    width: 300px;
    height: 300px;
  }

  .red {
    /* 相对定位 */
    position: relative;
    left: 0;
    top: 0;
    z-index: 2;
    background-color: red;
  }

  .blue {
    /* 绝对定位 */
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 1;
    background-color: blue;

  }

  .green {
    /* 固定定位 */
    position: fixed;
    left: 200px;
    top: 200px;
    z-index: 9999;
    background-color: green;
  }
</style>
<body>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="red"></div>
</body>

前端css布局 ​

CSS盒子模型 ​

盒子组成 ​

盒子四大区域 ​

content内容 ​

border边框 ​

padding内边距 ​

margin外边距 ​

布局技巧 ​

隐藏元素常见方式 ​

CSS常见问题拓展 ​

CSS浮动 ​

浮动特性 ​

浮动影响 ​

清除浮动 ​

CSS定位 ​

定位组成 ​

五大定位方式 ​

静态定位 ​

相对定位 ​

绝对定位 ​

固定定位 ​

黏性定位 ​

定位总结 ​

定位层级 ​

前端css布局

CSS盒子模型

盒子组成

盒子四大区域

content内容

border边框

padding内边距

margin外边距

布局技巧

隐藏元素常见方式

CSS常见问题拓展

CSS浮动

浮动特性

浮动影响

清除浮动

CSS定位

定位组成

五大定位方式

静态定位

相对定位

绝对定位

固定定位

黏性定位

定位总结

定位层级