什么是盒模型？

 

　　（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属性