01 Web front-end entry notes

Dark horse front-end H5+CSS basic note finishing (for personal use)

1. Introduction to HTML

(1) Basic cognition

1. Pave the way for basic concepts

(1) Understanding the webpage

Components - text, images, audio, video, hyperlinks

Essence - Code

Transformation - Browser (parsing + rendering)

(2) browser

Web page display and running platform (required)

Top five : IE, Firefox, Google Chrome, Safari, Openg

Different rendering engines (browser kernels) have different speeds, performances, and effects when parsing codes

(3) Web standards

Unify the display effect of different browsers

Structure - HTML - Page Elements and Content

Presentation - CSS - page styles such as the appearance and positioning of web page elements

Behavioral - JavaScript - Web page model definition and page interaction

Web standards require page implementation: three-layer separation of structure, performance, and behavior

2. HTML first experience

HTML (Hyper Text Markup Language) hypertext markup language

• A language specially used for web page development, which mainly describes text, pictures, audio, video and other content in web pages through HTML tags

Tag markup : Pairs <><>

HTML page fixed structure: overall html, head head, title title, bodybody

• Described by specific HTML tags

Development tools use: VSCode

• Add Skeleton: English Status ->shift+!
• Run: right click -> open in default browsers

3. Grammar specification

HTML comments

• Shortcut key: ctrl+/

HTML tag structure

• Double tags: start tag + content + end tag

• single tag

  • <br> <hr> <img>

Relationship between HTML tags

• Parent-child relationship (nested relationship)
  

• Brotherly relationship (parallel relationship)

(2) HTML tag learning

1. Typesetting labels

title tag h1 - h6

• Features: automatic line break (exclusive line), text bold and larger, text gradually decreases from h1→h6

paragraph tag p

• Features: word wrap, gaps between paragraphs

newline tag br

horizontal line label hr

2. Text formatting tags

Bold b /strong

underscore u /ins

Tilt i /em

strikethrough s /del

Note : the latter semantically salient importance emphasizes the context

3. Media tab

(1) image tag img

<img src="地址" alt="替换文本" title="提示文本" width="宽度" height="高度">

srcAttribute: the path of the target image

altAttribute: Replacement text (the text displayed when loading failed)

titleAttribute: prompt text (the text displayed when the mouse hovers over it)

widthand heightproperties: width and height (numbers)

• Just set one of them, and the other one will be scaled automatically (the picture will not be deformed)
• Set two at the same time, if not set properly, the picture may be deformed

(*) Tag introduction

Note :

• written inside the opening tag

• Multiple attributes can exist at the same time

• Attributes are separated by spaces

• Tag names and attributes must be separated by spaces

• There is no order between attributes

(*)path

Absolute path : the absolute location under the directory (starting from the drive letter, complete URL)

Relative path (commonly used): The process of finding the target file starting from the current file

• Sibling directory - the current file and the target file are in the same directory

  <img src="目标图片">
  <img src="./目标图片">
  

• Subdirectory - object files are in subdirectory

  <img src="文件夹名/目标图片">
  

• parent directory - the target file is in the parent directory

  • .../Back up one level (.../.../Back up two levels)

  <img src="../目标图片">
  

(2) Audio tag audio

<audio src="地址" controls autoplay loop></audio>

srcAttribute: the path of the audio

controlsAttributes: Controls to display playback

autoplayAttribute: autoplay (some browsers do not support it)

loopAttribute: loop playback

Note : Three formats are supported - MP3, Wav, Ogg

(3) Video tag video

<video src="地址" controls autoplay muted loop></video>

srcAttribute: the path of the video

controlsAttributes: Controls to display playback

autoplayAttribute: autoplay (in Google Chrome, it needs to cooperate with muted to realize mute playback)

loopAttribute: loop playback

muted: Default value for audio in video (initially silent)

Note : Three formats are supported - MP4, WebM, Ogg

4. Link label a

<a href="地址" target="_blank">超链接文本</a>
<a href="#">空链接</a>

display features

• Default text is underlined

• When not clicked, the default text is blue

• After clicking, the text is displayed in purple (clearing the browser history can restore the blue color)

Attributes

• hrefJump address (url or local)

  • If you don't know the jump address yet, hrefwrite it as #(empty link), and click it to return to the top of the page

• targetThe opening form of the landing page

  • _self: default value, jump in the current window (overwrite the original page)_
  • _blank: Jump in a new window (keep the original page)

2. HTML Basics

(1) List label

1. Application scenarios

Display related content by row in the web page

Unordered lists are most commonly used, ordered lists are used occasionally, and custom lists are used for bottom navigation

2. Unordered list ul

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

label composition

• ulRepresents the whole of an unordered list, used to wrap litags
• liRepresents each item of the unordered list, used to contain the content of each row

Display features : the dot logo is displayed by default in front of each item

Note : ultags are only allowed to contain litags, litags can contain any content

3. Ordered list ol

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

label composition

• olRepresents the whole of an ordered list, used to wrap lilabels
• liRepresents each item of the ordered list, used to contain the content of each row

Display features : the serial number logo is displayed by default in front of each item

Note : olLabels are also only allowed to contain lilabels, liand labels can contain any content

4. Custom list dl

<dl>
    <dt>主题一</dt>
    <dd>主题一项目1</dd>
</dl>  

label composition

• dlRepresents the whole of the custom list, used to wrap dt/dd tags
• dtIndicates the subject of a custom list
• ddRepresents each item on a theme for a custom list

Display features : ddthe front will display the indentation effect by default

Note : dltags are only allowed to contain dt/ ddtags, dt/ ddtags can contain anything

(2) Form label table

1. Label composition

tableThe form as a whole can be used to wrap multipletr

• border= "Number" --> border width
• width= number --> table width
• height= number --> border height
• Note : It is recommended to use CSS settings for style effects during actual development

