盒模型结构梳理

元素框最内部分是实际的内容直接包围内容的是内边距,内边距呈现了元素的背景内边距的边缘是边框边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素

提示:背景应用于由内容和内边距、边框组成的区域。

 1)padding 属性定义元素的内边距   (属性接受长度值或百分比值)

           CSS padding 属性定义元素边框与元素内容之间的空白区域     

           padding-top

           padding-right

           padding-bottom

           padding-left

综合写法   padding

 2)Border  属性定义元素的边框(宽度、样式,以及颜色)

           CSS 规范指出,边框绘制在“元素的背景之上”

                border-width   宽度

                border-style    样式

                border-color    颜色

                borde-radius    圆角:    

注释:边框样式none  则边框宽度也就没有必须要声明样式

特殊: outset 3D凸边     transparent  透明边框

 3)margin 属性    设置外边框

            设置外边距最简单方法是使用margin 属性,属性接受任何长度单位、百分数值甚至负值

            margin: 0 auto; // 使该元素⽔平

            外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

           合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

           解决方案:给⽗元素设置overflow: hiddde

4)盒模型的分类

            标准盒模型(w3c标准盒模型)

            content = width + height

            怪异盒模型(IE盒模型)

            content = width + height + padding + border

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容