CSS some things

1. Non-replacement elements

Note that for non-substituted inline elements, the footprint (row height) is determined by the Line-height property, although there are padding and borders around the content.

Replace element: The browser judges the specific content based on the elements and attributes of its tag. Like what:

、<input>、<textarea>

Non-replaceable elements: they show the content directly to the browser, such as

<p>wanmei.com</p>

2. Margin and padding

If the boundary draws a line, the margin is outside the boundary and the padding belongs to the boundary

1. When we give the element a background color, the margin area is not shaded, and the padding area is shaded.

2. When the upper and lower two block elements, a set margin-bottom:10px, the following settings margin-top:20px, two block elements of the distance is not 30 but 20. and padding is the sum of the cases.

3. Margin is used to separate elements from elements, and padding is used to separate elements from the contents of the space. Margin is used to separate elements from elements so that elements are irrelevant to each other; padding is used for the interval between elements and content, allowing a "breathing distance" between content (text) and (wrapped) elements

3. Margin collapse

Definition: The top margin and bottom margin of a block are sometimes grouped (folded) into a single margin, whose size is the maximum margin to which it is grouped

1. Sibling elements of neighboring siblings

   <p style="margin-bottom: 10px;">上面的段落</p><p style="margin-top: 20px;">下面的段落</p>

The margins are not both and 30, but the larger of the two is 20.

1. A block element with its first or last child element

<style>    .my-title{        margin:0;        background-color: #808080;    }       .parent{        margin-top:35px;        background-color: #00FF00;    }       .children-first{        margin-top:20px;        margin-bottom:40px;    }       .children-second{        margin-top:20px;    }   </style>

<div class="my-title">    my title</div><div class="parent">    <div class="children-first">        children    </div>    <div class="children-second">        children    </div></div>

4. Positioning position

Position This property determines how the element will be positioned. It has the following five kinds of values:

Position Value	How to locate
Static	the default value of the position . The element will be positioned to its normal position (as mentioned above), which is actually equivalent to no positioning. Element occupies a position on the page. You cannot use the top right bottom to move an element position.
Relative	Relative positioning, relative to the normal position of the element to be positioned. The element occupies a position on the page. You can use the top right bottom to move the element position.
Absolute	Absolute positioning, positioning relative to the nearest level is not the parent element of static . The element does not occupy a position on the page. You can use the top right bottom to move the element position.
Fixed	Absolute positioning, relative to the browser window . The rest, like absolute, is equivalent to a special absolute.
Inherit	Inherits the value of the Position property from the parent element.

Other

1. For block-level elements, the width of the child element defaults to 100% of the parent element,
   Parent element width = child element width + padding + magin

2. When IMG was such an element, the IMG always showed its original width and height, no matter how much we set the parent element's widths and heights, without setting the IMG and high. When the width and height setting is one, the other scales proportionally. This parent element is covered when the width and height are 100%

3. Same as block element, when out of document flow, take float for example when parent element has width, child element has no width, child element floats, note child element size when child element has width, parent element has no width, child element floats, note parent element size

CSS some things