Classification of element types:
block element, inline element, inline-block element
1. The use of block elements: block-level elements, block elements, block elements
1. Common block elements: div, p, h, ul>li, ol>li
2. Common features of block-level elements
-block-level elements can Directly set the width and height size, which is usually displayed in the browser in the form of a box
- block-level elements are on a single line by default, and will be arranged up and down
- in order to nest other tags or other element types as boxes to achieve web page layout
2. The use of inline elements: inline elements, inline elements
1. Common inline elements: a, span, i, em, b, strong
2. Common characteristics of inline elements
- inline elements cannot directly set the width and height, width and height Expanded by the text content
- inline elements are displayed one by one in a line by default
- common bug: setting the margin value in the vertical direction has no effect
3. The use of inline block elements: the third type of element type is called variable element according to the css display classification (display according to the relationship of the context)
1. Common inline block elements: input, img
2. Common inline block elements Features
- You can directly set the width and height => block-level elements
- can be displayed one by one in a line => in-line elements
- have the common feature of setting the width and height of block-level elements and displaying in-line elements in one line
3. Question: All in-line elements The blocks will be aligned with the baseline (virtual line)
4. Solution: vertical-align: top\bottom\middle
Conversion of element types
Conversion of element types
1. Attribute: display (display mode)
2. Attribute value: There are 19 official attribute values, commonly used are only two or three
- block blocks, and other element types are converted into block-level elements to make them have block Features of level elements (a=>block level)
- inline , convert other element types to inline elements, so that it has the characteristics of inline elements
- inline-block , convert other element types into inline block elements, Make it have the characteristics of inline block elements-
list-item understands list items (ordered and unordered) and converts them into block-level
elements
. The element can be separated from the document flow, and the element type is converted to an inline block element by default.
4. Key point: block means that the block level can also display the function and none to form a pair of applications.
5. Summarize the usage of none
- border: none clear border
- list- style:none clear list style
- text-decoration:none clear underline
- display:none hide display elements
- background:none clear background
- outline:none click on the display style of the text box
- float:none does not float
Dynamic pseudo-class selector
Common usage of hover: Indicates the effect triggered when the mouse moves into the hover
1. Change your own state Self selector: hover{}
2. Change the state of the child through the parent Parent selector: hover Child selector {}
3 .Change the state of the next sibling element through siblings Brother selector: hover + an adjacent sibling selector {}
4. Change the state of all subsequent sibling elements through siblings Brother selector: hover ~adjacent to all sibling selectors {}
Mouse over hover case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div:hover p{
color: green;
}
h1:hover ~span{
color: red
}
</style>
</head>
<body>
<div>
爷爷
<p>父亲</p>
</div>
<h1>自己</h1>
<span>弟弟</span>
<span>弟弟</span>
<span>弟弟</span>
<span>弟弟</span>
<span>弟弟</span>
</body>
</html>Effect:
vertical alignment property
The picture is centered to display the case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 500px;
height: 700px;
border: 1px solid #000;
margin: 100px auto;
text-align: center
}
span{
display: inline-block;
width: 0;
height: 100%;
/* background: red; */
}
img,span{
vertical-align: middle
}
</style>
</head>
<body>
<div>
<img src="https://pic1.zhimg.com/v2-7c5b04b5c4114958d01b6484cc1fab54_b.gif" alt=""><span></span>
</div>
</body>
</html>
<!--
实现img结构居中对齐
1.在父级元素上设置text-align:center控制图片水平方向居中
2.在img后面设置任意标签(不要有换行)
3.给标签转换成行内块元素(宽度为0 高度为100%)
4.将图片和辅助线都设置居中对齐 vertical-align:middle
-->Renderings:
