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

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

大家好,欢迎来到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

(0)
上一篇 2025-01-29 13:15
下一篇 2025-01-29 13:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信