CSS basic syntax, selectors, common element attributes, box model, flexible layout

1. What is CSS

• HTML only describes the skeleton structure and content of the page. CSS can be used to describe the style of the page and further beautify the page.

• Cascading Style Sheets (Cascading Style Sheets)
  CSS can perform pixel-level precise control over the layout of element positions in web pages, achieve the effect of beautifying the page, and can separate the style and structure of the page.

• Specifically, it describes the elements of any web page, such as size/position/font/color/background/border...
  Introducing CSS can make a page look good. CSS is not so much a technology as it is "art"

---

2. CSS syntax

1. CSS basic syntax specifications

Each CSS statement contains two parts: selector + applied attributes

• The selector determines for whom to modify
• Decide what to modify
• {}Inside is a key-value pair structure, which represents various attributes in CSS.
  • The declared attributes are key-value pairs . Use ;to distinguish key-value pairs and use :to distinguish keys and values.
  • It is customary for each key-value pair to be on its own line, and it is customary to add a space after the colon.
  • Each key-value pair corresponds to a CSS property
• CSS used /* */as comments (use ctrl + / to quickly switch), not supported//

<style>
	p {
    
    
		/* 设置字体颜色 */
		color: red;
		/* 设置字体大小 */
		font-size: 30px;
	}
</style>

<p>hello</p>

p is the selector, here it means selecting all p tags in the page

CSS code can be placed in HTML files (usually placed stylein tags), and styletags can be placed anywhere in html

---

2. How to introduce CSS

2.1. Internal style sheet

Write it in the style tag and embed it inside the html.
Theoretically, the style can be placed anywhere in the html, but it is usually placed in the head tag.

Advantages : This can separate the style and page structure.
Disadvantages : The separation is not thorough enough, especially when there is a lot of css content.

The code written earlier mainly uses this method, which is not commonly used
in actual development . PS: This method of writing is still retained in Sogou search.

---

2.2. Inline style sheet/inline style

• Specify the style of a certain tag through the style attribute

• It is only suitable for writing simple styles and only takes effect for a certain tag.
  Disadvantages : You cannot write too complex styles, which will appear messy.

• This kind of inline style is a relatively special usage (usually used with JS). The inline style only takes effect on the current element.

  (No need to write selectors, no need to write {}, just write CSS properties and values ​​directly)

<p style="color: red;">test</p>
<p>test</p> <!-- 不会受影响 --> 

This writing method has a higher priority and will override other styles.

red color is overridden:

<style>
	div {
    
    
		color: red;
	}
</style>

<div style="color:green">想要生活过的去, 头上总得带点绿</div>

---

2.3. External style

The most commonly used method in actual development

1. Extract the CSS code separately and put it into a .cssfile
2. Then in the html code, introduce the CSS file through the link tag

In this way, multiple HTML can reuse the same style.
For example, when writing a website, there may be many pages in the website, and the styles of these pages are similar.

Note: Don’t forget to call the CSS in the link tag , otherwise it will not take effect.
This writing method is similar to defining a method in Java. Not only must it be defined, but it must also be called.

1. Create style.css:

p {
    
    
    color : rgb(8, 147, 240);
}

2. Use the link tag to introduce css:

<link rel="stylesheet" href="style.css"> <!-- 在 head 中 -->

This kind of link tag is generally placed in the head tag of html . This tag can exist in multiple copies (different css are introduced through multiple links)

At the same time, the developer tools will also remind us which css this style was introduced into . 2 is the line number.

• Advantages : style and structure are completely separated
• Disadvantages : Affected by browser cache, modification may not take effect immediately.
• About caching:
  • This is a common technical means to improve performance in computers.
  • The resources that web pages rely on (images/CSS/JS, etc.) are usually obtained from the server. If the website is visited frequently, then there is no need to repeatedly obtain these external resources from the server, and they can be stored in cache (that is, stored locally). disk), thereby improving access efficiency
  • You can force refresh the page through ctrl + F5 to force the browser to re-obtain the css file.

The most commonly used style in work is external style. What we study here mainly uses the form of internal style style tag, because style is relatively simple.

---

3. Code style

• compact style
• Expand style (recommended)

Although it is more friendly to programmers, the overall CSS file will become larger because the CSS file is transmitted to the browser through the network and then parsed by the browser. If the CSS file becomes larger, it will become larger
. It consumes network bandwidth, thus affecting efficiency.
Therefore, when looking at other websites through developer tools, their CSS is generally in this compact style. During the code development stage, we actually use a loose line-breaking style. In fact
, through Third-party tools automatically replace (front-end packaging tools)

