文档流状态：在文档流，脱离文档流
块元素：
<div class="box1">我爱吃</div>
<div class="box2">鱼香茄子</div>
.box1{
width: 100px;
background-color: royalblue;
}
.box2{
width: 100px;
background-color: yellowgreen;
}
行内元素
将页面中的所有元素都设置城一个矩形的盒子
组成：
3个像素,可以用来指定四个方向的边框的宽度前三个决定盒子大小，外边距决定位置
关于border-width的参数个数的意思：
border-xxx-width ：指定设置方向的边框
border-top-width:20px
border-left-width:20px
border-color：指定边框的颜色，同时也可以分别指定不同方向的颜色，规则和border-width一样，不指定，默认是是使用的color前景色的指定值
四个参数和border-width一致
参数可以调换顺序
border: 10px red solid;
当参数是none的时候，就啥也设置
padding：内容区和边框之间的内边距
四个方向
内边距的设置会影响到盒子的大小，背景颜色会衍生到内边距上
盒子的可见框大小，由内容区，内边距和边框共同决定
padding 内边距四个参数的时候以是顺时针方向和border-width规则一样
margin
盒子可见框：就是盒子能看见的全部部分
四个方向
如果有负值，那么就是相反的方向移动
横向布局，元素在父元素的水平方向的位置由下面的几个元素决定
一个元素在父元素 中，水平布局必须要加上以上所有的左右边距
也就说，上面所有对左右布局的操作，加起来的像素都要和父元素的总宽度相等
auto，浏览器会自动调整margin-right的值来满足等式只有width和margin-right和margin-left能设置auto属性
margin-right了，而是自动调试设置了auto的属性width 默认就是auto
overflow：可以解决
overflow可选值：
overflow-x:单独处理水平
overflow-y：单独处理垂直
相邻的垂直方向外边距会重叠
display：用来设置元素显示的类型
可选值：
visibility：设置元素的显示状态
为了提高响应速度，以及降低服务器的压力，建议，在大量使用显示\隐藏的时候，使用visibility，
*{
margin: 0;
padding: 0;
}
盒子的可见框大小由内容区，内编辑和边框相加
box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用）也就是用来提升设置宽高的“作用域”
box-sizing: content-box;
可选值：
基本操作和border一摸一样，参数也是一样的
轮廓和边框不同点：轮廓不会影响到可见框的大小，也就说，不会影响到布局
outline: 10px grey solid;
阴影：也是不会影响布局的。
box-shadow: 10px 10px 50px honeydew;
border-radius: 用来设置圆角，用来设置的圆的半径大小
如果两个参数，那么也是xy方向的半径
border-radius:直接四个参数，也是顺势针
50%则是圆形
float：浮动
通过浮动可以让一个元素的左侧和右侧移动，使用float属性来设置元素的浮动
浮动会脱离文档流
可选参数：
元素设置浮动后，水平布局的等式不需要强制成行内元素
特点：
其他特点
浮动不会盖住文字，文字会自动环绕在浮动的图片的周围
脱离文档流的特点：
在使用浮动的时候，主要是高度塌陷问题，在块级元素中很常见
.outer{
border: 10px red solid;
}
.innder{
float: left;
width: 100px;
height: 100px;
background-color: rosybrown;
}
<div class="outer">
<div class="innder">
</div>
</div>
块级格式化环境。是css中隐含的熟属性 可以为一个元素开启BFC
开启bfc的方式：
父元素一起浮动，给父元素也写float标签，则是让父元素一起飞
将元素设置成行内块元素（替换标签）display：inline-blocak
overflow：非visible，默认是visibe，设置成其他的，例如是hideen
overflow: hidden;
开启后的特点：
clear：不让某个元素因为其他元素的浮动的影响来改变位置。清除浮动元素元素来对当前元素的影响
可选值：
原理：自动给元素添加一个边距（上边距 margin-top）
这里是操作父元素
.box1::after{
display: block;
clear: both;
content: ‘‘;
}
同时解决高度塌陷和外边距重叠
这里操作的也是夫元素
<div class="box1 clearfix">
<div class="box2"></div>
</div>
.clearfix::before,.clearfix::after{
content: ‘‘;
display: table;
clear: both;
}
position：是一种高级的布局手段
可以将一个元素设置在页面的任何位置
position可选值：
父相子绝
position: relative;
如果不设置偏移量，元素不会发生变化
偏移量（offset）：，需要设置偏移量来设置元素的位置
可选值：
相对定位是参照文档流定位的，默认是body
和浮动一样，会提高元素的层级，但是没有脱离文档流
不会改变的元素，块级元素还是块级，内联还是内联
position: absolute;
小广告
position: fixed;
视口：浏览器的可见窗口，但是不是根元素。可视区域，
position: sticky;
原文：https://www.cnblogs.com/yxqz/p/14877029.html