1.01.21盒子模型，浮动，定位

1.盒子模型

1. 标准文档流

网页在排版布局时,遵循的从上到下，从左到右的顺序正常的元素是会占据页面的空间大小的脱离文档流：不再遵循从上往下，从左往右的顺序（元素不再占据页面空间） 脱离文档流的元素可以直接设置宽高（不管他本身是什么元素类型）

2. 盒子模型概念

网页中的元素可以看成一个一个的盒子盒子模型是由： 外边距margin边框border内边距padding内容connent 给盒子定义宽高只是给他内容定义宽高，而盒子的整体大小得加上内边距与边框的尺寸，所以盒子可以由内边距和边框撑大

3. 盒子调整

外边距：

属性margin-方向： margin-left:5px 左外边距margin-right:5px 右外边距margin-top:5px 顶部外边距margin-bottom:5px 底部外边距 属性margin:(不带方向)： margin：5px 上下左右margin:5px 6px 上下 左右margin:5px 6px 7px 上 左右 下margin：5px 6px 7px 8px 上 右 下 左margin: 0 auto 上下0 左右自动 （可以让元素左右居中）

内边距

属性padding-方向： padding-left:5px 左内边距padding-right:5px 右内边距padding-top:5px 顶部内边距padding-bottom:5px 底部内边距 属性padding:(不带方向)： padding：5px 上下左右padding:5px 6px 上下 左右padding:5px 6px 7px 上 左右 下padding：5px 6px 7px 8px 上 右 下 左

边框

属性border-style

none值：无边框（默认值）solid值：实线dashed值：虚线边框dotted值：点状线边框double值：双实线边框还有其他的值（不常用） 属性border-方向-style：

该属性还可以带方向属性border-style还可以简写： border-style: solid; 上下左右border-style: solid dashed;上下 左右border-style: solid dashed dotted;上 左右 下border-style: solid dashed dotted double;上 右 下 左

属性border-color 边框颜色（没有border-style,该属性不生效）

属性值直接接颜色单位 属性border-方向-color 该属性可以带方向 可以简写，同上

属性border-width 边框宽度（没有border-style,该属性不生效）

属性值直接接尺寸单位 属性border-方向-width 属性可以带方向 可以简写，同上

简写属性

语法：border:宽度 样式 颜色(样式一定要给值，不然没有效果)如：border:3px solid red 可以带方向 如：border-方向:3px solid red

outline属性（了解）

不会撑大盒子大小，不会给盒子带来宽度或高度，他在外边距与边框之间存在语法：outline: 10px solid red; 不能带方向，没有这样的写法：outline-left: 10px solid palevioletred;

4.盒子带来的问题

外边距合并

情景：两个垂直方向的外边距合并为较大的那一个外边距(只针对垂直方向),即是：在CSS中，两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距叠加(collapsed margin)。 原因: 两个垂直方向的外边距接触到一起了 外边距合并的条件 2个或多个、毗邻、垂直方向、普通流在这里，我们称父子元素的外边距叠加也称为毗邻 解决方法： 物理隔离： 给父元素使用边框或内边距隔开两个垂直方向的外边距用父元素的顶部内边距代替子元素的顶部外边距 其他方法： 给父元素 overflow:hidden给父元素或子元素加display：inline-block给父元素或子元素脱离文档流（浮动或定位）

边框与内边距撑大盒子大小

情景：边框与内边距会撑大盒子大小解决方法： 使用box-sizing属性： content-box:设置的宽高只是内容的宽高，内边距和边框会撑大盒子大小border-box:设置的宽高包含了内边距和边框在内，内边距和边框不会撑大盒子大小

5.边框的玩法

带内容的容器给粗边框，会产生四个梯形带内容的容器给粗边框，会产生三个三角形结合以上两条再给边框透明色，或去掉某条边框会产生更多的效果只有高度或宽度容器给粗虚边框会有虚线的效果属性border-radius 可以设置边框圆角，盒子容器标签需要在有边框属性的基础上才会有效果，button标签可以直接用该属性 语法：border-radius:30px;语法：border-radius:10px 20px 30px 40px;上 右 下 左语法：border-radius：x1 x2 x3 x4/y1 y2 y3 y4 边框的左上角 右上角 右下角 左下角 border-radius：30px 30px 30px 30px /100px 100px 100px 100px可以简写成border-radius：30px/100px

