前端攻城狮

css 盒子模型

2018-01-01  本文已影响26人  梦见君笑

1.css 盒子模型(css box model)

所有的html元素本质上都是盒子模型。在css 中,盒子模型常用来进行设计和布局。

盒子模型包括:margin(外边距),padding(内边距),border(边框),actual content(实际的内容区域),如下:

2.计算盒子尺寸的两种方式

根据为元素的box-sizing属性赋的值的不同,盒子尺寸有两种计算方式,content-box 和 border-box.外边距影响盒子周边的距离,在计算盒子尺寸时,无需考虑。

    1.box-sizing:content-box(css 盒子模型的默认值)

box-sizing:content-box

盒子的宽 = width + padding-left + padding-right + border-left + border-right ;

盒子的高  = height + padding-top + padding-bottom + border-top+ border-bottom ; 

2.box-sizing: border-box

box-sizing: border-box

盒子的高 = height

盒子的宽 = width

盒子的尺寸只跟盒子的宽度和高度属性相关。浏览器会考虑内边距和边框,合理的调整高度和宽度属性。因此总尺寸等于为高度和宽度属性设置的值。

3. 设置box-sizing

任何元素都可以设置box-sizing这个属性,因此可以混用两种盒子,但为了保持一致,通常选择其中一种使用。设置方法是:用通用选择器进行设置,指定盒子模型的类型(content-box是默认值):

*,*:before,*:after{
    box-sizing: border-box;
}

上一篇 下一篇

猜你喜欢

热点阅读