有关盒模型中padding的使用

Posted 2023-05-07

参考技术A 1: padding是长在内容和盒子之间的，在盒子内部。

2：padding是为了调整 子元素 在 父元素里面位置关系。

3：padding的特点：padding值会把盒子撑大。

4：如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值；

【注】：（如果一个盒子没有设置固定的宽和高，添加padding是不用减的；

父元素对里面使用padding才需要减掉padding值；）

或者你不想这么这么麻烦，可以把盒模型转为怪异盒模型：box-sizing:border-box;

怪异盒模型的宽高包括padding值与边框值。

5：padding 设置方法（同margin）：

padding-left/right/top/bottom:;

padding 设置方法：

padding:1个值 四周

padding:2个值 上下 左右

padding:3个值 上 左右 下

padding:4个值 上右下左

6:注意 padding不能设置负值

盒模型相关面试题

㈠基本概念是什么？

⑴页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。
⑵盒模型有两种：标准盒模型和怪异盒模型（IE盒模型）

 

有关盒模型的相关知识可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11246482.html

 

㈡ 标准模型和IE模型区别是什么？

宽和高的计算方式不同。标准模型的宽度指的就是content的宽度，不包含padding和border。

怪异准盒模型：width = content + padding + border；

标准盒模型：width = content；

 

有关两者的区别可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11329595.html

 

㈢CSS如何设置这两种模型？

⑴标准盒模型下设置：box-sizing: content-box;

⑵浏览器默认设置：box-sizing: border-box; 是IE下的设置。

 

有关box-sizing的相关知识可以看我这篇博客：https://www.cnblogs.com/shihaiying/p/11589477.html

 

㈣对于padding、margin的取值相关理解？ 

⑴不赋值：默认情况下为0，也就是不会有内外边距

⑵不允许取负值

⑶赋值（以padding为例）

①一个值时：Padding：10px； 四个内边距都为10px

②两个值时：Padding：10px 20px;  上下内边距为10px，左右内边距为20px

③三个值时：Padding：10px 20px 30px；上10px,左右20px，下30px

④四个值时：Padding：10px 20px 30px 40px;上右下左分别为10 20 30 40

 

有关取值的具体内容可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11246482.html

扩展：有关定位的知识可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11253597.html

 

㈤js如何设置获取盒模型对应的宽和高？

⑴dom.style.width/height(只适用获取内联元素的宽和高)

⑵dom.currentStyle.width/height(获取渲染后的宽高，但是仅IE支持)

⑶window.getComputedStyle(dom).width/height(与2原理相似，但是兼容性，通用性会更好一些)

⑷dom.getBoundingClientRect().widht/height(计算元素绝对位置，获取到四个元素left,top,width,height)

有关这个问题的详细代码示例可以看我的这篇博客：https://www.cnblogs.com/shihaiying/p/11600229.html

 

㈥边距重叠在什么时候或者什么情况下会发生呢？

⑴父与子之间：子级的上下margin会与父级上下margin重叠，以最大值为标准去渲染

⑵空元素：如果设置了margin-top和margin-bottom，它会在这两之间取一个最大值作为它的最终边距值

⑶兄弟元素之间：每个兄弟之间都有上边距或者每个兄弟之间都有下边距，原则就是取最大的值

 

从第六个问题开始到结束相关的知识可以看我这篇博客：https://www.cnblogs.com/shihaiying/p/11616055.html

 

㈦什么是BFC？BFC的基本概念是什么？

BFC的基本概念–BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

 

㈧BFC的原理是什么？

⑴BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。

⑵BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。

⑶BFC的区域不会与float box重叠。

⑷计算BFC的高度时，浮动元素也被计算在内。

 

㈨如何创建BFC？如何触发BFC？那些情况会产生新的BFC？

⑴根元素或其它包含它的元素

⑵浮动 (元素的 float 不为 none)

⑶绝对定位元素 (元素的 position 为 absolute 或 fixed)

⑷行内块 inline-blocks (元素的 display: inline-block)

⑸表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)

⑹表格标题 (元素的 display: table-caption, HTML表格标题默认属性)

⑺overflow 的值不为 visible的元素

⑻弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

 

希望看完这篇博客和文中链接的详细内容理解的博客，希望能帮助更深刻的了解盒模型！