6.元素的分类

块元素

可以直接设置宽和高，并且独占一整行的元素div ul ol li p h1-5 标签即使设置了宽高，也会占一整行，后面跟的元素会在他下面

行内元素

不可以直接设宽高（设了也无效），不会独占一整行span i b u s em strong ins del a 伪元素 标签

行内块元素

可以直接设置宽高，不会独占一整行input img button 标签行内块元素有一些常用的CSS属性不适用的，比如margin等。

7. display属性

1.元素转换

display:block把元素转为块元素display:inline-block把元素转为行内块元素display:inline把元素转为行内元素

2.display属性

概念 display属性可以设置元素的内部和外部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现（块级或内联元素，像元素的转换就是使用display设置他的外部显示特性）元素的内部显示类型可以控制其子元素的布局（例如：grid 或 flex）。 外部显示类型 块元素 display:block行内元素 display:inline 遗留显示类型 行内块元素 display:inline-block 内部显示类型 table 该属性元素类似于HTMLtable元素。是一个块级元素。flex 弹性盒子，元素的行为类似于块元素。grid 网格，元素的行为类似于块元素。 用于隐藏元素 display：none 此元素不会被显示。

8.内容溢出如何处理

overflow属性： visible值 内容溢出不作处理，默认值scroll值 内容溢出显示滚动条，水平垂直方向都有滚动条auto值 内容溢出隐藏 滚动条由浏览器决定，哪个方向溢出，哪里有滚动条hidden值 溢出的内容直接隐藏，不显示滚动条可以带方向 overflow-x:值overflow-y：值

2.浮动

float属性：

float：left 元素漂浮在左边float：right 元素漂浮在右边

特性：

浮动可以让元素不再占一整行，浮动元素会生成一个块级框浮动使得元素脱离文档流，然后以父容器的左上角为起点,浮动元素不再占据页面空间, 其他元素可以占据浮动元素的位置 其脱离文档流后，很容易引起后面的元素压上来，这种情况，下面点3属性clear中有解决的方法 设置了浮动的元素不会覆盖文字，可以实现文字环绕的效果 其实设置了浮动的元素不会覆盖顶上来的元素的内容，会出现顶上来元素的内容环绕的效果

属性clear:

该属性用于清除同级元素的浮动，可以使得该元素和后面的元素不受前面浮动的影响clear:left 清除同级元素的左浮动clear:right 清除同级元素的右浮动clear:both 清除同级元素的左和右浮动

子元素浮动导致父元素没有高度

解决方法：

直接设置高度

给父元素overflow:hidden,但会使得二级列表等情况显示不全

给父元素的尾部加入一个块元素并让这个元素清除同级元素的浮动

可以给父元素的尾部加入一个伪元素，让这个伪元素转为块元素并清除同级元素的浮动 这个伪元素本身是不设float属性的

3.定位

静态定位

元素默认的定位，遵循标准文档流

固定定位 固定定位会脱离文档流并可以盖住文字

position:fixed 固定在浏览器窗口 给元素加了这个定位再加下列属性，就可以给元素在浏览器窗口上定位： left:0px 元素左上角距离浏览器窗口的左边的距离right:1px 元素左上角距离浏览器窗口的右边的距离top：2px 元素左上角距离浏览器窗口的顶边的距离bottom：4px 元素左上角距离浏览器窗口的底边的距离

相对定位 不会脱离文档流，可以盖住文字

position:relative 相对于自身原来的位置做定位 给元素加了这个定位再加下列属性，就可以给元素在相对于自身原来的位置做定位： left:0pxright:1pxtop：2pxbottom：3px

绝对定位 绝对定位会脱离文档流，不占页面空间

position:absolute 以有position属性的最近的祖先元素现所在位置为参照物： 祖先元素都没定位，就以浏览器为定位一般都是父元素加相对定位，子元素加绝对定位

黏性定位

position:sticky 谁有滚动条以谁为定位，都没有便以浏览器为参考，这里以浏览器举例： left:0px 元素黏住的位置相对于浏览器左边的距离right:1px 元素黏住的位置相对于浏览器右边的距离top：2px 元素黏住的位置相对于浏览器顶边的距离bottom：3px 元素黏住的位置相对于浏览器底边的距离