CSS常见用的布局

display属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素 、

block块级元素： div、p、h1~h6、 header、section、footer 等等。

特点：1.独占一行 2.可以设置宽和高3. 可以容纳行内块元素和其他元素

inline行内元素： span、img、a textarea 、 i 、strong、u（下划线）、button

特点：1.不能独占一行和相邻的行内块元素在一行2.不能设置宽和高

3.默认宽和高就是它本身的宽和高4.只能容纳文本或其他行内元素”

margin:0 auto

那么margin:0 auto；的意思 就是 上下距离是0 左右距离自动 也就是说 是居中的意思

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。

max-width

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况

盒模型

当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素

box-sizing

content-box默认值宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框

box-sizing: border-box; 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

position定位

属性： ：static | relative | absolute | fixed | sticky

默认：static 此时4个定位偏移属性不会被应用

（相对定位） relative ：并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 （）

（绝对定位） absolute ：此时偏移属性参照的是离自身最近的父元位素，如果没有定位的祖先元素，相对于浏览器整个窗口

（固定定位）fixed ，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 （相对于浏览器窗口进行定位 ）

sticky ： 设置了sticky的元素

https://blog.csdn.net/qq_31201781/article/details/90710926

float浮动

会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

left
right

clear控制浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

left right

clearfix hack清除浮动

​ overflow: auto;

百分比宽度

媒体查询 @media

@media 设备类型 and (设备特性) { 样式代码 }

@media screen and (min-width:800px)

min大于

max小于

inlne-block 行内块

优点:将元素设置为行内块元素,既有行内元素可以一行显示多个元素的特性,又有块元素可以设置宽高的特性。

缺点:设置为display:inline-block后,元素与元素之间会多出空格间隙

inline-block 布局

在父级设置 font-size：0px; 解决 空隙

column

columns是CSS中的一个多列属性；columns属性是一个简写属性，用于设置列宽和列数

column-count: 5; 显示几列

column-gap: 10em;列之间的间距

flexbox

http://caibaojian.com/flexbox-guide.html 参考地址

圣杯布局和双飞翼布局

https://www.cnblogs.com/autismtune/p/5202147.html 圣杯布局双飞翼布局简介

https://www.cnblogs.com/woodk/p/5147085.html 源码参考

主要使用：

浮动 float

负边距 negative margin

相对定位 relative position

**圣杯布局：**借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分

圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。

双飞翼布局：给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)。

**缺点是：**多加了一层dom节点

七种实现左侧固定，右侧自适应两栏布局的方法
https://segmentfault.com/a/1190000010698609