大家好,欢迎来到IT知识分享网。
前端必须掌握的知识,什么是盒子模型?
盒子模型
由边框,外边距,内边距,内容组成
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″ }
行内元素尽量只设置左右内外边距
总结:今天给大家介绍的是前端必须掌握的盒子模型,在我们的页面布局中,起到了关键性的作用.
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/169000.html