CSS inheritance

CSS weight issues

Complicated selector weight calculation

Inline style 1000
id selector 100
class selector 10
Tag selector 1
Wildcard/Inherited Attribute 0

The manifestation of the label

Block label: Occupy one line alone, width and height are valid. When the width is not written, the width is 100% of the parent element (remaining) width. For example:div p h1~h6 form table hr br ul>li ol>li dl>dt/dd
In-line block label: can be displayed on the same line, width and height are valid. When the width is not written, the width is supported by the content. For example:input select img button
In-line label: It can be displayed on the same line, but the width and height are invalid. such as:a span strong del ins em i b
display: Modify the nature of the element.
- block: set the element as a block element
- inline: set the element as an inline element
- inline-block: Set the element as an inline block element

vertical-align

Set the vertical alignment of the content of the object. Is the display of the elements in the container relative to the content

The simple point can be understood as the alignment of the block element and the text in the line

p{
    
     
	background:orange;
}

img{
    
    
	width:100px; 
	vertical-align: middle; 
}

<p>this is paragraph!!!<img src="images/boy.jpg" alt=""/></p>

CSS box model

We will divide a box into several parts:

Content
Padding
Border
Margin

padding

Note: The top and bottom of the elements in the row can only be seen, not occupying the actual position. Normally occupy the left and right positions.

padding:10px 20px 30px 40px; This will set the top, right, bottom, and left padding of the element.
padding:10px 20px 30px; Specify the padding in the top, left, and bottom directions respectively.
padding:10px 20px; Specify the inner margins in the top and bottom and left and right directions respectively.
padding:10px; At the same time, specify the inner margins in the upper, left, and lower directions.
While also provides css padding-top, padding-left, padding-right, padding-bottomit is used to specify the four directions of the padding.

border

You can create a border around the element, the border is the outermost part of the visible frame of the element.
border:1px solid red;Specify the border width, color and style, an abbreviation: border-width border-style border-color.
border-style: none (默认) / dashed(虚线) / dotted（点） / solid(实线) / double(双实线)。
You can set a frame individually:border-right: 20px solid blue;
Can be written separately:border-width: 10px; border-color: orange; border-style: dashed;
Round corner effect: border-radius

- border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;

Write two is upper left and lower right and lower left and upper right:

div{
    
     border-radius:10px 20px;}

Half round
Insert picture description here

margin

Note: The top and bottom of the elements in the row can only be seen, not occupying the actual position. Normally occupy the left and right positions.

The setting method is paddingsimilar, and four directions are also provided margin-top/margin-right/margin-bottom/margin-left.
margin: xxx auto;You can center block elements horizontally.
嵌套崩塌: When two boxes are nested, setting a margin for the subclass will cause a collapse phenomenon for the parent class. The margin-top of the subclass element has no effect, but directly affects the parent class element.

解决方案：
1. 父类 overflow: hidden;
2. 父类 设置极小的 padding 或者 border；

margin重叠: If margin-bottom and margin-top are set at the same time for two block elements in the vertical direction, these two values will overlap and will not accumulate. Which value is larger will be used.

Picture and text alignment problem

Solve the alignment of the block elements and text in the line
1. The default alignment is along the baseline
2. middle, top, bottom
3. Use numerical adjustments according to the actual situation

 vertical-align: -8px;

Gaps caused by line breaks

1. No line
breaks 2. Word-spacing, pictures can use letter-spacing
3. First set the character size of the parent element to font-size: 0;, and then set the child element.

CSS-02