captionTable title, displayed in the center of the top of the table by default

trTable per row, available for wrappingtd

thHeader cell, usually used for the first row of the table, the default internal text is bold and centered

tdTable cells, which can be used to wrap content

The nesting relationship of tags:table > caption + tr > th + td

2. Structural tags

theadform header

tbodyform body

tfoottable bottom

Note : The table structure tag is used to wrap the tr tag and can be omitted

The nesting relationship of tags:table > thead/tbody/tfoot > tr > th/td

3. Merge cells

rowspan= "Number of merged cells" Merge across rows, merge cells in multiple rows vertically

colspan= "Number of merged cells" Merge across columns, merge cells in multiple columns horizontally

Note :

• According to the upper left principle, the upper and lower merges retain the uppermost, and the left and right merges retain the leftmost
• Cells in the same structure label can only be merged, and cannot be merged across structures
• write in the reserved td/ thtag

(3) Form label form

1. input series label

 <input type=" +++ ">

(1) Basic introduction

Scenario : Display the form effect of collecting user information on a web page

typeDisplay different effects through different attribute values, and there is no automatic line break by default

(2) form field form

(3) Text box text

Scenario : for entering a single line of text (default)

<input type="text" placeholder="占位符">

Common attributes :

• value= "" The content entered by the user, which is set in the code is equivalent to the default value (it will be sent to the backend server after submission)
• name= "" The meaning of the current control
• placeholder= "" placeholder, text to remind the user to enter content

Note : The format of the data received by the backend isname的属性值 = value的属性

(4) password box password

Scenario : for entering password

<input type="password" placeholder="占位符">

Common properties (same as text box)

(5) single button radio

Scene : for multiple selection

<input type="radio" name="分组名" id="" checked>

Common attributes :

• value= "" user selected data
• name= "" Grouping, the radio buttons with the same name attribute form a group, and only one of them is selected in a group
• checkedSelected by default, only one can be set in a group

(6) checkbox checkbox

Scenario : for multiple selection

<input type="checkbox" name="" checked>

Common attributes :

• valueuser selected data
• name= "" The meaning of the current control
• checkedselected by default

(7) File selection file

Scenario : for uploading files later

<input type="file" multiple>

Common attributes :

• multipleMultiple file selection

(8) button

The submit button submitis used to submit, and submits the data to the backend server after clicking

The reset button resetis used to reset and restore the default value of the form after clicking

Ordinary buttons have no function buttonby default , and then add functions with js

• value= " " button display text

Note : You need to formcooperate with the function to use, specifically put the submitted or reset form label into the form field label

<form action="">
    <input type="text" placeholder="占位符">
    <input type="submit" value="提交按钮">
    <input type="reset">
    <input type="button" value="普通按钮">
</form>

2. Button label button

<button type="reset">重置按钮</button>

type = " submit / reset / button "

Notebutton : The submit button is the default in Google Chrome

3. drop-down list select

<select>
    <option>北京</option>
    <option selected>深圳</option>
</select>

label composition

• selectLabels: overall dropdown menu
• optionLabel: each item of the drop-down menu

Attribute : selectedThe default selection of the drop-down menu

4. Text field label textarea

<textarea cols="60" rows="30"></textarea>

properties :

• cols= "Number" the visible width of the text field
• rows= "Number" number of visible lines of the text field

Note :

• The lower right corner can be dragged to change the size
• It is recommended to use CSS settings for style effects during actual development

5. label label

Scenario : often used to bind the relationship between content and form tags

Use method 1 :

• labelWrap content with tags

• idAdd attributes to the form

• labelThe attribute value setting of the label forattribute idis the same as the attribute value of the form

  <input type="radio" name="sex" id="man"> <label for="man">男</label>
  

Use method 2 :

• Use labeltags to wrap content with form tags

• Remove the attribute labelof the tagfor

  <label><input type="radio" name="sex">女</label>
  

(4) Semantic tags

Page layout tags without semantics divandspan

• divLabel: Own one line, the width occupies one line by default, and the height is expanded by the content by default

• spanLabels: Multiple labels can be displayed on one line, and the width and height are expanded by the content by default

Semantic layout tags (understand)

• header: page header

• nav: web navigation

• footer: the bottom of the page

• aside: Web page sidebar

• section: page block

• article: web article

• Note :

  • HTML5 launch, mobile web page use
  • Label display features are divthe same as

(5) Character entities

When displaying special symbol effects on web pages, use character entities instead

Structure : &English;

Common character entities :

• space 
• more than the>
• less than<

Note : Only one webpage with multiple spaces is recognized (HTML space merging phenomenon), which needs to be represented by character entities

3. CSS Basics

(1) CSS import method

CSS: Cascading Style Sheets

1. Embedded

<style>
    选择器{
      
      
        属性名:属性值;
    }
</style>

CSS written in styletags

Position : Below the label headin the labeltitle

Note : selector-lookup tags

Scope of action : current page

Usage scenario : small case

2. Outreach

<link rel="stylesheet" href="my.css" />

CSS is written in a separate .css file

Position : Below the label headin the label , introduced in the webpage through the labeltitlelink

Scope of application : multiple pages

Usage scenario : in the project

• relAttributes - Relationships, stylesheetStyle Sheets
• hrefProperties - .cssfile address

3. Inline

<标签名 style="属性名:属性值;">内容</标签名>

CSS is written in stylethe attribute of the tag

Scope of action : current tab

Usage scenario : use with js

(2) Basic selector

The function of the selector : select the corresponding label in the page to facilitate subsequent setting styles

1. Tab selector

标签名 {CSS属性名:属性值;}

Function : through the tag name, find all such tags in the page and set the style

Note : No matter how deep the nesting relationship is, the corresponding label can be found

2. Class Selector

.类名 {CSS属性名:属性值;}

Function : Through the class name, find all the tags with this class name in the page and set the style

Note :