This is not only true for CSS, but also for JS, which is even more insane (JS will not only remove indentation and line breaks, but will also replace long variable names with short names like abcd)

---

4. Style case

HTML and CSS are not case-sensitive . It is customary to use lowercase when writing code ~~

Because they all use lowercase, there is no "camel case" in CSS.
CSS usually uses "spine case" and uses –to separate words.

Spine nomenclature is not common in daily development. Most programming languages ​​do not allow the use of -symbols in variable names (to prevent confusion with the minus sign/symbol),
but CSS cannot perform operations or express logic... so it is -quite in empty space

Space specification:

• Space after colon
• There is also a space between the selector and {

---

3. Selector

Selector functions:

• Select the specified label element in the page

Select the element first before you can set the element's attributes.
Just like in games like SC2 and War3, you need to select the unit first and then command the unit to act.

CSS Selectors Reference Manual

CSS Selectors Reference Manual

Types of selectors:

• The following content is only the selectors supported in the CSS2 standard. Some additions have been made in CSS3, which we will talk about later.

1. Basic selector : composed of a single selector

• tag selector
• class selector
• id selector
• wildcard selector

2. Compound selector : Comprehensive use of multiple basic selectors.

• descendant selector
• child selector
• Union selector
• Pseudo class selector

There are many types of selectors in CSS

---

1. Basic selector

1.1. Tag selector

Features:

• Can quickly select tags of the same type, but cannot select differentially

Will take effect for all p

<style>
	div {
     
     
		color: red;
	}
</style>  

---

1.2. Class selector

Features:

• Differentiation represents different tags,
  allowing multiple tags to use the same tag

Syntax details:

• Class names . start with
• The tag below uses the class attribute to call
• A class can be used by multiple tags, and a tag can also use multiple classes ( multiple class names should be separated by spaces , which can make code reusable)
• If it is a long class name, you can use -split
• Do not use pure numbers, Chinese characters, or tag names to name classes

Through class selectors, you can select any desired elements as you like (theoretically, as long as you have this selector, it is enough)

Code example : First, you need to create a class name in the CSS code.
In the corresponding html element, reference this class name through the class attribute . At this time, elements with this class name will have the relevant CSS attributes applied to them.

<body>
    <style>
        /* . 开头的就是 CSS 中的类名 */
        .green {
     
     
            color: green;
            font-size: 20px;
        }
    </style>

    <!-- 使用 class属性引入的时候，不需要写 . -->
    <p class="green">hello C</p>
    <p class="green">hello Java</p>
    <p>hello C++</p>
    <p>Python</p>
</body>

Code example : Using multiple class names

<body>
    <style>
        .box {
     
     
        width: 200px;
        height: 150px;
        }
        .red {
     
     
        background-color: red;
        }
        .green {
     
     
        background-color: green;
        }
    </style>
    
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

Although class selectors can already do it all, in order to make it easier to write code, many other selectors have been introduced.
This is similar to having a CPU and a GPU.

---

1.3. id selector

• Use the beginning to indicate the id selector in CSS#
• First, set an id attribute for the selected element . The value of the id selector is the same as the id value of an element in html.
• The element ID of html does not need to contain #
• The id is unique and cannot be used by multiple tags . The id selector can only select one element, not multiple (the biggest difference from the class selector)

	<style>
        #cpp {
     
     
            color: red;
        }
    </style>

    <p>hello C</p>
    <p>hello Java</p>
    <p id="cpp">hello C++</p>
    <p>Python</p>

---

1.4. Wildcard selector

Use *the definition of to select all tags on the page without being called by the page structure.

* {
    
    
	color: black;
}

The biggest use is to cancel the browser's default style . Different browsers have different default styles.

Browser default style:

Chrome: The default font size in the p tag is 14px, with 16px top and bottom margins by default. This may not be the case in other browsers.

Therefore, when doing front-end development, our pages are required not to rely on the default style.

Commonly used writing methods:

