黑马程序员技术交流社区

标题: 技术贴 [打印本页]

---

作者: 吃火腿肠的猫    时间: 2019-6-7 13:26
标题: 技术贴
1、盒子模型
盒子模型组成
     内容：  实体化宽高和里面的文字图片等等
     边框：  border
  内边距：   padding   拉开内容到盒子边缘的距离；
  外边距：   margin    拉开盒子与盒子之间的距离；
在调试工具里面  橙色表示外边距margin，黄色边框表示border，绿色色表示内边距padding，蓝色表示内容

2、清除浮动的影响
问题描述
在布局的时候如果父级盒子没有设置固定的高度，里面的子级盒子进行浮动设置，父级盒子就不会被撑开，就会影响我们后面的盒子布局；
清除浮动本质：
父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；
解决方案
清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；
方法1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；
额外标签法
在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：
<div style=“clear:both;”></div>
书写方便，但是会添加许多没有意义的标签，不建议使用
父级加overflow属性法
直接给父级添加overflow:hidden;，强制的撑开父级的高度；
after伪元素法（会使用一直用）
After伪元素清除浮动法实际开发中推荐使用：
/*声明清除浮动的样式*/
.clearfix:after {

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2