CSS之盒模型

超、凢脫俗 2022-05-23 09:40 242阅读 0赞
盒模型有两种类型:标准(W3C)盒模型、IE盒模型如下图

20180606164501369

盒模型包括:content(内容)、padding(内边距)、边框(border)、margin(外边距),

两者区别在于content不同:

标准盒模型width=content=200px,

IE盒模型width=content+padding+border=200px+30px*2+5px*2=270px,

那么问题来了,如何自由切换盒模型呢?很简单的设置css3的box-sizing属性即可,

标准盒模型 box-sizing:content-box;(默认content-box)

IE盒模型:box-sizing:border-box;

啦啦啦,希望可以帮到小伙伴们呦偷笑偷笑~~

发表评论

表情:
评论列表 (有 0 条评论,242人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS模型

    box-sizing盒模型的本质是一个盒子,封装周围的html元素,它包括:外边距、边框、内边距、内容。 盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。 ![在

    相关 CSS模型

    1 元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

    相关 CSS模型

    盒模型 单地说每个html标签都是一个方块,然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。 Margin(外边距) - 清除边框外的区

    相关 CSS模型

    ![img1.gif][] 我们可以把它想像成现实中上方开口的盒子,然后从正上往下俯视,边框相当于盒子的厚度,内容相对于盒子中所装物体的空间,而填充呢,相当于为防震而在盒子内