CSS layout box model properties

This time I will bring you the box model attributes of CSS layout, what are the notes of the box model attributes of CSS layout, the following is a practical case, let’s take a look.

width/height

In CSS, you can set an explicit height for any block-level element.

If the specified height is greater than the height required to display the content, the excess height will produce a visual effect, as if there is extra padding;

If the specified height is less than the height required to display the content , depending on the overflow attribute, the scroll bar needs to be set to overflow:auto.

auto

Width, height and margin can be set to auto. For block-level elements, if the width is set to auto, it will be as wide as possible. Specifically, element width = containing block width - element horizontal margin - element horizontal margin width - element horizontal padding;

If the height is set to auto, it will be as narrow as possible. In detail, element height = height just enough to contain its inline content

[Note] If the height of the containing block is not explicitly declared, the element's percentage height will be reset to auto

[Maximum and minimum width and height]

min-width | min-height

Initial value: 0

Applies to: block-level elements and replacement elements

Percentage: relative to the width (height) of the containing block

max-width | max-heightt

Initial value: none

Applies to: block-level elements and replacement elements

Percentage: relative to the width (height) of the containing block

[Note] When the minimum width (height) is greater than the maximum width (height), the value of the minimum width and height is Accurate

Padding

Compared with other attributes of the box model (such as margins with negative values ​​that are often used in positioning), padding appears to be quite satisfactory and has no compatibility. There are no special issues

For inline elements, left padding is applied to the beginning of the element, and right padding is applied to the end of the element. Vertical padding does not affect the line height, but it does affect itself. Size, you can see it by adding the background color

[Note] The padding cannot be a negative value

padding

Initial value: Undefined

Percentage: Relative to the width of the containing block

【50%】

Block-level elements can achieve a square effect through padding:50%, because the percentage values ​​of horizontal and vertical padding are relative to the containing block Determined by the width, often used for mobile header images

External margin

Setting the external margin will create additional white space outside the element. Usually refers to an area where other elements cannot be placed, and the background of the parent element can be seen in this area

margin

Initial value: Undefined

Applies to: all elements

Percentage: relative to the width of the containing block

[Note] For ordinary elements, the containing block is the block-level parent element. For positioned elements, the containing block is the positioning parent. . Therefore, the margin percentage of ordinary elements is relative to the width of the block-level parent element, and the margin percentage of positioned elements is relative to the width of the positioned parent.

margin can be set to negative values. Margin and width and height support auto, and Margins have very strange overlapping properties.

Introducing several key parts of margins, including overlap, auto and invalid situations

1. Overlap

[Premise]

  Margin overlaps and It’s called margin merging. There are two prerequisites for this happening.

1. It only happens on block elements (excluding float, absolute, and inline-block elements)

2. It only happens on vertical elements In the direction (regardless of writing-mode)

[Classification]

Overlap of the pitch margin

1. Adjacent sibling elements

<style>
p{
    line-height: 2em;
    margin: 2px 0;
    
background-color
: lightblue;
    display:inline-block;
    width: 100%;}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

2. The margin overlap between the parent element and the first or last child element is also called margin transfer

<style>
.box{
    background-color: pink;
    height:30px;}
.inner{
    margin-top: 1em;
    background-color: lightblue;}
</style>
<div class="box">
    <div class="inner">子级</div>
</div>

In web page layout, because of margin overlap, we often use margin Use it as little as possible as a "question style". But in fact, it plays a big role,

So, we must make good use of overlap, and we can use margin-top and margin-bottom at the same time in the list items. In this way, the page structure is more robust, and the removal or positioning of the last element will not destroy the original layout

2.auto

  Only width/height and margin can be set to auto .

[Why margin:auto cannot achieve vertical centering]

  水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间

  垂直方向不可以居中是因为块级元素的高度默认是内容高度，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0

margin: 0 auto;

【为什么图片使用margin:auto不能水平居中】

  图片无法水平居中，类似于块级元素无法垂直居中。因为图片的宽度width默认是自身宽度，与父元素的宽度没有直接关系。左右margin设置为auto，会被重置为0

  所以，图片要水平居中，需要设置为display:block元素

3.无效情形

  1、行内元素垂直margin无效

  因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的，垂直margin并不会影响它们，所以不会影响垂直布局。而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。[注意]不包括inline-block

　　2、某些表格类元素margin无效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>　　不可设置margin。

　　3、BFC造成的margin看似无效

  左侧元素使用浮动，右侧元素使用overflow-hidden实现两栏自适应的布局时，右侧元素的margin-left值只有足够大，才能看到效果。这是因为margin-left是相对于父元素左侧，而不是图片右侧

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

如何解决layer.photos()异步修改图片地址后显示异常的问题

怎样监听angularJs列表数据是否渲染完毕

ES6的“类”与面向对象的关系

ES6箭头函数中的this应该如何使用

The above is the detailed content of CSS layout box model properties. For more information, please follow other related articles on the PHP Chinese website!