1,盒模型宽度的计算
1,什么是盒模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
2,盒模型分为标准盒模型和怪异盒模型
box-sizing: content-box;标准盒模型是默认值,width是内容宽度 ,元素真正的宽度计算时要加上border(边框)和padding(内边距)
box-sizing: border-box;怪异盒模型则是元素的实际宽度 ,border(表框)和padding(内边距)不会撑高元素的宽度
举个例子:
如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,盒子宽度= {border+padding+content}
你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。 盒子宽度={content - border - padding}
区别:
在标准盒模型中 :width是内容宽度 ,元素真正的宽度 = content + border + padding;
在怪异盒模型中 :width则是元素的实际宽度 ,内容宽度 = width - ( padding + border)
2,margin 纵向嵌套塌陷的问题
外边距塌陷也称为外边距合并,是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距,
组合在一起变成单个外边距,不过只有上下外边距才会有塌陷,左右外边距不会出现这种问题。
有以下几种解决方案:
- 直接给父元素添加属性overflow:hidden
- 给父盒子添加border
- 给父盒子设置padding-top
float 布局的问题
1,什么是浮动
脱离标准文档流,不占据原来的位置。浮动脱离标准流,
浮动元素的位置空出来,由非浮动元素占据.(脱离标准文档流,不占据原来的位置)
浮动的元素总是找它最近的父级元素对齐。但是不会超出内边距的范围
2,为什么要清除浮动
准确地说,并不是清除浮动,而是清除浮动后造成的影响,主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
3,清除浮动的方法
- 加高法:直接给父元素设置一个高度。
- 额外标签法
是W3C推荐的做法,通过在浮动元素末尾添加一个空的标签,给其设置clear:both;
例如 <div style=”clear:both”></div> - 父级添加overflow属性方法
- 使用after伪元素清除浮动
.clearfix:after {
content: ""; /*为伪元素加入空内容,以便伪元素中不会有内容显示在页面中*/
display: block; /* 用于显示伪元素*/
height: 0; /*高度设置为0,使伪元素不影响布局*/
clear: both; /*用于清除浮动*/
visibility: hidden; /*可见度为隐藏
}