css盒子模型

标签：盒子 border 模型 元素 边框 padding background margin css

1.（内容）盒子组成

盒⼦属性（ Box properties）

margin 外边距 border 边框    padding 的外边缘与 margin 的内边缘之间，默认值为 0 padding 内间距  width & height 内容区域宽⾼ 设置高度 因为父元素没有高度，所以他设置百分比时不能出现

边框属性

border-width: 上 右 下 左 border-style: 上 右 下 左 border-color: 上 右 下 左 bborder:width style color border-radius 50%(圆)

外边距属性

margin-top: ;
margin-right: ;（是否是距离浏览器的边距？看起来margin-right没有⽣效，其实 有效果的，只是在默认即标准流的情况的下显示不出来效果，可以加右浮 动脱离标准流，是右侧为基准点，在他的右侧创建一个）

margin：（上下）（左右）
margin: (上下左右)

（面试）让一个块级元素在水平方向居中？
1.margin:0 auto
2.定位布局
3.flex浮动布局
（面试）外边距合并问题
垂直方向上外边距会重合（谁的外边巨大就听谁的），水平方向上外边距时累加的（相加的）

内边距属性

写好的内容距离边框的距离

padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ; padding:上 右 下 左

2.CSS盒模型

内容盒⼦(W3C盒⼦)content box

(面试)内容盒子所占屏幕的宽度和高度？

屏幕width=lmargin+lpadding+cwidth+rpadding+rmargin

height同理

边框盒⼦(IE盒⼦模型)

(面试)内容盒子所占屏幕的宽度和高度？

​​​width

盒模型注意点

切换盒子：box-sizing：border-box；

（面试）内容盒子和边框盒子两的区别

(面试)父子元素外边距重复的问题？ (⼦元素 ) 顶部的外边距或者内边距, 外⾯⼀个盒⼦ ( ⽗元素 ) 也会被顶下来，因为找不到边界，加个边界边框就可以了。 原因 ⼦元素和⽗元素上边框重合在⼀起。 因为⽗元素的第⼀个⼦元素的顶部外边距margin-top 如果碰不到有效 的border 或者 padding ，就会不断⼀层⼀层的找⾃⼰⽗元素的麻烦。只要给 ⽗元素设置⼀个有效的border 或 padding 就可以有效的管制这个 margin-top，防⽌它越级，把⾃⼰的 margin-top 当成⽗元素的 margin-top 执⾏。 想要控制父子元素的距离，就直接padding（现阶段，以后就直接用定位布局），若是margin，则需要添加边框。

3.盒⼦背景样式

background-color 背景颜⾊ background-image 背景图⽚ 注意点 : 1. 图⽚的地址必须放在 url() 中 , 图⽚的地址可以是本地的地址 , 也可 以是⽹络的地址 2. 如果图⽚的⼤⼩没有标签的⼤⼩⼤ , 那么会⾃动在⽔平和垂直⽅ 向平铺来填充 3. 如果⽹⻚上出现了图⽚ , 那么浏览器会再次发送请求获取图⽚ background-repeat 背景平铺属性 background-position 背景定位属性    background-size: 100%;不需要设置定位 注意点 : 同⼀个标签可以同时设置背景颜⾊和背景图⽚ , 如果颜⾊和图⽚同时存在, 那么图⽚会覆盖颜⾊ background-attachment关联 取值： scroll 默认值， 会随着滚动条的滚动⽽滚动 fixed 不会随着滚动条的滚动⽽滚动 背景图⽚和插⼊图⽚区别?

1. 背景图⽚仅仅是⼀个装饰, 不会占⽤位置 ，插⼊图⽚会占⽤位置
2. 背景图⽚有定位属性, 所以可以很⽅便的控制图⽚的位置
3. 插⼊图⽚没有定位属性, 所以控制图⽚的位置不太⽅便
4. 插⼊图⽚的语义⽐背景图⽚的语义要强, 所以在企业开发中如果你的图⽚想被搜索引擎收录, 那么推荐使⽤插⼊图⽚

标签：盒子,border,模型,元素,边框,padding,background,margin,css
From： https://blog.csdn.net/weixin_67252311/article/details/140160070