* {
    
    
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

Summary of basic selectors:

	effect	Features
tag selector	Can select all the same tags	Cannot choose differentially
class selector	Ability to select one or more tags	Choose according to your needs, the most flexible and commonly used.
id selector	Can select a label	The same id can only appear once in one HTML
wildcard selector	Select all tags	Used in special circumstances

---

2. Compound selector

2.1. Descendant selector

Also called an inclusion selector, through the combination of multiple selectors, child/grandchild elements (descendant elements) in an element can be selected.

Element 1 is the parent and element 2 is the child. Only element 2 is selected and element 1 is not affected.

选择器1 选择器2 {样式声明}

1), there must be a space in the middle

• If there is a space ul.name: Look for an element with class name in the ul tag. If
  there is no space ul.name: Look for an element with class ul and name.

2), Selectors 1 and ⒉ can both be tag selectors/class selectors/id selectors

Code example : change the color of li in ul without affecting ol

	<style>
        ul li {
     
     
            color: red;
        }
    </style>

    <ul>
        <li>test</li> <!-- 针对 ul-->
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ol>

	<style>
        ul .name {
     
     
            color: red; /* 对 ul 的第一个 li */
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

Code example : Element 2 does not have to be a son, it can also be a grandson

	<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>

		ul li a {
    
    
            color: red;
        }
        或者
        ul a {
    
    
            color: red;
        }

Code example : Can be any combination of basic selectors (including class selectors, id selectors)

<ol class="one">
	<li>ddd</li>
	<li>eee</li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
</ol>	

.one li a {
    
    
	color: green;
}

---

2.2. Sub-selector

• Similar to the descendant selector, but only child tags can be selected , only biological children are selected, and grandson elements are not selected.
• Separate using the greater than sign,

选择器1>选择器2 { 样式声明 }

Example 1 : For the first li in ul, same as descendant selector

	<style>
        ul>.name {
     
     
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

Example 2 : Differences from descendant selectors

Descendants: Both links 1 and 2 can be selected

	<style>
        ul a {
     
     
            color: red;
        }
    </style>

    <div class="two">
		<a href="#">链接1</a>
		<p><a href="#">链接2</a></p>
	</div>

Child selector: If changed to ul>a, only link 1 will be selected, because the child selector cannot select grandchild elements.

	<style>
        ul>a {
    
    
            color: red;
        }
    </style>

practise:

1. Change the "kitten" in the following code to red

<div class="cat">
	<ul>
		<li><a href="#">小猫</a></li>
		<li><a href="#">小猫</a></li>
		<li><a href="#">小猫</a></li>
	</ul>
</div>

CSS:

.cat ul li a {
    
    
	color: red;
}

2. Change the "kitten" in the following code to red

<div class="cat">
	<a href="#">小猫</a>
	<ul>
		<li><a href="#">小狗</a></li>
		<li><a href="#">小狗</a></li>
	</ul>
</div>

Use Emmet shortcut keys to generate the above html code: .cat>a+ul>li*2>a

CSS:

.cat>a {
    
    
	color: red;
}

---

2.3. Union selector

• Write multiple selectors in parallel, separated by commas .
• In the union selector here, you can write simple selectors or compound selectors.
• It is recommended to write the union selector vertically, with each selector occupying one line (the last selector cannot contain a comma)

元素1, 元素2 { 样式声明 }Indicates that element 1 and element 2 are selected at the same time

Example : select ul and ol, but do not include the a tag

	<style>
        ul>li,
        ol>li>a {
     
     
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ol>

---

2.4. Pseudo-class selector

1), link pseudo-class selector

• a:linkSelect unvisited links
• a:visitedSelect a link that has already been visited
• a:hoverSelect link on mouse pointer hover
• a:activeSelect the active link (the mouse is pressed but does not pop up)

Demonstrate hover and active:

	<style>
        div {
     
     
            color: red;
        }

        /* 鼠标悬停的时候 应用这个样式： */
        div:hover {
     
     
            color: gold;
        }

        /* 鼠标按下的时候，应用这个样式： */
        div:active {
     
     
            color: green;
            font-size: 20px;
        }
    </style>

    <div>这是一个 div</div>

Demo link and visited:

How to restore a visited link to an unvisited state?
Just clear the browser history. ctrl + shift + delete

		a:link {
    
    
            color: black;
            /* 去掉 a 标签的下划线 */
            text-decoration: none;
        } 
        a:visited {
    
    
            color: green;
        }
        a:hover {
    
    
            color: red;
        }
        a:active {
    
    
            color: blue;
        }

		<a href="#">小猫</a>

Precautions:

• Writing according to the order of LVHA, for example, bringing active to the front will cause active to become invalid. Memory rules "greening"
• The browser's a tag has a default style, and generally actual development requires a separate style.
• In actual development, we mainly make a style for the link, and then make a style for the hover. Link, visited, and active are not used much.

a {
    
    
	color: black;
} 
a:hover {
    
    
	color: red;
}

2), force pseudo-class selector

Select the input form element that has the focus

<div class="three">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
</div>

.three>input:focus {
    
    
	color: red;
}

The font of the selected form will turn red.

Summary of compound selectors:

Selector	effect	Precautions
descendant selector	Select descendant elements	Can be a grandchild element
child selector	Select child elements	You can only choose your biological son, not your grandson.
Union selector	Select elements of the same style	Better code reuse
Link pseudo-class selector	Select links with different statuses	Focus on mastering how to write a:hover.
:focuse pseudo-class selector	Select selected elements	Focus on mastering input:focus

---

4. Common element attributes

Reference documentation:

CSS Selectors Reference Manual

MDN documentation

1. font-family font-family
2. font-size
3. font-weight
4. Font style font-style text is slanted, mainly use this thing to cancel the slant

---

1. Font attributes

1.1. Set font:

• Use commas to separate multiple fonts ( search for fonts from left to right , if none are found, the default font will be used)
• If the font name has spaces, use quotation marks.
• It is recommended to use common fonts, otherwise the compatibility will be poor

	<style>
        .one {
    
    
            font-family: "Microsoft YaHei";
        }

        .two {
    
    
            font-family: "宋体";
        }
    </style>

    <div class="one">
        it is well
    </div>
    <div class="two">
        it is well
    </div>

When setting the font, you need to ensure that the font you set exists on the other party's machine . The system itself comes with some fonts by default. There may also be some additional third-party fonts. If you want to use these third-party fonts, you have to make sure they are available on the other party's machine.

You can also load font files from the networklink through the attribute in html

---

1.2. Size:

• Different browsers have different default font sizes. It is best to give a clear value (chrome defaults to 16px)
• You can use font-size for the body tag
• Pay attention to the unit px and don’t forget
• Title tags need to be individually sized
• NOTE : This actually sets the height of the character boxes in the font; the actual character glyph may be taller or shorter than these boxes

p {
    
    
	font-size: 20px;
}

---

1.3. Thickness:

• You can use numbers or words to indicate thickness.
• 700 == bold, 400 is not bold, == normal
• The value range is 100 -> 900

p {
    
    
	font-weight: bold;
	font-weight: 700;
}

---

1.4. Text style:

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

I rarely make a text italic, but I often change the em/ ilabel to not italic.

---

2. Text attributes

2.1. Text color:

RGB：

• Our display is made up of many, many "pixels". Each pixel is regarded as a point, and this point can reflect a specific color.

• We use R (red), G (green), B (blue) to represent color** (the three primary colors of light and color**). When the three colors are matched in different proportions , various colorful effects can be mixed.

• In the computer, the three components of R, G, and B are represented by one byte respectively (8 bits, the range of representation is 0-255, and the hexadecimal representation is 00-FF).

• The larger the value, the darker the color of the component. 255, 255, 255 means white; 0, 0, 0 means black.

Set text color:

Hover the mouse over the color of vscode, a color selector will appear, and you can manually adjust the color

• color: red;

• color: #ff0000;

  • The color is expressed in hexadecimal form. If two pairs are the same, they can be represented by one #ff00ff =>#f0f

• color: rgb(255, 0, 0);

  • You can use the color picker that comes with QQ screenshots to view the RGB value of each color.

• rgba has one more component, alpha represents transparency

---

2.2. Text alignment:

• Control the horizontal alignment of text
• Not only can you control text alignment, but you can also control pictures and other elements to be centered or to the right.
• text-align: [值];
  • center: center alignment
  • left: left aligned
  • right: right aligned

	<style>
        .one {
    
    
            text-align: left;
        }

        .two {
    
    
            text-align: center;
        }

        .three {
    
    
            text-align: right;
        }
    </style>

    <div class="one">这是一段话</div>
    <div class="two">这是一段话</div>
    <div class="three">这是一段话</div>

---

2.3. Text decoration

text-decoration: [值];Commonly used values

• underlineUnderline. [Commonly used]
• noneNothing. You can remove the underline from the a tag.
• overlineOverline. [Not commonly used]
• line-throughStrikethrough [not commonly used]

	<style>
        .text-decorate>a {
    
    
            text-decoration: none;
        }
        .text-decorate>.one {
    
    
            text-decoration: none;
        }
        .text-decorate>.two {
    
    
            text-decoration: underline;
        }
        .text-decorate>.three {
    
    
            text-decoration: overline;
        }
        .text-decorate>.four {
    
    
            text-decoration: line-through;
        }
    </style>

    <div class="text-decorate">
        <a href="#">链接去下划线</a>
        <p class="one">啥都没有</p>
        <p class="two">下划线</p>
        <p class="three">上划线</p>
        <p class="four">删除线</p>
    </div>

In the html tag, underline and strikethrough can be set, which can also be achieved through CSS. Underline/strikethrough itself is used
as a style, implemented based on CSS, and is a more reasonable
text decoration. The most common usage It does not mean adding underline/strikethrough to the element, but removing the existing underline/strikethrough , typically for the a tag.

For example, the navigation link here at Station B is underlined using this attribute. [Can be observed with F12]

---

2.4. Text indentation

• Controls the indentation of the first line of a paragraph (other lines are not affected)
• text-indent: [值];
  • Units can use pxorem
  • emIndicates relative units. 1 em is relative to the text size of the current element.
    Em units are very useful. In some cases, the page allows users to modify the font size.
  • The indentation can be negative, which means indenting to the left (which will cause the text to pop out)

	<style>
        .text-indent .one {
     
     
            /* text-indent: 20px; */
            text-indent: 2em;
        }

        .text-indent .two {
     
     
            text-indent: -2em;
        }
    </style>

    <div class="text-indent">
        <!-- div.one -->
        <div class="one">正向缩进</div>
        <div class="two">反向缩进</div>
    </div>

---

2.5, line height

Line height refers to the baseline distance between context lines

Displaying text in HTML involves these baselines:

• Top line
• center line
• Baseline (equivalent to the penultimate line of the English four-line grid)
• bottom line

Content area: the area wrapped by the bottom line and the top line, that is, the dark gray background area in the picture below

In fact, the distance between baselines = the distance between top lines = the distance between bottom lines = the distance between center lines

line-height: [值];

	<style>
        .two {
     
     
            line-height: 50px;
        }
    </style>

    <div class="one">上一行</div>
    <div class="two">中间行</div>
    <div class="three">下一行</div>

Note 1 : Line height = top margin + bottom margin + font size

The top and bottom margins are equal. The font size here is 16px, the line height is 40px, and the top and bottom margins are 12px respectively.

	<style>
        .line-height .one {
     
     
            line-height: 40px;
            font-size: 16px;
        }
    </style>
    
    <div class="line-height">
        <div>上一行</div>
        <div class="one">中间行</div>
        <div>下一行</div>
    </div>

Note 2 : The row height can also be equal to normal.

This depends on the browser implementation. Normal on Chrome is 21 px.

Note 3 : The line height and element height can be used to align the text in the center.

• Line height is actually the distance between two lines of text, top line and top line (at the same time, this distance is also the distance from the bottom line to the bottom line, the distance from the center line to the center line, and the distance from the baseline to the baseline)
• When setting the row height, it will actually affect both the upper and lower directions at the same time. The upper and lower margins are equal.
• Because the line height is equal up and down, you can center the text vertically based on the line height.
  If the element height is 150px, you only need to set the line height to 150px for the text inside to achieve the effect of vertically centering the text.

	<style>
        div {
     
     
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color:coral;
            
            /* 居中对齐 */
            text-align: center;
            /* 垂直居中 */
            line-height: 150px;
        }
    </style>

    <div class="one">文本垂直居中</div>

---

3. Background attributes

3.1. Background color

background-color: [指定颜色]

• English vocabulary
• rgb
• #Hexadecimal numbers
• rgba
• transparent The background is transparent (the background of the parent element is applied). The default is transparent and can be modified by setting the color.

	<style>
        body {
     
     
            background-color: grey; /* 针对 body */
        }
        .bgc .one {
     
     
            background-color: red;
        }
        .bgc .two {
     
     
            background-color: #0f0;
        }
        .bgc .three {
     
     
            /* 背景透明 */
            background-color: transparent; /* 引用父元素的 grey */
        }
    </style>
        <div class="bgc">
        <div class="one">红色背景</div>
        <div class="two">绿色背景</div>
        <div class="three">透明背景</div>
    </div>

---

3.2. Background image

background-image: url(...);

More convenient than image to control the position (the position of the picture in the box)

Notice:

1. Don’t miss the url

2. url can be an absolute path or a relative path

3. Quotation marks can be added to the url or not.

Note : After setting the background image, the default is a tile effect, just like laying floor tiles. The image is regarded as a "floor tile" and tiled one by one.

<style>
       div {
     
     
            width: 600px;
            height: 400px;
            color: white;

           background-image: url(flower.jpg);

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

---

3.3. Background tiling

background-repeat: [平铺方式]

Important values:

• repeat: tiling
• no-repeat: no tiling
• repeat-x: Tile horizontally
• `repeat-y```: vertical tiling

The default is repeattile.
The background color and background image can exist at the same time. The background image is above the background color.

	<style>
       div {
     
     
            width: 600px;
            height: 400px;
            color: green;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

---

3.4. Background position

background-position: x y;

Modify the position of the image

Parameters come in three flavors:

1. Positional nouns: (top, left, right, bottom)
   • If you just use px as the unit, it is not easy to achieve. To achieve the effect of "centering" the background image, you can also set it to a percentage.
2. Precise unit: coordinate or percentage (with the upper left corner as the origin)
3. Mixed units: Contains both locative nouns and precise units

About the coordinate system:

In computers, the plane rectangular coordinate system (Cartesian coordinate system) is often used to express position. The plane coordinate system in computers is generally a left-handed coordinate system (different from the right-handed system commonly used in high school mathematics, the y-axis is pointing downward)

<style>
       div {
     
     
            width: 600px;
            height: 400px;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;
           /* background-position: 0 0; 左上角 */
            background-position: 100px, 100px; /* 往左往下 */

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

Note:
If both values ​​of the parameter are directional nouns, the order does not matter. (top left and left top are equivalent)
If only one directional noun is specified, the second one will be centered by default. (left means horizontally centered, top means vertically centered.)
If the parameters are exact values, then the first one must be x and the second one must be y. (100 200 means x is 100 and y is 200)
If the parameters are exact values, and If only one value is given, the value must be the x coordinate, and the other default vertical center.
If the parameter is a mixed unit, the first value must be the x coordinate, and the second value must be the y coordinate (100 center means the abscissa is 100 , vertically
centered)

---

3.5. Background size

ackground-size: 值1, 值2;

• Specific values : For example, 40px 60px means the width is 40px and the height is 60px.
• Percentage : Set according to the size of the parent element
• Special words : length|percentage|cover|contain
  • cover: The background image adapts to the size of the element, filling the background image to a large enough size so that the background image completely covers the background area. Some parts of the background image may not be displayed in the background anchor area.
  • contain: Part of the background color may leak out. Just stretch the image to the size of the element and end it. Ensure that the background image is always within the element.

---

4. Rounded rectangle

Elements in HTML are rectangular by default. Like app logos on mobile phones, they all have rounded corners.

In CSS, border-radius is used to make the border have a rounded effect
border-radius: length; - length is the radius of the inscribed circle. The larger the value, the stronger the line.

4.1. Rectangle with a little arc

	<style>
        div {
     
     
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;

            border-radius: 10px;
        }
    </style>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, repudiandae enim!</div>

---

4.2. Generate a circle

If you want to get a circle , you can also set it through the same attribute. First, you need to have a square . Assume that the width of the square is 200px. At this time, set the border-radius value to 100px (half the width)

In addition to writing numbers directly, you can also write 50%, which has the same effect (50% is calculated based on the width)

	<style>
        div {
     
     
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            color: blue;    
            text-align: center;
            line-height: 200px;

			/* 正方形宽度的一半 */
            /* border-radius: 100px; */
            border-radius: 50%;
        }
    </style>

    <div>Lorem ipsum dolor</div>

---

4.3. Generate rounded rectangle

	<style>
        div {
     
     
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;
            text-align: center;
            line-height: 100px;

            border: 2px solid rgb(35, 12, 167);
            border-radius: 50px;
        }

    </style>

    <div>Lorem ipsum dolor</div>

---

4.4. Expand writing method

border-radius is a compound writing method, which can actually 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;  

---

5. Chrome Debugging Tools – View CSS Properties

Tag page meaning:

• elements View tag structure
• console view console
• source View source code + breakpoint debugging
• network View the front-end and back-end interaction process
• application View some extensions provided by the browser (local storage, etc.)
• Performance, Memory, Security, Lighthouse are not used for the time being and will not be explored further.

The elements tab uses:

• ctrl + scroll wheel to zoom, ctrl + 0 to restore original size.
• Use the upper left arrow to select an element
• On the right, you can view the properties of the current element, 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 modifications here will not affect the code and will be restored by refreshing
• If the CSS style is written incorrectly, there will also be a prompt here. (yellow exclamation mark)

---

6. Display mode of elements

In CSS, there are many display modes for HTML tags

The key points are these two:

• block-level elements
• inline elements

Block-level elements : occupy one line, can set width and height

div, h1-h6, p, ul, li, table…

Inline elements : do not occupy an exclusive line and cannot set width and height

span, a, em, i...(understood as a text, the final size of the inline element depends on the internal content~)

Inline block elements : do not occupy a single line, and can set the width and height

input，img

Modify the display mode of elements through display in CSS. A common usage is to change inline elements into block-level elements.

	<style>
        a {
     
     
            width: 500px;
            height: 300px;
        }

    </style>

    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>

	<style>
        a {
     
     
            width: 500px;
            height: 300px;

            display: block; /* 改成块级元素 */
        }

    </style>

    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>

Display is a special option. noneThe elements are not displayed (hidden elements)
. Although the elements here can still be seen in the developer tools, they will not be displayed on the interface.

---

7. Box model

1. Composition

Each HTML element is equivalent to a rectangular "box"

It is equivalent to building a house. The walls of the house are the borders, the distance between the houses is the outer margin, the distance between the furniture and the wall is the inner margin, and the furniture is the content.

This box consists of these parts:

• border border
• content content
• Padding _
• margin _

---

2. border

Example : with border:

	<style>
		div {
     
     
            width: 200px;
            height: 100px;
            border: 2px black solid;
        }

    </style>

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>

Note: Setting a border will expand the original element.

Although it can be expanded, this expansion operation is actually not easy to use (it can easily cause the size of the element to be changed by setting the border, which further affects the page layout)

For example, the page width is 500px, and there are many pictures in it. There are 5 pictures in one line, and each picture is 100px wide. As a result,
a border is added to the picture, which may result in 5 pictures not being displayed in one line.

When buying a house:
Building area = Interview in the apartment + Interview in the common room (elevator room)
Area in the apartment = Used area + Space occupied by the wall.
The blue area is the "used area", and the green area is the "area in the apartment".

In actual development, the more commonly used operation is to set box-sizingthe attribute. For border-box, the border set at this time will squeeze the content instead of expanding the element.

div {
    
    
	width: 200px;
	height: 100px;
	border: 10px black solid;
	box-sizing: border-box;
}

---

Border style:

• Thickness: border-width
• Style: border-style
• solid solid border, dashed dotted border, dotted dotted border
• Color: border-color

div {
    
    
    width: 200px;
	height: 100px;
	border: 10px black dashed;
	box-sizing: border-box;
}

• Supports abbreviations , no order required border: 1px solid red;
• You can change any border in four directions: border-top/bottom/left/right

---

3. Padding and margin

• distance between border and content

• The default content is placed against the border. Use padding to control this distance.
  You can add margins in all four directions.

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

• You can also change any borders in four directions

padding: 5px;

Margins:

• Control the distance between boxes
• You can add margins to all four directions
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

	<style>
        div {
    
    
            width: 200px;
            height: 100px;
            border: 10px black dashed;
            box-sizing: border-box;
            padding: 5px;
        }

        .one {
    
    
            margin-bottom: 10px;
        }
        
    </style>

    <div class="one">这是一个元素</div>
    <div class="two">这是一个元素</div>

.one {
    
    
	margin-bottom: 10px;
}

.two {
    
    
	margin-top: 10px;
}

The margin will "collapse" in the vertical direction. When two elements have margins set, the actual margin is the larger value of the two, rather than the sum . It will not appear in the horizontal direction... (Direct addition...)
This is a special situation caused by historical issues.

---

Horizontal centering of block-level elements:

Based on margin, you can achieve horizontal centering of an element (not horizontal centering of text).
Horizontal centering of text: text-align: center.
Vertical centering of text: line-height == height
element: You can use margin (block-level elements) )
vertical centering of elements: margin is not very good (more on this later)

<style>
	.one {
     
     
            width: 500px;
            height: 200px;
            background-color: orange;
        }
        
        .two {
     
     
            width: 200px;
            height: 200px;
            background-color: green ;
        }
    </style>

    <div class="one">
        <div class="two">
            hello
        </div>
    </div>

Set for two:margin: 0 auto;

Set the horizontal margins to auto (browser adaptive), and you will achieve a horizontal centering effect.

Compound writing:

Padding in multiple directions can be merged together. [Remember the four situations, they are all common]

• padding: 5px; means 5px in all four directions
• padding: 5px 10px; means the top and bottom padding is 5px, and the left and right padding is 10px
• padding: 5px 10px 20px; means the top margin is 5px, the left and right padding is 10px, and the bottom padding is 20px
• padding: 5px 10px 20px 30px; means top 5px, right 10px, bottom 20px, left 30px (clockwise)

---

8. Flexible layout

1、display:flex

Mainly to arrange the position (arrangement) of elements on the page

Most of the attributes introduced earlier are set for the element itself , but there are some elements here that affect the relationship between elements
. The box model (margin) is part of it, but it is not enough.

Flexible layout is to further strengthen this point. The
default web page layout is from top to bottom (block-level elements occupy one row)
. The actual web page not only needs to be from top to bottom, but also from left to right.

	<style>
        .parent {
     
     
            /* 让当前元素的 宽度 和它的父元素一样宽 */
            width: 100%;
            height: 200px;
            background-color: orange;
        }

        .one, .two, .three {
     
     
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

    <div class="parent">
        <div class="ont">test</div>
        <div class="two">test</div>
        <div class="three">test</div>
    </div>

By default, divs are block-level elements and occupy one row . In order to allow these divs to be arranged in a horizontal row, you can use flexible layout
to set an attribute for the parent element .display: flex;

• Flex is the abbreviation of flexible box, which means "flexible box"
• Any html element can be specified as display:flex to complete flexible layout.
• The essence of flex layout is to add the display:flex attribute to the parent box to control the position and arrangement of the child boxes.
• Note : When the parent element is set to display: flex, the float, clear, and vertical-align of the child element will be invalid.

The default layout method is "vertical" layout. If you need "horizontal" layout, you can use flexible layout

---

2. Flex layout

Through flexlayout, you can adjust the way sub-elements are arranged.

By default, these elements are squeezed into the upper left corner

Horizontal arrangement : justify-content(Set the arrangement of sub-elements on the main axis), be sure to determine which direction the main axis is before use

• start arranged to the left
• end Arrange to the right
• center arranged in the center
• space-between allows some equal spacing between elements (automatically calculated by the browser)
• space-around allows some equal spacing between the elements, and there are also gaps on the leftmost and rightmost sides.

Vertical arrangement :align-items

• Note : align-items can only be implemented for single-line elements. If there are multiple lines of elements, you need to use item-contents

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: end;
}

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-between;
}

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-around;
    align-items: end;
}

---

3. Implement a typical page structure based on flexible layout

The three most common operations in flex layout:

• Set to flexible layout display: flex to achieve
• Set up the horizontal arrangement justify-content to achieve this
• Set vertical alignment align-items to achieve this (in flex layout, it is usually arranged row by row, and it does not involve multiple rows).
  Based on the above content, you can achieve some mainstream page layout effects:

To achieve this kind of page layout, not only flexible layout can
be achieved, but also some other implementation methods, such as based on table, such as based on floating, such as based on grid layout...
Grid layout is a relatively new thing, some are slightly older. The browser does not support it
yet. In contrast, flex has better compatibility.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于弹性布局，实现一个典型的页面结构</title>
</head>
<body>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .nav {
     
     
            width: 100%;
            height: 50px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        .container {
     
     
            width: 100%;
            height: 600px;
            background-color: white;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .left, .right {
     
     
            width: 20%;
            height: 100%;
            background-color:rgb(86, 143, 204);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .container .content {
     
     
            width: 60%;
            height: 100%;
            background-color: rgb(119, 187, 139);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .footer {
     
     
            width: 100%;
            height: 100px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
        }
    </style>
    
    <div class="nav">
        导航栏
    </div>

    <div class="container">
        <div class="left">
            左侧边栏
        </div>
        <div class="content">
            内容区域
        </div>
        <div class="right">
            右侧边栏
        </div>
    </div>
    
    <div class="footer">
        页脚
    </div>

</body>
</html>

---