【前端三件套——CSS】盒子模型加浮动等于热气球
文章目录
盒子模型
概念： 网页页面中每一个标签，我们都可以理解为一个“盒子”
好处： 更加方便进行布局，也就是在美工美眉给我们发来设计图时，作为切图仔的我们就可以将页面中每个元素理解成盒子，合理地摆放、嵌套进行布局。
组成： 盒子由四部分组成——
内容区域content
内边距区域padding
边框区域border
外边距区域margin
盒子尺寸包括border、padding、以及content
内容的宽高
width和height属性的设置默认就是内容区域的大小
前面也说过，取值是数字+px即可
width:100px;height:100px;边框
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线-solid、虚线-dashed、点线-dotted |
| 边框颜色 | border-color | 颜色取值 |
和font、background一样，border也可以连写
border：粗细 样式 颜色
border:10px solid red;内边距
边框与内容区域之间的距离
padding 可以直接连写，最多是个值，分别的方向指的是上右下左，没错就是顺时针的方向
padding:10px 20px 30px 40px;
padding的取值设置1位，2位，3位都是可以的
那些没有被赋值的padding方向怎么办？
答案：看对面的
假设你只赋了三个值，左边没赋，那么左边就会默认设置为和你右边设置的值一样，也就是第二个值
同理，如果你想要盒子上下内边距一样，左右内边距一样，只需要设置两个值即可
当只设置一个值时，默认四个方向内边距一致
有时候会遇到一些情况需要单独设置，可以直接——
padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;外边距
盒子与盒子之间的距离
margin的取值特点与padding一致，这里就不多做赘述
常见问题解决
- 内容区域宽高设置后，在设置边框、内边距时是会撑大盒子的，也就是在你设置内容宽高时，需要用想要的盒子宽高减去边框和内边距才能得出
避免繁杂计算：
直接给盒子设置属性,自动减去
box-sizing:border-box;此时你加入边框、内边距后，不会撑大盒子，内容区域自动缩小，也就是你一开始输入的内容宽高，将会是盒子尺寸，不会变化
- 部分标签具有自己的默认margin、padding
如
一般开发时会在开头用通配符选择器将所有默认内外边距清零，便于自己的调试布局
代码如下：
*{margin：0；padding：0；}-
外边距塌陷现象兄弟间
margin外边距使用时，需要注意的是：水平布局的盒子，之间的边距是两个margin叠加
而垂直布局的块级元素，边距不会叠加，只会取两个之间的最大值作为边距 -
外边距塌陷现象父子间
场景：
互相嵌套的块级元素，当父元素的padding-top和border-top为0或未设置时，子元素的margin-top会作用在父元素上，表现为子元素将父元素拖拽下去，俗称坑爹。
啥意思，就是你没给父元素上边你没加边框也没给内边距,这时候还给子元素加了上边的外边距，，这时子元素穿透父元素，父元素无法识别子元素范围，子元素直接把父元素拉了下来，margin-top相当于给了父元素
解决方法：
- 给父元素设置
border-top或padding-top - 给父元素设置overflow:hidden;原理点此
- 转换成行内块
结构伪类选择器
作用： 根据元素在html的结构关系寻找元素，常用于查找父级选择器的子元素
优点： 减少对类的依赖，保持代码整洁
使用如下所示：
li:first-child{}/*选择第一个li标签*/注意：
nth-child(n)和nth-last-child(n)中的n可以为公式
如——2n、5-n等等
伪元素
利用CSS模拟出的标签效果
种类：
| 伪元素 | 作用 |
|---|---|
| ::before | 在父元素内容的最前面添加一个伪元素 |
| ::after | 在父元素内容的最后面添加一个伪元素 |
注意：
- 必须有content属性才能生效
- 伪元素默认为行内元素
浮动
作用：
图文环绕、网页布局（重点）
语法：
float:left;左浮动
float:right右浮动
float:none默认值
浮动怎么个网页布局：
首先浮动元素会脱离标签，在标准流中不占位置
也就是热气球，脱离地面
- 浮动元素与他最近的父元素对齐，不会超出内边距的范围
在地面未浮动的元素就会顶上来，代替浮动的位置
- 浮动的目的就是为了让多个块级元素在同一行显示，核心就是怎么排列，是否占标准流（这里可以理解成地面）的位置
- 元素会往父级边距的左上或右上浮动，但注意，当没有浮动的块级元素挡住浮动元素的路时，浮动元素不会超过也不会叠在块级元素
- 浮动元素也不会超过上边的兄弟元素
- 浮动会改变元素的显示模式：
block
网页布局
- 确定页面版心
- 分析行模块、列模块，嵌套、排列等
- HTML结构
- CSS运用，利用盒子模型的思想，DIV+CSS布局控制网页各个模块
清除浮动
为什么要清除：
由于浮动元素不再占用原标准流的位置，因此会对后面元素的排版产生影响，如一行里面全是浮动，浮动元素的父元素并没有设置高度，后面那行的元素可能会跑上来
清除浮动，是清除浮动带来的影响
方法：
- 直接给父元素设置高度
缺点：
直接固定了父元素高度，缺少了灵活性，像京东推荐模块，是不能固定父元素高度的，因为要根据内容变化
- 用clear属性
给父元素的最后添加一个块级元素，再给该块级元素设置属性：clear:both;(清除左右浮动带来的影响）
.father .clear{clear:both;}<div class="father"> <div class="left">left
