前端必须掌握的知识，什么是盒子模型?

前端必须掌握的知识,什么是盒子模型?

盒子模型

由边框,外边距,内边距,内容组成

border 边框

border-width 粗细px 单位

border-style

solid 实线

dashed 虚线

dotted 点线

border-color 颜色

复合写法: border:1px solid red ; 没有顺序,但一般这样写

边框分写

border-top /bottom/left/right

border-right-width: 单独写右边框的粗细等

border-width:1px 2px 3px 4px (上 左 下 右) 等

表格细线边框

border-collapse="collapse"表示合并相邻的边框

注意:边框会影响盒子的大小, 要减去边框的值,才是盒子实际的大小

padding 内边距

padding-left/right/top/bottom

复合写法

padding:50px 上下左右都是50px

padding:50px 10px 表示 (上下) (左右)

padding:10px 50px 100px 表示 (上) (左右) (下)

padding:10px 50px 100px 150px 表示 上 右 下 左 (顺时针)

注意: padding 会影响盒子大小

解决方案:①减去padding的大小

② 块元素盒子没设宽度时,设padding不会影响盒子大小,可以不用减

margin 外边距

margin-left/right/top/bottom

复合写法和内边距一样

块级元素水平居中

必须有宽度(width)

margin: 0 auto

外边距合并

相邻块元素垂直外边距的合并,取两者较大的值而不是累加

(给一个盒子设外边距就行)

嵌套块元素垂直外边距的塌陷

①可以为父元素定义上边框

②可以为父元素定义内边距

③可以为父元素添加 overflow:hidden (溢出隐藏)

还有浮动,固定,绝对定位的盒子不会有塌陷问题

margin值的 负值使用

边框向左 margn-left:-1px

hover时 合并的边框被压住显示不出来,

本身有定位的用 z-index:1; 加层级

如果本身没有定位可以用相对定位position:relative

清除内外边距

*{padding="0"

margin="0" }

行内元素尽量只设置左右内外边距

总结:今天给大家介绍的是前端必须掌握的盒子模型,在我们的页面布局中,起到了关键性的作用.