前端必须掌握的知识,什么是盒子模型?
盒子模型
由边框,外边距,内边距,内容组成
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" }
行内元素尽量只设置左右内外边距
总结:今天给大家介绍的是前端必须掌握的盒子模型,在我们的页面布局中,起到了关键性的作用.