• There is an attribute on all tags classwhose value is called the class name
• Class names can consist of numbers, letters, underscores, and dashes, and cannot start with numbers or dashes
• A tag can have multiple class names at the same time, separated by spaces
• Class names can be repeated, and a class selector can select multiple tags at the same time
• Extraction of redundant code will be encountered in actual development (some public code can be extracted into a public class)

3.id selector

#id属性值 {CSS属性名:属性值;}

Function : Through the attribute value, find the label with this attribute value idin the page and set the styleid

Note :

• idAttributes on all tags
• idThe attribute value is unique and cannot be repeated on the page
• idThere can only be one attribute on a tag
• A idselector can only select one tag
• Use it with js (get the DOM method getElementById, if there are multiple ids on the page, you can't get it)

4. Wildcard selector

* {CSS属性名:属性值;}

Function : find all the tags in the page and set the style

Note :

• rarely used
• Often used in small pages to remove the default inner and outer margins of labels
  • margin:0;
  • padding:0;

(3) Font and text style

1. Font style

(1) font size font-size

Value : number+px

Note :

• The default text size of Google Chrome is 16px
• The unit needs to be set, otherwise it will be invalid

(2) Font thickness font-weight

Value :

• keywords:
  • normalnormal
  • boldbold
• Pure numbers: the whole hundreds of 100~900 (400 is normal and 700 is bold)

Note : Not all fonts provide nine weights, and there are no changes in some value pages

(3) font style font-style

Value :

• normal (default)normal
• tiltitalic

(4) Font family font-family

Commonly used values : specific font 1, specific font 2, specific font 3, ..., font family name;

Common font families :

• sans serif fontsans-serif
• serif fontserif
• monospace fontmonospance

Rendering rules :

• Search in order from left to right, if the font is not installed in the computer, the next one will be displayed
• If none are supported, the default font of the last font family will be displayed according to the operating system

Note :

• If there are multiple words in the font name, it is recommended to use quotation marks
• The last font family does not need to be wrapped in quotes
• When developing web pages, try to use the common fonts that come with the system to ensure that different users can browse the web pages correctly.

(*) Style cascading problem

If the same attribute is set for the same tag, the styles will be cascaded (overwritten) at this time, and the one written at the bottom will take effect.

(5) font composite attribute

font : style weight size family;

Shorthand : slightly comfortable swsf

Omission requirements : only the first two can be omitted, if omitted, it is equivalent to setting the default value

How to set both separate and consecutive forms at the same time:

• The separate style is written below the continuous writing
• The separate style is written inside the continuous writing

2. Text style

(1) Text indent text-indent

Value :

• number+px
• Number + em (recommended)
• 1em = font-sizethe size of the current label

(2) Text horizontal alignment text-align

Value :

• align leftleft
• right alignright
• center alignmentcenter

Note :

• Content alignment, available for text, spanlabel/ alabel, inputlabel/ imglabel
• The alignment of the above elements needs to be set in its parent element

(3) Text decoration text-decoration

Value :

• underlineunderline
• strikethroughline-through
• underlineoverline
• No decorative linesnone

Note : It is often used in development text-decoration:noneto clear athe default underline of the label

(4) Line height line-height

Value : number+px or multiple (multiple of the current label font-size)

Application :

• Let the single-line text be vertically centered, you can setline-height:文字父元素高度
• When the web page is precisely laid out, it will be set line-height:1to cancel the upper and lower spacing

Line height and font composite properties :

• note overlay

  font:style weight size/line-height family;
  

(4) Chrome Debugging Tool

1. Open method

Right click --> inspect

elements: Display the html structure of the current page

styles: Display the style of the current label

2. Elements

Method 1 : elementsClick the element to be debugged on the left

Method 2 : After clicking the button in the upper left corner, directly click the element to be debugged on the web page

3. Function

control style

• Modify attribute value: directly click on the attribute value to modify
• Add attribute: Click after the semicolon of the previous attribute to add it directly
• Control styles take effect: click the small box in front of the attribute
• Note: The debugging tool is only the current debugging effect, which needs to be modified in the code to be permanently retained

4. Special circumstances

selectors not set in styles

• Meaning: The selector is written incorrectly
• reason:
  • selector word misspelled
  • Wrong selector structure

style with strikethrough

• Meaning: style failure
• reason:
  • styles are annotated
  • styles are overridden

There is a small triangle in front of the style

• Meaning: style error
• reason:
  • There is no semicolon after the attribute value
  • Chinese punctuation appears
  • Property name or property value word misspelled

Expand-Color

Property name :

• text colorcolor
• background colorbackground-color

Attribute value :

• Keywords : Predefined color names
  • 例：red green blue yellow
• rgb representation : red, green and blue primary colors, each value ranges from 0 to 255
  • Example: rgb(0,0,0) rgb(255,0,0)
• rgba notation : the three primary colors of red, green and blue, plus a to indicate transparency, the value range is 0~1
  • Example: rgba(0,0,0,0.3) rgba(255,0,0,0.6)
• Hexadecimal notation : at the beginning of #, convert the number to hexadecimal notation
  • Example: #000000 #ff0000 #e92322

Expand - label horizontally centered

 margin:0 auto

Achieve div, p, h(big box) horizontal centering

Set directly to the current element itself

It is generally used for fixed-width boxes. If the large box does not have a width set, it will take up the width of the parent element by default.

4. Advanced CSS

(1) Advanced selector

compound selector

1. Descendant selector

父选择器 后代选择器{CSS}

Function : According to the nesting relationship of HTML tags, select elements that meet the conditions in the descendants of the parent element

Result: Among the descendants (son, grandson, great-grandchild...) of the label found by the parent selector, find the label that satisfies the descendant selector and set the style

Note :

• The selector can use any of the base selectors
• Descendants include sons, grandchildren, great-grandchildren…
• In descendant selectors, selectors are 空格separated by

2. Child selector

父选择器 > 子代选择器{CSS}

Function : According to the nesting relationship of HTML tags, select elements that meet the conditions in the children of the parent element

Result : Among the children (sons) of the label found by the parent selector, find the label that satisfies the child selector and set the style

Note :

• Descendants include only sons
• In the child selector, the selector is >separated from the selector by

3. Union selector

选择器1,选择器2{CSS}

Function : Select multiple sets of labels at the same time and set the same style

Result : find the label selected by selector 1 and selector 2, and set the style

Note :

• Each set of selectors is ,separated by
• Each set of selectors can be either a base selector or a compound selector
• Each set of selectors is usually written one per line to improve the readability of the code

4. Intersection selector

选择器1选择器2{CSS}

Function : Select the label that satisfies multiple selectors in the page at the same time

Result : (both in principle) find the label that can be selected by both selector 1 and selector 2 in the page, and set the style

Note :

• Selectors are next to each other without separation
• The label selector in the selector must be written first

5.hover pseudo class selector

选择器:hover{CSS}

Function : Select the state of the mouse hovering over the element and set the style

Note :

• A certain state of the element selected by the pseudo-class selector
• Any tag can be added

6. Emmet syntax

Function : shorthand, quickly generate code

Grammar :

• tag namediv

  <div></div>
  

• class selector.red

  <div class="red"></div>
  

• id selector#one

  <div id="one"></div>
  

• intersection selectorp.red#one

  <p class="red" id="one"></p>
  

• child selectorul>li

  <ul> <li></li> </ul>
  

• internal textul>li{li的内容}

  <ul> <li>li的内容</li> </ul>
  

• create multiple

  • ul>li*3

    <ul> <li></li> <li></li> <li></li> </ul>
    

  • ul>li{$}*3

    <ul> <li>1</li> <li>2</li> <li>3</li> </ul>
    

(2) Background-related attributes

1. Background color background-color (bgc)

Attribute value : color value-keyword, rgb notation, rgba notation, hexadecimal...

Note :

• The background color is transparent by default: rgb(0,0,0,0)/transparent
• The background color will not affect the size of the box, and the size and position of the box can be seen clearly. Generally, it is customary to set the background color for the box first in the layout

2. Background image background-image (bgi)

Attribute value :url('图片地址')

Note :

• Quotes in url can be omitted
• Background images are tiled horizontally and vertically by default
• The background image is just a decorative effect for the box, similar to the background color, it cannot be used to open the image

3. Background tiling background-repeat (bgr)

Attribute value:

• repeat(default) Tile both horizontally and vertically
• no-repeatNot tiled
• x-repeatTile along the horizontal direction (x-axis)
• y-repeatTile along the vertical direction (y-axis)

4. Background position background-position (bgp)

background-position:水平方向位置 垂直方向位置

Attribute value :

• Location nouns (up to 9 locations)
  • horizontal direction:left center right
  • Vertical direction:top center bottom
• number+px (coordinates)
  • Coordinate system: origin (0,0) - the upper left corner of the box, x-axis - horizontally to the right, y-axis - vertically down
  • Function: The upper left corner of the picture coincides with the coordinate point

Note :

• Location nouns and coordinate values ​​can be mixed
• The background image and background color are only displayed inside the box

5. Background image size background-size(bgs)

background-size:宽度 高度；

Function : Set the size
value of the background image :

• number+px
• percentage
• containInclude, scale the background image proportionally until it does not exceed the maximum size of the box (the box may have a blank space)
• coverOverlay, scale the background image proportionally until it just fills the entire box without blank space (the image may not be fully displayed)

6. The composite property background of the background

background:color image repeat position/size（不分先后顺序）

Omit question:

• Can be omitted as required
• On the PC side, if the size of the box is the same as the size of the background image, you can directly writebackground:url()

How to set both separate and consecutive forms at the same time:

• The separate style is written below the continuous writing
• The separate style is written inside the continuous writing

Expansion - display pictures on web pages

Method 1 : img tag

• If the width and height are not set, the original size will be defaulted

Method 2 : div+background image

• The background image is a decoration, and the div tag cannot be opened. You need to set the width and height of the div

(3) Element display mode

1. Block-level element block

Display Features :

• monopoly party
• The width defaults to the width of the parent element. The height is expanded by the content by default
• Width and height can be set

Representative label :

• div, p, hseries, ul, li, dl, dt, dd, form, header, nav, footer…

2. Inline element inline

Display Features :

• A row can display multiple
• Width and height are expanded by content by default
• width and height cannot be set

Representative label :

• a、span、b、u、i、s、strong、ins、em、del…

3. Inline block element inline-block

Display Features :

• A row can display multiple
• Width and height can be set

Representative label :

• input、textarea、button、select…

Note : imgThe label has the characteristics of an inline block element, but the result displayed in the Chrome debugging tool isinline

4. Element display mode conversion

Purpose : To change the default display characteristics of the element so that the element meets the layout requirements

Grammar :

• dispaly:blockConverting to block-level elements is more used
• dispaly:inline-blockConverting to inline block elements is more used
• dispaly:inlineConversion to inline elements uses less

Extension-HTML Nesting Specification

Block-level elements are generally used as large containers, which can nest text, block-level elements, inline elements, inline block elements, etc.

• Note : Do not nest block-level elements such as , , and so on pin tagsdivph

aAny element can be nested inside the tag, but atags cannot be nested

Expand-Center Method Summary

center horizontally

text-align : center;

text

Inline elements such as span/a

Inline-block elements such as img/input

Note : If you need to center the above elements horizontally, you need to set it in the parent of the element

margin : 0 auto;

block level element

Note : Set directly to the current element

vertical center

line-height

single line text

(4) CSS Features

1. Inheritance

Features : Child elements have the characteristics of inheriting the style of the parent element by default (child inherits the father's business)

Common inheritable attributes (text control attributes can all be inherited):

• color
• font-style/weight/size/family
• text-indent/align
• line-height
• …

Note :

• You can use the debugging tool to determine whether the style can be inherited

Inheritance fails :

• Reason : The element has the default style of the browser, and the inheritance still exists at this time, but the default style of the browser is displayed first
• aLabels colorwill inherit and fail
• hfont-sizeInheritance of series labels fails
• divThe height cannot be inherited, but the width has the effect of inheritance (because divthere is an exclusive line feature)

Application :

• Remove the default style of the list (small dot)

  ul {list-style ：none;}
  

• Unify the default text size of different browsers

  • Google Chrome default text size: 16px
  • The default font size displayed by different browsers may be inconsistent. During development, a uniform font-size is usually set for the body tag to ensure that different browsers have the same effect

2. Cascading

Features :

• Set different styles for the same label --> style layer upon layer --> work together on the label
• The same label sets the same style --> style layer coverage --> the last written style takes effect

Note : When styles conflict, only selectors with the same priority can pass the cascading judgment

3. Priority

Features : Different selectors have different priorities, and selector styles with high priority will override selector styles with low priority

Priority formula :

• Inheritance< wildcard selector< label selector< class selector< id selector< inline style<!important

Note :

• !importantWrite after the attribute, before the semicolon
• !importantInherited priority cannot be raised
• Not recommended for actual development!important
• The more accurately the tag is found, the higher the priority

Weight superposition calculation :

• Scenario : The compound selector judges which selector has the highest priority through the weight superposition calculation method

• Weight superposition calculation formula (there is no carry between each level):

  • (1: the number of inline styles, 2: the number of id selectors, 3: the number of class selectors, 4: the number of label selectors)

  

• Comparison rules :

  • Compare the first number first, and compare the result without looking at the following
  • Then compare the second number, and compare the result without looking at the following
  • …
  • If all the numbers are the same, it means the priority is the same, and the comparison is cascaded at this time (the ones written below work)
  • In addition to inheritance, !importantthe highest weight

Five, CSS layout - box model

1. Introduction to the box model

box :

• Each label on the page can be regarded as a box, which is more convenient for layout from the perspective of the box
• When a browser renders (displays) a web page, it regards the elements in the web page as rectangular areas called boxes.

Box model :

• CSS stipulates that each box is composed of a content area content, an inner margin area padding, a border area border, and an outer margin areamargin

Memory : Lenovo's Realistic Packaging Box

2. The width and height of the content area

Role : The default setting of the use widthand heightproperty is the size of the box content area

properties : width/height

Value : number+px

3. border border (bd)

Single attribute :

• border thicknessborder-width
• border styleborder-style
  • Solid line solidDashed line dashedDotted linedotted
• border colorborder-color

Attribute value (composite attribute): Concatenation of a single value, separated by spaces

border:粗细 线条种类 颜色（不分先后顺序）

Single-direction setting : only set the border for a certain direction of the box

border-方位名词:粗细 线条种类 颜色

Note :

• The setting borderwill expand the box (width and height are the width and height of the content)

• In actual development, write code from inside to outside, width and height background color --> put content and adjust position --> control text details

4. Inner margin padding

It can be used as a compound attribute, indicating that the inner margin of a certain direction is set separately

Attribute value : number+px

Shorthand recognition order :

• Four values: up right down left
• Three values: up, left, down, down
• Two values: up, down, left, and right
• Memory rules: Assign values ​​clockwise from the top, and look at the opposite side if no assignment is set

Single direction setting :

padding-方位名词（left/right/top/buttom）: 数字+px

5. Outer margin margin

The setting method is the same as padding

Normal situation : horizontal layout boxes, the left and right margins do not affect each other, the distance between the two is the sum of the left and right margins

Note : Collapsing margins

Merge problem : Block-level elements in vertical layout marginwill be merged up and down

• Result : The final distance is marginthe maximum value of
• Solution : only set one

Collapse phenomenon : nested block-level elements, child elements margin-topwill act on the parent element

• Result : cause the parent element to move down together
• Solved :
  • Set border-topor padding-top(separate parent and child elements margin-top) to the parent element
  • Set the parent elementoverflow:hidden
  • converted to inline-block elementsdisplay: inline-block
  • set float

6. CSS3 box model

Manual subtraction :

• CSS properties that can support a large box: width, height, border,padding
  • Box width = left border + left padding + content width + right padding + right border
  • Box height = top border + top padding + content width + bottom padding + bottom border
• paddingSpecial case (block-level elements): If the child box does not have a width set, the width defaults to the width of the parent box. At this time, set left or right for the child box border, and the child box will not be enlarged

Automatic internal reduction : When setting a fixed-size box, you can use the automatic internal reduction method to avoid manual internal reduction

box-sizing: border-box;

7. Clear the default inner and outer margins

The browser will set the default sum for some tags by default margin, paddingbut generally you need to clear the default sum of these tags before the project starts , marginand paddingthen set it yourself

* {
  margin: 0;
  padding: 0;
}

8. Center the heart of the version

Version heart : the effective content of the web page

margin:0 auto;

9. The problem of inner and outer margins of inline elements

marginand paddingthe vertical problem of not being able to change inline labels

margin-top/bottom padding-top/bottom

Solution : Use line-heightto change the row height

Six, CSS floating

(1) Structural pseudo-class selector

1. Function and advantages

Function : Find elements according to their structural relationship in HTML

Advantages : reduce the dependence on classes in HTML, and help keep the code clean

Scenario : Commonly used to find child elements in a parent selector

2. Selector

E:first-child{}Matches the first child element in the parent element and is an E element

E:last-child{}Matches the last child element in the parent element and is an E element

E:nth-child(n){}Matches the nth child element in the parent element and is an E element

E:nth-last-child(n){}Match the penultimate nth child element in the parent element, and it is an E element

E:nth-of-type(n){}Only match the nth child element of the same type (E) of the parent element

Note : the value of n

• 0,1,2,3,4,5,6... (values ​​start from 0)
• official:
  • Even 2n/even Odd 2n+1/2n-1/odd
  • Find the first five -n+5 find n+5 from the fifth

(2) Pseudo elements

Role : generally used for non-main content in the page

Difference : element-label pseudo-element set by HTML-label effect simulated by CSS

Type :

• E::beforeAdd a pseudo-element to the front of the content of the parent element E
• E::afterAdd a pseudo-element at the end of the content of the parent element E

Note :

• contentThe attribute must be set to take effect

   content: ''
  

• Pseudo-elements are inline elements by default (width and height do not take effect)

(3) Standard flow

Standard flow, also known as document flow, is a set of typesetting rules that browsers adopt by default when rendering and displaying page content, and specifies how elements should be arranged.

Common standard flow layout rules :

• Block-level elements: from top to bottom, vertical layout, exclusive line
• Inline elements or inline block elements: from left to right, horizontal layout, if there is not enough space, it will fold itself

(4) floating

float: left/right

Function :

• Page layout: Let the vertical layout box become a horizontal layout

• When the browser parses inline blocks or inline tags, if the tag is written in a new line, a space distance will be generated

Features :

• Floating elements will break away from the standard flow and do not occupy a position in the standard flow (off-label)
• Floating elements are half a level above the standard flow and can cover elements in the standard flow
• Floating to find floating, the next floating element will float left and right behind the previous floating element
• Floats are affected by the bounds of the element above
• Floating elements have special display effects: one line can display multiple items, and the width and height can be set (the floating label has the characteristics of an inline block)

Note :

• Floated elements cannot pass through text-align:centeror margin:() autobe centered
• By default, floating labels are top-aligned and can be adjusted by adding margins

(5) Clear floating

1 Introduction

Impact : If the child element is floating, the child element cannot expand the block-level parent element of the standard flow at this time (parent-child label, child-level floating, parent has no height, the standard flow box behind will be affected and displayed in the upper position )

Reason : The sub-element is off-label after floating and does not occupy the position

Purpose : The height of the parent element is required so as not to affect the layout of other web page elements

2. Method

(1) Directly set the height of the parent element

Advantages : simple and rude

Disadvantage : the height of the parent element cannot be fixed in some layouts

(2) Additional labeling method

Operation :

• Add a block-level element at the end of the content of the parent element
• Set the added block-level elementclear:both/left/right

Disadvantages : Additional tags will be added to the page, making the HTML structure of the page complicated

(3) Single pseudo-element removal method

.clearfix::after {
    content: "";
	/* 伪元素添加的标签是行内, 要求块 */
    display: block;
    clear: both;
    /* 补充代码：在网页中看不到伪元素，解决兼容性 */
    height: 0;
    visibility: hidden;
}

Action : Replaced extra tags with pseudo-elements

Advantages : used in the project, you can directly add a class to the label to clear the floating

(4) Double pseudo-element removal method

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after{
    clear: both;
}

Advantages : used in the project, you can directly add a class to the label to clear the floating

Note : .clearfix::beforeSolve the problem of margin collapse ( display: tableconvert to table form)

（5）overflow:hidden

overflow:hidden

Operation : Set directly to the parent elementoverflow:hidden

Features : convenient

Extension-CSS writing order

Different CSS writing order will affect the rendering performance of browsers, it is recommended that front-end engineers use professional writing order habits

CSS selector writing order

Layout properties:display float position clear visibility overflow

Box model + background:width height margin border padding background

Text content attribute:color font text-decoration text-align line-height

Dotted properties:cursor border-radius text-shadow box-shadow

Note: It is recommended to use multi-purpose classes + descendants in development, but not as many levels as possible. The number of class selectors in a selector is recommended not to exceed 3

Expansion-BFC

Concept : Block Formatting Context (Block Formatting Context, BFC) is a part of the visual CSS rendering of a Web page, an area where the layout process of a block box occurs, and an area where floating elements interact with other elements.

Create BFC method :

• html tags
• floating element
• overflowvalue is notvisible

Features : BFC is a layout space of block-level elements. There are two characteristics in the layout space of BFC

• BFC boxes will wrap internal child elements by default (standard flow, floating)
  • Application: Clear Float
• marginThe collapse phenomenon that does not exist between the BFC box and the child element
  • Application: Solving marginthe collapse

7. Project

Root directory : the first-level folder of the website (English name)

• Image folder: images
• Style folder: CSS --> index.css (beautify the home page)
• The home page of the website: index.html (fixed name)

Note :

• Layout: outside to inside, top to bottom, left to right
• CSS: float / display, box model, text styles

Eight, CSS positioning decoration

(1) positioning position

1. Common layout methods of web pages

standard stream

• Block-level elements occupy a single line --> vertical layout
• Inline elements/inline block elements display multiple rows --> horizontal layout

float

• Let the block-level elements that were originally laid out vertically become horizontally laid out

position

• Allow elements to be freely placed anywhere on the page
• Generally used for cascading between boxes

2. Locate common application scenarios

Solve the cascading problem between boxes and boxes

Let the box always be fixed at a certain position on the screen

3. Steps to use

To set the targeting method :

• Property name:position
• Attribute value: static positioning, staticrelative positioning, relativeabsolute positioning, absolutefixed positioningfixed

Set the offset value :

• Principle: proximity principle
• Property name: horizontal left/ right+ vertical top/bottom
• Attribute value: number+px/%
• Notice:
  • leftand righthave both, whichever leftis more; topand bottomboth, topwhichever is
  • Number+% Move according to the percentage of the size of the reference object

4. Static positioning static

position: static;

Introduction : Elements in the standard flow are statically positioned by default

Note : You cannot move through the orientation attribute

5. Relative positioning relative

position: relative;
left/right: 数字+px/%
top/bottom: 数字+px/%

Introduction : Narcissistic positioning, moving relative to one's previous position

Features :

• It needs to cooperate with the orientation attribute to realize the movement
• Move relative to its original position
• Occupy a position on the page --> no off-label
• Still has the original display mode features

Application scenario :

• Cooperate with the absolute positioning group CP (son and father)
• for small movement

6. Absolute positioning absolute

position: absolute;
left/right: 数字+px/%
top/bottom: 数字+px/%

Introduction : Competitive positioning, positioning and moving relative to the parent element that is not statically positioned

Features :

• It needs to cooperate with the orientation attribute to realize the movement
• Use the positioned parent as the reference object for positioning. If the parent is not positioned, move relative to the visible area of ​​the browser
  • The parent is the parent in a broad sense. Find the parent that is located nearby. If you can’t find it step by step, use the browser as a reference.
  • Relative positioning is more commonly used by parents
• Does not occupy a position on the page --> has been unmarked
• Change the characteristics of the display mode of the label, with the characteristics of inline blocks (coexist in one line and take effect in width and height)
  • Need to set the width and height, or add content to expand the box

Application scenario : Cooperate with the absolute positioning group CP (child and father) parent

7. Sub-absolute positioning application

position: absolute;
left: 50%;
top: 50%;
/* 方法一-手动调节参数为半个盒子宽高 */
margin-left: -150px; 
margin-top: -150px;
/* 方法二-按盒子百分比自动调节移动距离 */
transform: translate(-50%, -50%);

Use the parent-child aspect to center the child box in the parent box (it can be achieved with any width and height of the parent-child element)

Note : Standard flow boxes use margin:0 autohorizontal centering, but absolutely positioned boxes do not

Operation :

• Move 50% according to the size of the browser, so that the entire box moves to the bottom right of the middle of the browser
• Move half box width to the left and half box height up

Note : If you find that the parent element already has absolute positioning, you can just direct the child

8. Fixed positioning fixed

position: fixed;
left/right: 数字+px/%
top/bottom: 数字+px/%

Introduction : Obsessive positioning, positioning relative to the browser Mobile
features :

• It needs to cooperate with the orientation attribute to realize the movement
• Move relative to the viewable area of ​​the browser
• Does not occupy a position on the page --> has been unmarked

Application scenario : Let the box be fixed at a certain position on the screen

9. Hierarchical relationship of elements

Hierarchical relationship of elements in different layout methods: standard flow < floating < positioning

Hierarchical relationships between different targeting:

• Relative, Absolute, Fixed default levels are the same
• By default, elements written below in HTML have a higher level and will cover elements above

Levels of custom targeting:

• z-index:数字

Note :

• The number defaults to 0, the larger the value, the higher the display order
• z-indexMust match the positioning to take effect

(2) Decoration

1. Vertical alignment vertical-align

Problem : When the picture and text are displayed in one line, the bottom is not aligned

• There is a baseline for alignment in the typesetting of text type elements in browsers (baseline)

• Inline tags and inline block tags are parsed according to the text by default in the browser, and the default text is aligned by the baseline

Attribute value :

• baselineDefault, baseline alignment
• topalign top
• middlecenter alignment
• bottomBottom alignment

Note :

• You can also turn it into block-level element parsing
• center horizontallytext-line: center
• Give priority to setting the img tag

Function :

• Text boxes and form buttons cannot be aligned

• Input and img cannot be aligned

• The text box in the div, the text box cannot be pasted to the top

• The div does not set a height and is stretched by the img tag. At this time, there will be an additional gap problem under the img tag.

• Use line-height to vertically center the img tag

2. Cursor type cursor

Scenario : Style the display when the mouse cursor is over an element

Attribute value :

• defaultThe default, usually an arrow
• pointerSmall hand effect, prompting users to click
• textI font, prompting the user to select text
• moveCross cursor, prompting user to move

3. border rounded border-radius

Scenario : round the four corners of the box, increase page details, and improve user experience

Value : fillet radius value +px/%

Assignment rules : Assign values ​​from the upper left corner, then assign values ​​clockwise, and look at the opposite corner if there is no assignment

Common rounded corners :

• perfect circle
  • Box must be square
  • Set the border fillet to half the width and height of the boxborder-radius: 50%
• capsule button
  • The box is required to be rectangular
  • set upborder-radius: 盒子高度的一半

4. The overflow part shows the effect of overflow

Overflow part : the area where the content of the box exceeds the bounds of the box

Scene : control the display effect of the content overflow part - show/hide/scroll bar...

Attribute value :

• visibleDefault value, the overflow part is visible
• hiddenoverflow hidden
• scrollShow scrollbars regardless of overflow
• autoAutomatically show or hide scrollbars based on overflow

5. The element itself is hidden

Scenario : Make an element itself invisible on the screen

Common attributes :

• placeholder hidingvisibility: hidden
• Hidden without taking up spacedisplay: none

6. The overall transparency of the element opacity

Scenario : Let an element as a whole (including content) become transparent together

Attribute value : a number between 0-1

• 1: fully opaque
• 0: fully transparent

7. Border merge border-collapse

border-collapse：collapse

Scenario : Let adjacent table borders be merged to get a thin line border effect

(3) Selector extension

1. Chaining pseudo-class selectors

Scenario : Different states of selected tags

Selector syntax :

• E:link{}Checked (a link) Not visited state
• E:visited{}Selected (a link) state after visiting
• E:hover{}Check the mouse hover state
• E:active{}Select the mouse down state

Note : To achieve the above four pseudo-class status effects at the same time, it needs to be written in the order of LVHA

2. Focus pseudo-class selector

Scenario : Used to select the state when the element gets the focus, often used in form controls

Selector syntax :

• E:focus{}

Effect : When the form control gets the focus, the outer outline will be displayed by default

3. Attribute Selector

Scenario : Select elements through HTML attributes on elements, often used to select input tags

Selector syntax :

• E[attr]Select the E element with the attr attribute
• E[attr="val"]Selects E elements with attr attribute and attribute value equal to val

input::placeholdermodified style input_placeholder

9. Comprehensive projects

(1) CSS style supplement

1. Sprite map

background-image: url(大图地址);
background-position: 水平方向位置  垂直方向的位置;

Scenario : In the project, multiple small pictures are combined into one large picture, which is called a sprite image

Advantages : reduce the number of server transmissions, reduce the pressure on the server, and improve page loading speed

Steps to use :

• Create a box and set the size of the box to the size of the small picture
• Set the sprite image as the background image of the box
• Use PxCook to measure the coordinates (x, y) of the upper left corner of the small picture (position in the big picture), and take negative values ​​to set the background picture position of the boxbackground-position：-x -y

Note: The sprite label is generally used as an inline label ( span b i)

2. Text shadow text-shadow

Function : Add a shadow effect to the text to attract users' attention

Property name :text-shadow

Value :

• h-shadowRequired, horizontal offset, negative values ​​allowed
• v-shadowRequired, vertical offset, negative values ​​allowed
• bluroptional, blur
• coloroptional, shadow color

Extension : shadows can be superimposed and set, and each set of shadow values ​​is separated by commas

3. Box shadow box-shadow

Function : Add a shadow effect to the box to attract users' attention and reflect the production details of the page

Value :

• h-shadowRequired, horizontal offset, negative values ​​allowed
• v-shadowRequired, vertical offset, negative values ​​allowed
• bluroptional, blur
• coloroptional, shadow color
• spreadoptional, shade expanded
• insetOptional, change shadow to inner shadow

4. transition transition

transition: all/属性名 过度的时长;

Function : Let the style of the element change slowly, often used with hover to enhance the interactive experience of the web page

Common values :

• excessive attributes
  • all: Everything that can be excessive is excessive
  • Specific attribute name E: only attribute E is excessive
• Excessive duration number + s (seconds)

Note :

• Transition needs: the default state and hoverstate style are different in order to have a transition effect
• transitionAttributes are added to the element itself that needs to be transitioned
• transitionAttributes are set in different states, with different effects
  • For the default state setting, the mouse moves in and out with a transition effect
  • Set hoverthe state, there is a transition effect when the mouse moves in, and there is no transition effect when the mouse moves out

(2) Pre-cognition of the project

1. The relationship between the web page and the website

Pages: Each "page" in the website

Website: A collection of web pages that provide a specific service

2. Skeleton structure label

Documentation

<!DOCTYPE html>

A doctype declaration that tells the browser the HTML version of the page

Note : DOCTYPE needs to be written on the first line of the page, not an HTML tag

web language

<html lang="en">

Identifies the language used by the web page

Role : search engine classification + browser translation

Common languages: zh-CN Simplified Chinese / en English

Character encoding (understanding)

<meta charset="UTF-8">

Identifies the character encoding used by the web page

Function : The character encoding for saving and opening needs to be set uniformly, otherwise garbled characters may appear

Common character encodings:

• UTF-8 Unicode, an international character encoding, includes text in global languages
• GB2312 6000+ Chinese characters
• GBK: 20000+ Chinese characters

Note: Uniformly use UTF-8 character encoding in development

other

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Solve the problem of poor compatibility: ie / edge

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile page width = device width

3. SEO three major labels

Introduction to SEO

SEO (Search Engine Optimization): search engine optimization

Function : Let the website rank high on the search engine

Common ways to improve SEO:

• ranking of bidding
• Make web pages into html suffixes
• Tag semantics (use the right tag in the right place)

Three major tags of SEO

title: page title tag

<title>标题文案</title>

description: page description tag

<meta name="description" content="描述文案">

keywords: Web page keyword tags

<meta name="keywords" content="关键词文案">

4.ico icon settings

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

Scenario : The browser title bar icon, the small icon displayed on the left side of the tab title, used to use the icon in .ico format

Note : The .ico icon is placed in the root directory

5. Version heart

.container {
    width: 1240px;
    margin: 0 auto;
}

Scenario : Constrain the main content of the page to the middle of the page

Function : Let screens of different sizes see the main content of the page

Note : The core class name is commonly used container, wrapper, wetc.

(3) Project structure construction

1. File and directory preparation

Create a new project folder xtx-pc-client and open it in the development tool

• In actual development, it is not recommended to use Chinese in the project folder
• All project related files are kept in xtx-pc-client directory

Copy favicon.ico to xtx-pc-client directory

• It is generally customary to put the ico icon in the root directory of the project

Copy the images and uploads directories to the xtx-pc-client directory

• images : store image materials that are fixedly used by the website, such as: logo, style modified images... etc.
• uploads: store image materials that are not used regularly on the website, such as: product images, promotional images, etc.

Create a new index.html in the root directory

Create a new css folder to save the style of the website, and create the following CSS files:

• base.css: base common styles
• common.css: Repeated styles of the same module of multiple web pages in this website, such as: head, bottom
• index.css: homepage style

The completed directory and file structure:

• xtx-pc-client project directory
  • index.html The html file of the homepage
  • favicon.ico ico icon
  • images Fixed image material
  • uploads non-permanent image material
  • css CSS folder
    • base.css base public style
    • common.css Repeated styles for the same module on multiple pages in this website
    • index.css homepage style

2. Basic public style

Scenario : Before the general project starts, the default browser style will be removed first, and it will be set to the initialization style required by the current project

Function : Prevent the influence of different default label styles in different browsers, unify the default display effects of different browsers, and facilitate subsequent project development

Requirements : The base.css code has been prepared and can be directly imported into the project