什么是盒模型？
（1）css盒子模型仅仅是一个比喻，HTML中所有的标签都是盒子
（2）就是在HTML中所有标签都可以设置
（3）宽度/高度：指可以存放内容的区域
（4）内边距：内容与边框的距离-填充物
（5）边框：
（6）外边距：盒子与盒子之间的距离
盒子的宽度有不同的宽度
（1）盒子宽度和高度
–1、内容的宽度和高度
就是通过标签的width/height属性设置的宽度和高度
–2、元素的宽度和高度
宽度=左边框+width+右内边距+右边框
高度一样
–3、元素空间的宽度和高度
宽度=左外边距+左边框+做内边距+width+右内边距+右边框+右外边距
高度一样
总结，可以根据盒子模型的特性+浮动/定位+设置宽高来进行页面布局设计
什么是网页的布局方式：排版
二。一、标准流（文档流/普通流）排版方式：从左到右，从上到下
1、浏览器默认的排版就是标准流排版方式
2、css把元素分为块元素（默认每行只能显示一个），行内元素，行内块元素
3、在标准流有两种排版方式，一种是垂直排版，一种是水平排版
垂直排版：块元素
水平排版：行内元素/行内块元素
设置
二。二、浮动流排版：半脱离标准流
2.1、浮动流只是一种排版方式，水平排版，它只能设置某个元素在父元素左对齐或者右对齐，没有居中对齐，
2.2、不可以使用magrin ：0 auto;
2.3、浮动流不区分块级元素/行内元素/行内块元素，都是水平排版
2.4、 都可以设置宽高
什么是浮动元素脱标：脱离标准流
效果，之前的标准流的元素会重新排版，因为脱离这个标准流后，腾出了位置
浮动元素排序原则
1、相同方向上的浮动元素，先浮动的在前，后浮动的在后
2、不同方向，左浮动找左浮动，右浮动找右浮动互不影响，
问题;当两个碰到会怎么样？
3、浮动元素浮动之后的位置，是由浮动之前在标准流中的位置来确定
所以称为半脱离状态：看浮动之前的位置在哪一行，就在哪一行浮动，若前面有浮动，则前面浮动完成后，标准流重新排版，看到就是重新排版的位置
浮动元素的贴靠现象
（1）、如果父元素的宽度能显示所有浮动元素，那么浮动的元素会并排显示
（2）如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始往前面贴靠
（3）如果贴靠了前面所有的浮动元素之后都不能显示，最终会贴靠到父元素的左边或者右边
用处
浮动元素字围绕现象？
浮动元素不会挡住没有浮动元素中的文字，没有浮动 的文字会自动给浮动的元素让位置，这个就是浮动元素字围现象
利用浮动来布局
首先要清除默认布局
1、先从上到下，大体盒子布局
2、再从左到右布局
浮动元素高度问题
1、若子元素浮动了，则他不会撑起父元素的高度
清除浮动方式
为什么要清除浮动？
因为当父盒子高度为0时，子盒子不占位置，子盒子不会撑开父盒子，所以下面的标准流盒子，会跑到父盒子中的子盒子下面。关于浮动的小知识：
（1）浮动的盒子千万不要让他超出父盒子。
（2）超出父盒子的部分会影响下面盒子中的浮动的子盒子。
（3）浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。清除浮动的几种方式？
（1）给前面的一个父元素设置高度（但是企业中，能不写高度就不写高度）
（2）想让谁不跟前，就给谁添加clear属性（给后面得属性添加clear属性）
当我们给某个元素添加clear属性之后，那么这个元素没有margin属性
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery