Table of contents
1.3 Generate rounded rectangle
2.Chrome debugging tools--View CSS properties
3.2 Inline elements/inline elements
3.3 The difference between inline elements and block-level elements
5.2 The frame will hold up the box
1.Rounded rectangle
Use border-radius to make the border rounded.
1.1 Basic usage
border-radius: length;length is the radius of the inscribed circle. The larger the value, the stronger the arc.
<div>蛤蛤</div>
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 10px;
}1.2 Generate a circle
Just let the value of border-radius be half the width of the square.
div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
/* 或者用 50% 表示宽度的一半 */
border-radius: 50%;
}1.3 Generate rounded rectangle
Let the value of border-radius be half the height of the rectangle
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}1.4 Expand writing method
border-radius is a compound writing method. In fact, it can be set separately for the four corners.
border-radius:2em;Equivalent to
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;border-radius: 10px 20px 30px 40px;Equivalent to (arranged clockwise)
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;2.Chrome debugging tools--View CSS properties
2.1 Open the browser
There are two ways to open the Chrome debugging tool
Press the F12 key directly
Right-click the page => Inspect the element
2.2 Tag page meaning
elements View tag structure
console View console
source View source code + breakpoint debugging
network View before and after End-to-end interaction process
application View some extended functions provided by the browser (local storage, etc.)
Performance, Memory, Security, Lighthouse are not used for the time being, so we will not go into details yet< /span>
2.3 Elements tab usage
ctrl + scroll wheel to zoom, ctrl + 0 to restore the original size.
Use the arrow in the upper left corner to select the element
You can view the properties of the current element on the right , including introduced classes.
On the right side, you can modify the css attributes of the selected element. For example, for color, you can click the color icon to bring up the color selector and modify the color. For example,
For font size, you can use the arrow keys to fine-tune the value.
The modification here will not affect the code, and it will be restored by refreshing~
If the CSS style is written incorrectly , there will also be a prompt here. (yellow exclamation mark)
3. Display mode of elements
In CSS, there are many display modes for HTML tags.
Here we only focus on two:
Block-level elements
Inline elements
3.1 Block-level elements
Common elements:
h1 - h6
p
div
ul
ol
li
...Features:
Exclusive row
Height, width, inner and outer margins, and line height can all be controlled.
The width defaults to 100% of the width of the parent element (same width as the parent element)
It is a container (box), which can contain line and block-level elements.
<style>
.demo1 .parent {
width: 500px;
height: 500px;
background-color: green;
}
.demo1 .child {
/* 不写 width, 默认和父元素一样宽 */
/* 不写 height, 默认为 0 (看不到了) */
height: 200px;
background-color: red;
}
</style>
<div class="demo1">
<div class="parent">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
</div>
</div>Note:
Block-level elements cannot be used within text elements
The p tag is mainly used to store text, and block-level elements cannot be placed inside. Especially div
<body>
<p>
<div>蛤蛤</div>
</p>
</body>3.2 Inline elements/inline elements
Common elements:
a
strong
b
em
i
del
s
ins
u
span
...Features:
Does not occupy one line, one line can display multiple ones
Setting height, width, row height is invalid
The left and right outer margins are valid (the top and bottom margins are invalid). The inner margins are valid.
The default width is its own content
Inline elements can only accommodate text and other inline elements. Block-level elements cannot be placed
<style>
.demo2 span {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="demo2">
<span>child1</span>
<span>child2</span>
<span>child3</span>
</div>Note:
The a tag cannot be placed in the a tag (although chrome does not report an error, but it is best not to do this).
a tag Block-level elements can be placed, but it is recommended to convert a into a block-level element first.
3.3 The difference between inline elements and block-level elements
Block-level elements occupy one line exclusively, and inline elements do not.
Block-level elements can set width and height, but inline elements cannot set width and height.
Block The inner and outer margins can be set in all four directions of level elements, but the vertical direction of inline elements cannot be set.
3.4 Change display mode
Use the display attribute to modify the display mode of the element.
You can turn div, etc. into inline elements, or you can turn a, span, etc. into block-level elements.
display: block Change to block-level elements [commonly used]
display: inline Change to inline elements [rarely used]
display: inline- block is changed to an inline block element
4. Box model
Each HTML element is equivalent to a rectangular "box"
This box is composed of these parts
Border a>
content
inner margin padding
outer margin
5. Border
5.1 Basic attributes
Thickness: border-width
Style: border-style, no border by default. solid solid border dashed dotted border dotted border
color : border-color
<div>test</div>
div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}Supports abbreviations, no order required
border: 1px solid red;You can change any border in four directions.
border-top/bottom/left/rightThe following code only sets the upper border to red, and the rest to blue.
Taking advantage of the cascading nature, the proximity principle takes effect.
border: 1px solid blue;
border-top: red;5.2 The frame will hold up the box
As you can see, the width and height are 500*250, and the final size of the entire box is 520 * 270. The border of 10 pixels is equivalent to enlarging the size
When buying a house:
Building area = area in the apartment + public room interview (elevator room)
Area in the apartment = usable area + wall occupation space
The blue area is the "usable area", and the green area is the "inside area"
The behavior of the browser can be modified through the box-sizing attribute so that the border no longer stretches the box.
* is a wildcard selector.
* {
box-sizing: border-box;
}