CSS
- Pseudo-class
CSS pseudo-class is specifically used to represent a special state of the label. When we need to style the label in a special state, we can use the pseudo-class.
grammar:
：link <!--表示普通的链接(没访问过的链接)-->
：visited <!--表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
使用visited伪类只能设置字体的颜色-->
：hover <!--表示鼠标移入的状态-->
：active <!--表示的是被点击的状态-->
：focus <!--向拥有键盘输入焦点的标签添加样式-->
Note: visited before: hover
: active must be placed after: hover to be effective
: hover and active can also be set for other tags
-
Transparency
The attribute that defines the transparency effect is opacity. The
opacity attribute sets the opacity level of the label to 1.
Specify opacity: from 0.0 (completely transparent) to 1.0 (completely opaque). -
Block-level, row-level, row-level block label
Etc.
Block-level label : No matter how much content it will occupy a row alone.
For example
Default width: parent tag is consistent with
the default high: 0 highly consistent with the content or
row-level tag : a tag only their size, not on a separate line
, even if the width and height are also set invalid
, for example,
row-level block Tags : you can set the size, not Will occupy a single line.
Note : Generally use block-level tags to include row-level tags, and do not use row-level tags to include block-level tags.
a can contain any label, not including a itself.
The p tag cannot contain any block tags.
display label : the type of label can be changed.
display: inline is set as a line-level label.
display: block is set to block-level label.
display: inline-block is set to the line-level block label.
display: none Let the tags disappear from the web page, do not occupy the space of the web page
div tags
Block-level tags, you can place any tags
There is no attachment function, what attributes are given,
Mainly used for web page layout
span tags
Row-level tags
do not have any Additional functions, what attributes are given,
are mainly used to select text in the document -
Box model
content area The area
where content is placed in the box, that is, the text content in the label, and the sub-labels all exist in the content area.
If the inner margin and border are not set for the label, the default content area size is the same as the box size.
The size of the content area can be set through the width and height properties instead of the size of the entire box.
The width and height attributes only apply to block tags (including row-level block tags).
If the inner margin and border of the label are not available, the size of the content area is the size of the label.
Inner margin
The space within the border of the label content area.
The inner margin will affect the size of the entire box.
Use the padding property to set the inner margin of the label.
The padding is set in the order of top (top), right (right), bottom (bottom), and left (left).
Border
The outermost frame of the label.
You can use the border property to set the border of the box:
border: 1px red solid; the
upper style specifies the width, color and style of the border respectively.
You can also use border-top/left/right/bottom to specify the four directions of upper right, lower left, Border.
The border can be set style: dotted (dotted line) dashed (dashed line) solid (solid line) double (double line) groove (groove line)
border-radius: refers to the four corners are rounded borders.
Actual label size: content area + inner margin + border
outer margin
The space between the label border and the surrounding label.
Use the margin attribute to set the outer margin.
margin-top/right/bottom/left. The
margin values in the four directions can be negative.
The value of margin can also be auto. Set the outer margin to the maximum value. When the left and right margins are set to auto, the browser will set the left and right margins to be equal.
When the vertical setting is auto, the value is 0, and all horizontal centering can also be abbreviated as margin:0 auto.
The outer margin will not affect the overall size of the box, but it will affect the position of the box and the actual control range of the box.
Clear the default style of the
browser. In order to have a better display effect when there is no style in the page, the browser has set some default margin and padding for many tags, and these default styles are normal. We don’t need to use it.
All we often need to remove the default margin and padding in the browser before writing styles.
*{
margin：0；
padding:0;
}
- Document flow
refers to the position occupied by the tags in the document when they are arranged. Divide the form into rows from top to bottom, and arrange the labels from left to right in each row, which is the document flow.
It is the default order of the tags in the web page.
Floating The
so-called floating refers to the label being separated from the original document flow and floating in the parent label.
Float uses the float attribute.
Optional values:
none: no floating
left: floating to the left
right: floating to the right
Both block-level labels and row-level labels can be floated. When a row-level label floats, it will automatically become a block-level label. When a block-level label floats, the width will default to the width of the content. When a block-level label floats, we will assign a width to it.
The problem: the height collapsed, and the floating element did not open the parent label.
Solution: 1. Set the height to open the parent label.
2. Clearing the floating effect will automatically expand the parent label to the height of the floating label.
clear: Floating value
e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
float: left;/* 向左浮动 */
background-color: #008000;
width: 100px;
}
#div2{
background-color: #A52A2A;
float: left;
}
span{
float: left;
width: 100px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<span >dawda</span>asdaw
<div style="clear: left;"><!-- 清除左浮动 -->
</div>
</body>
</html>
- Positioning
The basic idea of positioning is very simple. It allows you to define a label relative to its normal position, or relative to the parent label, another label, or even the browser window itself.
Positioning: A reference must be found.
Relative positioning
moves relative to its starting point, and the original position is still occupied after the movement.
position: relative Enable relative positioning.
If no offset is set, the label position will not move.
left/right/bottom/top: The value setting offset
increases one level when it overlaps with other label positions.
Relative positioning does not change the nature of the label.
Absolute positioning
does not occupy space. Labels with absolute positioning will be separated from the original document and float.
No offset is set, and the position remains unchanged.
left/right/bottom/top: Offset setting. Offset
absolute positioning is positioned by the nearest ancestor tag with positioning turned on. If one of these two conditions is not met, the browser window will be used as the reference. Positioning.
Absolute positioning will raise the label one level.
Absolute positioning changes the nature of the label, and row-level labels become block-level labels.
Z-index
sets the stacking order of labels.
If the levels of the positioning labels are the same, the label below will cover the one above.
The z-index attribute can be used to set the label level.
You can specify a positive integer as the value for z-index, and this value will be used as the current label level.
The higher the level, the more priority is displayed.
For labels without opening positioned not use z-index.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: #ffff00;
}
#div2{
width: 100px;
height: 100px;
position: relative;/* 开启相对定位 */
left: 100px;
top: 100px;
background-color: #FFA500;
}
#div3{
width: 100px;
height: 100px;
background-color: #00FFFF;
}
#div4{
width: 200px;
height: 200px;
background-color: #ffff00;
float: left;
position: relative;/* 开启相对定位 */
}
#div5{
width: 100px;
height: 100px;
position: absolute;/* 开启绝对定位 */
left: 100px;
background-color: #FFA500;
float: left;
}
#div6{
width: 100px;
height: 100px;
background-color: #00FFFF;
float: left;
}
#span1{
position: absolute;/* 开启绝对定位 */
background-color: aquamarine;
top: 10px;
}
#div7{
width: 100px;
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
<div id="div3">
div3
</div>
<div id="div4">
div4
<div id="div5">
div5
</div>
</div>
<div id="div6">
div6
</div>
<span id="span1">
span
</span>
<div id="div7">
div7
</div>
</body>
</html>
