[java-web]-CSS notes

Shang Silicon Valley—Li Lichao—CSS Notes

Article Directory

1. CSS Basics

1. Introduction to CSS

Overview:

Cascading Style Sheets

A web page is actually a multi-layer structure. CSS styles can be used to set styles for each layer of the web page, and only the top layer can be seen at the end.
Defined by:
- The first
  - styleStyle the element inside the tag via
  - question:
    
    If you want to affect multiple elements, you must copy them again in multiple elements. When the style changes, it is very troublesome to modify one by one.
- the second
  - Write the style into the style tag
  - Style multiple tags via css selectors and modify them only once
  - Easier to reuse styles
  - question:
    - only works on one page
    - The styles inside cannot be reused across web pages
- third
  - Write the css style into a css file
    
    Link external css files via link
  - Writing to the outside can trigger the browser's caching mechanism, thereby speeding up the loading speed of the web page and improving the user experience

2. Basic Grammar

Comments are /*...*/automatically ignored by browsers
Selector & declaration block
Select the specified page through the selector. For example, the function of p is to select all p elements, declare the block, and set the style for the specified element through the declaration block. The declaration block is a style of a name-value pair, named Value pairs are linked by: and end with;

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

3. Selector Basics

class is a tag attribute, similar to id, the difference is that class can be reused

element selector
- Role: Determine the specified element according to the label signature
- Syntax: tagname{}
ID selector
- Function: Xuanzong a specified element according to the ID attribute of the element
- Syntax: #ID attribute value
class
- Multiple elements can be bound to a class
- An element can bind multiple classes (separated by spaces)
- Syntax.class attribute value
wildcard selector
- *{}
- the code

<style>
        /*元素选择器*/
        p{
      
      
            color: red;
        }
        /*id现择器*/
        #box1{
      
      
            color: aqua;
        }
        /*类选择器*/
        .box{
      
      
            color: yellow;
        }
        /*通配选择器*/
        *{
      
      
            color: black;
        }


    </style>
</head>
<body>

    <p>11111</p>
    <p class="box">22222</p>
    <p class="box">33333</p>
    <p id="box2">44444</p>
    <p id="box1">55555</p>
    <p>66666</p>
    <p>66666</p>
    <p>66666</p>

4. Composite selector

Intersection selector, select elements with several classes at the same time, write the two selectors directly together Note : If there is an element selector in the intersection selector, it must start with the element selector
Union selector, select elements corresponding to multiple selectors at the same time, ,separate with split

<style>
.box,#box1,p{
      
      
            color: green;
        }
</style>

5. Relationship selector

parent element
- The element that directly contains child elements is the parent element
child element
- Elements that are directly contained by a parent element
ancestor element
- An element that directly or indirectly contains descendants is an ancestor element
- An element is the parent element and its ancestor element
offspring element
- Elements that are directly or indirectly contained by ancestors are called descendant elements
brother element
- Elements with the same parent element are sibling elements

Selector

child element selector
- Role: specify the child element of the parent element
- Syntax parent element > child element
next sibling selector
- Selects sibling elements with the same parent
All siblings below the sibling selector
- Selects sibling elements with the same parent
- Grammar: ~
- the code

 <style>
        /* 子元素选择器 父元素>子元素 */

        div.box > span{
      
      
            color: red;
        }

        /* 后代元素选择器  祖先 后代*/
        div span{
      
      
            color: royalblue;
        }

        div > p > span{
      
      
            color: yellow;
        }

        /* 兄弟元素选择器 
        下一个
        前一个+ 下一个
        
        后面所有
        前一个 ~ 下一个
        */

        p+span{
      
      
            color: violet;
        }
    </style>
       -->
        <div class="box">
            我是一个div
            <p> 
                我是div中的p元素

                <span>
                    我是p中的span元素
                </span>
            </p>

            <SPan>
                我是div中的span
            </SPan>
        </div>
        <div>
            我是一个div
            <p> 
                我是div中的p元素

                <span>
                    我是p中的span元素
                </span>
            </p>

            <SPan>
                我是div中的span
            </SPan>
        </div>

6. Attribute Selector

[属性名]Select elements with the specified attribute
[属性名=属性值]Selects elements with the specified attribute and attribute value
[属性名^=属性值]Elements starting with attribute value
[属性名$=属性值]Elements that end with an attribute value
[属性名*=属性值]Elements that contain a value as an attribute value
- the code

 <style>

        /* 
        
        [属性名] 选择好友指定属性的元素
        [属性名 = 属性值] 选择含有指定属性和属性值的·1元素
        [属性名 ^= 属性值]以指定值开头的元素2
        [属性名 $= 属性值] 指定结尾
        [属性名 *= 属性值] 指定含有某值的元素 
        */
        p[title]{
      
      
            color: orange;
        }
    </style>
</HEad>
    <body>  
            <p title="嘤嘤嘤">111111</p>
            <p title="">222222</p>
            <p>333333</p>

            <p>4444444</p>
            <p>4444444</p>
            <p>4444444</p>
            <p>4444444</p>
            <p>4444444</p>

    </body>

7. Pseudo-class selectors

definition:

non-existent element, special class
concept:
- Pseudo-classes are used to describe the special form of an element, such as the first child element, the clicked element, and the mouse-moved element
- Pseudo-classes generally start :with
Attributes:
- the code

 <style>
        /* 
        伪类  描=描述元素的特殊状态
        比如：第一个 被点击的二元素 鼠标移入的元素
        
        特点：一般情况下，使用户“ ： ”
        */
         第一个子元素 
        ul > li:first-child{
      
      
            color:red;
        }
        /* 最ui后子元素 */
        ul > li:last-child{
      
      
            color:red;
        }
        /* 第n个元素
        特殊值 n =  所有
        2n 偶数位的元素
         
        */
        ul > li:nth-child(3){
      
      
            color:blue;
        }
        ul > li:nth-of-type(2){
      
      
            color: yellow;
        }
        ul > li:nth-child(odd){
      
      
            color: blue;
        }

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

8. Pseudo-class selector for a tag

a:link{...}: normal link
a:visited{...}: Visited links, for the sake of user privacy, visited can only change the color
a:active{...}:Mouse click
a:hover{...}: mouseover

Note that the pseudo class must be written in the above order:link , visited , active , hover(LoVe A Ha)

9. Pseudo-element selectors

::first-letter
::first-line
::selectionselected content
::before
::after, Note : must be used in combination with content

the code

  <style>
        /* 
        伪元素 表示页面中的一些并不真实存在的元素 （特殊的位置）
        伪元素使用 ： 开头
        :: first-leter 表诉第一个字母
        first-line
        selection

        before
        after  结合content使用
        */

        p::first-letter{
      
      
            font-size: 50px;
        }

        p::selection{
      
      
            color: yellow;
        }

        p::before{
      
      
           content: 'rwrwrwrwrw';
            color: red;
        }
    </style>
</HEad>
    <body>  
<p>
    恩惠无法忘记你偶尔翻看就骂我额美女i按我们你1
    古庙看过寂寞klm五图 考虑克拉克闽南人glk
</p>

10. Inheritance of styles

The styles we set for an element are also applied to its descendant elements

Inheritance occurs between ancestors and descendants

For the purpose of development, the inherited designer only needs to write once using inheritance to make all elements have the style

Note : Not all styles can be inherited, such as background-related and layout-related styles will not be inherited

the code

<style>
        p{
      
      
            color: red;
            background-color: burlywood;
        }
        div{
      
      
            color: blue;
        }

        /* 不是所有都会继承  背景相关的，布局相关的不会被继承 */
    </style>
</HEad>
    <body>  
        <p>
            我是p
            

            <span>      w握手span</span>
        </p>

        <span>我是p外面的</span>


        <div>w我是div

            <span>我是div中的<span>
                我是套娃
            </span></span>
        </div>

    </body>

11. Style Conflicts and Priority Issues

When we select the same element with different selectors and set different values for the same style, a style conflict occurs

When a style conflict occurs, the display effect is determined by the priority of the display

selector weight	priority
inline styles	1,0,0,0
ID selector	0,1,0,0
Class and Pseudo-Class Selectors	0,0,1,0
element selector	0,0,0,1
wildcard selector	0,0,0,0
Inherited styles	no priority

When comparing priorities, all the sums should be calculated, and finally the one with the highest priority will be displayed first, and the group selector will be calculated separately
The accumulation of selectors will not exceed the next level, that is, no carry. If the priority is the same after calculation, the style under test will be used first.
Adding !important; after the end of the attribute will get the highest priority, use with caution! !

12. Units of length

pixel:
- The display is actually made up of tiny dots that glow
- Different screen pixel sizes are different
- So the same 200 pixels display different effects on different devices
percentage
- Percentage relative to parent element
- Make the child element change with the change of the parent element
em
- Changes as the font size changes
- 1 em is the size of a word, and the size of the word can be modified inside the div, that is, the font size is its own font size
rem
- 1 rem changes relative to the font size of the root element
- Often used in mobile development

13. Color Units

In css, you can directly use the color name to configure various colors, but it is very inconvenient to directly use the color name to name

RGB value
- RGB is to adjust different colors through different color concentrations
- Each color is in 0-255 or 0-100%
- Syntax: RGB(xx,xx,xx)
RGBA value
- On the basis of RGB, there is an additional transparency value A
- Range 0-1, 1 is completely opaque
- Syntax: RGBA(xx,xx,xx,xx)
Hexadecimal RGB
- Syntax #RGB
- Color Intensity 00-ff
- If two digits are repeated, for example #AABBCC can be written as #ABC
HSL and HSLA values
- used in industrial design
- H Hue (0-360)
- S saturation (concentration 0-100)
- L brightness (brightness 0-100)

2. Document flow and box model

1. Document flow

concept
- We think that a web page is a multi-layer structure, layer by layer
- Can be styled every time through css
- Users only see the top layer
- We call the bottom layer document flow, which is the basis of web pages
  
  The elements we create are arranged in the document flow by default
state

For us there are two main states of the element
- in the document flow
- not in document flow
features

Characteristics of elements in document flow:
- block element
  
  - will be on a single line in the page
  - The default width is to fill the parent element
  - The default height is to be stretched by the child element
- inline element
  - Will not occupy one line of the page exclusively, and the value occupies its own size
  - Arranged from left to right
  - consistent with writing habits
  - The default height and width of inline elements are stretched by the content

2. Box Model Basics

concept
- CSS sets all elements of the page as a rectangular box
- After setting the element as a rectangular box, the layout of the web page becomes different positions for different boxes
- Each box has the following parts
  - content area
  - padding
  - border
  - margin
Attributes
- border-width
- border-color
- border-style
  
  The size of the border will affect the size of the box
  
  example
- border-width: 10px;
- border-color: red;
- border-style: solid;

3. Border of the box

concept

Specify the border thickness in four directions. If you don’t write, the default is 3px. If you write four values, it’s the default . When there 上右下左are two values , the left and right are the same第四个值同第二个上下同
Attributes

border-styleAttributes:
- solidsolid line
- dasheddotted line
- doubledouble line
- The default value isnone

4. The padding of the box

The distance between the border time of the content area
There are four paddings
Padding settings affect the size of the box
The background color extends over the padding
The size of the box is determined by the content area, border, and padding

5. Margins

Margins do not affect the size of the visible box
Margins affect the position of the box
There are four margins
The elements will be arranged in order from left to right as much as possible. By default, if we set the upper left margin, it will affect ourselves, and the lower right will affect others
You can also set a negative value, but the element will move to the left
Mergin does not affect the size of the element's visible box, but does affect the actual size of the box

6. Horizontal layout of boxes

The position of the element within the parent element is determined by the following properties:

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

An element 's margin-left+border-left+padding-left+width+padding-right+border-right= parent element width of the child element in its parent element (must be satisfied)

When the equation does not hold, we call it over-constrained , and we will automatically adjust it at this time

If there is no auto among the 7 values, it will be adjusted firstmargin-right

Three of these 7 values can be set to auto
- width (默认是auto)
- margin-left
- margin-right
If a certain value is auto, it will automatically adjust that value first.
If a width and a margin are auto, then the width will be adjusted to the maximum
If all three are auto, then the width will be the largest
If the outer margins are all auto, then the two autos will be assigned the same value (this feature is often used to achieve horizontal centering)

7. Vertical layout of the box model

features
- The height of the box defaults to the height of the parent element being stretched by the child element
- Child elements are arranged in the content area
- If the size of the child element exceeds the parent element, the child element will overflow from the parent element
Attributes

overflow

Optional values:
- visible: (default) child elements overflow from the parent element and appear outside the parent element
- hidden: overflowing elements will be clipped and not displayed
- scroll: Generate two scroll bars, browse through the two scroll bars
- auto: generate two scrollbars as needed

8. Margin collapsing problem

features

Adjacent vertical margins collapse
different elements,
- adjacent element
  - Overlap occurs between vertical margins
- brother element
  - Adjacent vertical margins between sibling elements will take a larger value.
    In special cases,
    if two are positive and one negative, take the
    sum; if both are negative, take the one with the larger absolute value
- parent-child element
  - Margins between parent and child elements child elements are passed to the parent element
  - Parent-child margin collapsing will affect the page

9. Box model for inline elements

lead out
- Inline elements do not support setting width and height
- Inline elements can be set padding, but the vertical direction paddingwill affect the layout of the page if it is not blurred
- Inline elements can be set border, and the vertical direction borderwill not affect the layout of the page
- Inline elements can be set margin, and the vertical direction marginwill not affect the layout
Attributes:

display: Used to set the display type of the element

Optional values:
- inline: set the element as an inline element
- block: Sets the element as a block element
- inline-block: Sets the element as an inline-block element
  
  Features: You can set the width and height without occupying a line
- table: set the element to a table
- none: hides the element and does not occupy the page position
visbility: Used to set the display state of the element

Optional values:
- visable: The default value, the element is displayed normally on the page
- hidden: The element is hidden or not displayed on the page, and still occupies the position of the page

10. Default styles (reset style sheet)

reset.cssremove all css styles
normalize.cssIt unifies the css style but does not remove it

<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/normalize.css">

11. The size of the box

By default, the size of the box's visible frame is determined by the content area, inner border and border
Attributes:

box-sizingUsed to set the calculation method of the box size (the role of setting width and height)

Optional values:

context-box: default value, width and height are used to set the size of the content area

border-box: Width and height are used to set the size of the visible frame of the entire box
```
width和 height值的是内容区和内边距和边框的总大小
```

12. Box Outline, Shadow and Rounded Corners

Attributes

outline:

Set the outline of the element, the usage is consistent with border

The outline does not affect the size of the visible box

box-shadow:

Used to set the shadow effect of the element without affecting the page layout

The first value: horizontal offset, set the horizontal position of the shadow, positive to the right, negative to the left

The second value: vertical offset, set the vertical position of the shadow, positive down, negative up

Third value: the blur radius of the shadow

Fourth value: the color of the shadow

border-radius：

Used to set the corner line of the element, the usage is the same as border, two radii can be given:椭圆

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-right-radius

3. Floating layout

1. Introduction to floating

Floating can make an element move to the left or right of its parent element, and use floatthe property to set the floating of the element

Optional values:

noneDefault value elements are not floated
leftfloat left
rightfloat right

Note: After the element is set to float, the equation of horizontal layout does not need to be enforced; after the element is set to float, it will be completely separated from the document flow, and will not occupy the position of the document flow, so the elements below the element that are still in the document flow will be Move up automatically.

Features:

Floated elements will completely break out of the document flow and no longer occupy a position in the document flow.
After setting floating, the element will move to the left or right of the parent element.
Floated elements do not move out of parent elements by default.
When a floating element moves to the left or right, it will not pass other floating elements in front of it.
The top of the floating element is a non-floating block element, so the floating element cannot be moved up.
A floating element will not exceed the floating sibling element above him, at most it will be as tall as him.

2. The characteristics of floating

Ordinary elements will not cover the text, and the text will automatically wrap around the floating element.
After the element is set to float, it will be separated from the document flow, and some characteristics of the element will also change after being separated from the document flow.
Features of out-of-document flow
- block element
  - Block elements no longer occupy a single line of the page.
  - After leaving the document flow, the height and width of the block element are expanded by the content by default.
- inline element
  - Inline elements will become block elements after leaving the document flow, with the same characteristics as block elements.

3. High collapse

lead out

In a floating layout, the height of the parent element is stretched by the child element by default.

After the child element floats, it will be out of the document flow, and the child element will be out of the document flow, and will not be able to support the height of the negative element, resulting in the loss of the height of the parent element.

After the height of the parent element is lost, the elements below it will automatically move up, resulting in confusion in the layout of the page

4. `BFC`Properties

introduce

BFC(Block Formatting Context)- - block-level formatting environment

Turning on BFCthis element will become an independent layout area.
Features:
1. Opened BFCelements will not be covered by floating elements.
2. The open BFCelement's child element and the parent element's outer margin will not overlap.
3. The opened BFCelement can contain floating child elements.
Opening method:
1. Sets the element's float.
2. Sets the element as an inline-block element.
3. Sets the element's value overflowto a not-for-one-not visablevalue.
  
  set overflow:hidden, turn onBFC

5. `_clear`Properties

leads to:

If you don't want an element to change its position due to the influence of other elements' floating, you can use _clearattributes to clear the influence of floating elements on the current element
effect:

Clear the effect of floating elements on the current element
Optional values:

left：Clear the influence of the left element on the current element

right：

botn:Clear the one with the greatest influence of the elements on both sides

principle:

After clearing the float, the browser will automatically add an upper margin to the element so that its position will not be affected by other elements

6. `after`Pseudo-classes

principle

Add a pseudo-element to an element that is not floating, and set _clearproperties for it to clear the influence of floating elements, but afterit is an inline element,

Just convert it into a block element,display：block

7. `clearfix`class

focus

code:

<style>
  .clraefix :: befroe,
  .clraefix :: after, {
      
      
    content: '';
    display:table;/*同时解决高度塌陷，和外边距重叠*/
    clear:both;
  }
</style>

5. Positioning

1. Introduction to Positioning

position: A more advanced layout method

通过定位可以将元素摆到页面的任意位置

使用`psition`属性来设置定位

Optional values:

static：By default, the element is static and positioning is not enabled

relative：Enable relative positioning of elements

absolute：Enable absolute positioning of elements

fixed：Enables fixed positioning of elements

sticky：Enables sticky positioning of elements

2. Relative positioning

relative：

Features:
- After it is turned on, no offset is set, and the element will not change in any way
- Relative positioning is positioned with reference to the position of the element in the document flow.
- Relative positioning elevates the element's hierarchy. Will cover the elements below after the move.
- Relative positioning does not take elements out of the document flow.
- Relative positioning does not change the nature of the element, block elements remain block elements, inline elements remain inline elements.
offset ( offset)

When the element is positioned, the position of the element can be set by the offset

Optional values:top left right bottom

3. Absolute positioning

absolute：

features
- After enabling absolute positioning, if no offset is set, the position of the element will not change.
- When absolute positioning is enabled, the element will break out of the document flow.
- Absolute positioning will change the nature of the element, and the inline element will become a block element. The width and height of the block are stretched by the content.
- Absolute positioning will raise the element one level.
- Absolutely positioned elements are positioned relative to other containing blocks.
contains block ( Containing block)
- Under normal circumstances
  
  The containing block is the closest ancestor block element to the current element.
- Absolutely positioned containing block
  
  The containing block is the closest ancestor element with positioning turned on.
  
  If none of the adjacent ancestor elements has positioning enabled, it is positioned relative to the root element.
- html(root element, initial containing block)

4. Fixed positioning

fixed：

Features:
- Fixed positioning is also a kind of absolute positioning, and the characteristics are the same.
- Fixed positioning is always positioned relative to the browser's viewport.
- Fixed positioning does not change position with the scroll bar of the browser window

5. Sticky positioning

sticky：

features
- Sticky positioning can fix an element when it reaches a certain position.

6. Layout of absolutely positioned elements

The horizontal layout must satisfy the width of the containing block
vertical layout

7. Hierarchy of elements

For elements with positioning enabled, z-indexthe level of the element can be specified through attributes

z-indexThis number needs to be used as a parameter. The higher the value, the higher the level of the element, and the higher the level of the element, the higher the priority to display
- By default, the lower the element is, the higher the priority will be displayed
- No matter how high the level of the ancestor element is, it will not cover the descendant element

8. Positioning carousel map practice

6. Fonts and backgrounds

1. font

Related styles:

color ：Used to set the font color
font-size：related units

emcurrent element'sfont-size
remrelative to the root element'sfont-size

font-familyfont family (the format of the font)
- serifSerif font (with hook)
- sans-serifSans serif fonts (horizontal, horizontal and vertical)
- monospaceMonospaced fonts (letters are the same width as the letters)
  
  Specify the font category, and the browser will automatically use the fonts under this category
  
  Multiple fonts can be specified at the same time, the first one is used by default, and the latter one is used if it does not exist
@font-face
- font-family- - Specifies the name of the font
- src：url()- - The path in the server format()- - Inform the browser of the font format
The fonts in the server can be directly provided to users
```
问题：1. 加载速度 2. 版权 3. 字体格式问题
```

2. Introduction to icon fonts

iconfont: It is often necessary to use some icons in web pages, and icons can be introduced through pictures. But the picture itself is relatively large and very inflexible.

So when using icons, you can directly set the picture as a font, and then font-faceimport the font in the form of
Fontawesome usage steps
- download
- decompress
- Move css and webfonts into the project
- Import all.css into the web page
- Use icon fonts
  
  Icon fonts are used by class names, which are mainly divided into two categories : fasandfab
  
  <i calss ="fas fa-bell">
Example of use

<!-- 1. 通过伪元素 -->
    <!-- 找到要设置图标元素的before或after选中-->
    <!-- 在content中设置字体的编码-->
    <!--设置字体的样式-->
li::before{
    content: "\f1b0";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;           /*fab需要单独设置*/
    color: blue;
    margin-right: 10px;     
}

<!-- 2.通过实体的方式实现，class类名。 &#x+图标的编码9 -->
<span class="fas">&#xf0f3;</span>

<!-- 3. -->
<i class="fas fa-cat"></i>

3. Line height

line height（line height）

The line height value is the actual height occupied by the text
line-heihgtYou can set the row height by

The line height can directly specify the size (px.em)

You can also directly set an integer for the row height

Line height is often used to set the line spacing of text ( 行间距 = 行高 - 字体大小)
font box

It is the grid where the font exists, and the setting font-sizeis actually setting the height of the font
The line height will be evenly distributed above and below the font box,

(The line height is set to the same value as the box height, so that the single-line text is vertically centered in an element)

4. Shorthand attributes of fonts

<style>
  /* 字号 + 字体*/
  font: 50px Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  /*字号 + 行高 + 字体*/
  font: 50px/5 Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
</style>

Attributes:

font-weight: font bold

normal: default value, no bold

bold: bold

100- 900Nine levels
font-size：
font-style: font style

normal ：

italic: italics

5. Horizontal and vertical alignment of text

text-align: horizontal alignment of the text
- left: align left
- right: align right
- center: center alignment
- justify: justify
vertical-align: Set the way the element is vertically aligned
- baseline: Baseline alignment, (text bottom alignment)
- top: top alignment
- bottom: Bottom alignment
- middle: center alignment

6. Other Text Styles

text-decoration: set text decoration

none

underlineunderline

line-throughstrikethrough

overlineunderline
white-space: Set how the page handles white space

normalnormal

nowrapno line break

preleave blank
text-overflow: overflow shows an ellipsis ( ellipsis)

7. Background

Background picture:background-image

background-image:url("")
- You can set the background image and background color at the same time, so that the background color will become the background color of the image
- If the background image is smaller than the element, the background image will be automatically tiled in the element to fill the element
- If the background image is larger than the element, part of the background will not be fully displayed
- If the background image is the same size as the element, it will be displayed normally
background repeat methodbackground-repeat
- repeatDefault: the background will be along the x-axis. Repeat in both directions on the y-axis
- repeat-x: Repeat along the x-axis
- repeat-y: Repeat along the y-axis
- no-repeat: The background image does not repeat
background image locationbackground-position
- top left center bottom rightUsing localizers, specify both values at the same time,
- specified by offset
range of backgroundbackground-clip

border-boxDefaults. The background will appear below the border

padding-box, the background will not appear in the border, only in the content area and padding

content-boxAppears only in the content area
The origin of the offset calculation of the background imagebackground-origin

padding-boxDefault, calculated from padding (associated background-position)

content-boxCalculated from content area

border-boxcount from border
background image sizebackground-size

The first value represents the width, and the second value represents the height. If only one value is written, the other value isauto
Whether the background image moves with the elementbackground-attachment
- scroll: Default value, the background image moves with the element
- fixed: The background will be fixed on the page and will not move with the element
question
- It can be abbreviated, but sizeit must be uninstalled positionand separated by "/". orginto be clipahead
- There is a flickering problem in the picture. Move in and click to load a different picture. There will be a flickering problem. Set it to one picture and adjust the spacing every time.
opacity: set to transparent

8. Sprite

The use of sprite map:
- Decide which icon to use
- Measure the size of the icon
- Create an element from a measurement
- Set the sprite image as the background image of the element
- Set an offset to display the correct image
Features of Sprite

Load multiple images into the page at one time, reduce the number of requests, speed up the access speed, and improve the user experience

9. Linear Gradients

background-image

Gradients are pictures

Linear gradient, where the color changes along a straight line

linear-gradient（）The direction of the gradient can be specified at the beginning

to right

xxxdeg degIndicates degrees

turnIndicates the circle

repeating-linear-gradient()Linear gradients that can be tiled

Multiple colors are distributed evenly by default

.box1{
    
    
  height:10px;
  background-image:linear-gradient (to right red 50px,black ,white 50%)
 }
 .box1{
    
    
  height:10px;
  background-image:repeating-linear-gradient (to right red,black ,white 50px)
  /* 50px一个渐变*/
 }

10. Radial Gradient

radial-gradient()

Radiant effect, by default, the shape of the radial gradient is calculated according to the shape of the element

You can also specify the size of the center of the circle
- circle
- ellipse
Specify the position of the gradient
- （100px 100 px at center center）

.box1{
    
    
   background-image:radial-gradient(ellipse,red,yellow)
 }

7. Project Supplement

1. Browser address bar icon

Set the icon of the website (title bar and favorite bar)

Website pictures are generally stored in the directory of the website, and the names are generally calledfavicon.ico

2. The loading speed of the website (compression)

Delete the code description, format the unnecessary spaces and newlines

Eight, animation and transition

1. transition

transition

Specify the switching mode when an attribute changes through the transition; through the transition effect, you can create very good effects and improve the user experience
Attributes:
- transition-property
  
  Specify the attributes to be transitioned: width，height., ，spaced between attributes, all used all; as long as the value can be calculated, it can be transitioned, and most elements can be transitioned.
  
  Note: The transition must be a transition from one valid value to another valid value.
- transition-duration
  
  Specify the duration of the transition effect: 2s, you can specify the time separately, ，separated by
- transition-timing-function
  
  Excessive timing function: 2s, specifies the execution mode of the transition; Bezier curve
  
  Optional values
  - ease: Default value, start at slow speed, accelerate first, then decelerate
  - linear: Uniform motion
  - ease-in: Accelerate motion
  - : ease-outDecelerate motion
  - ease-in-out: Accelerate first, then decelerate
  - cubic-bezier(): Specify timing function https://cubic-bezier.com
  - steps: distribution to perform transition effects
```
    可以设置两个值：第一个是时间，第二个为`end`、`start`,时间结束执行，和开始执行
```
- transition-delay
  
  Set the delay of the transition effect, after the corresponding time, perform the transition.

2. Animation

concept

Animation and transition are similar, and some dynamic effects can be achieved. Different transitions need to be triggered when a certain attribute changes, and animation can automatically trigger dynamic effects.
Animate
- @keyframes test
  
  to: Indicates the position where the animation ends, you can use %
  
  from: Indicates the position where the animation starts, you can use %
- animation-name：test
  
  The name of the keyframe to apply to the current element
- animation-duration：
  
  animation execution time
- animation-delay：
  
  animation delay
- animation-timing-funaction:
- animation-iteration-count:
  
  The number of times the animation was executed
  
  Times: number
  
  infinite:unlimited
- animation-direction：
  
  Specifies the direction in which the animation runs
```
`normal`：默认值 from—>to

`reverse`：反向

`alternate`：from—>to—>from重复执行动画是，会循环

`alternate-reverse`：to—>from—>to
```
- animation-play-stat：
  
  Set the state of animation execution
  
  running: default value, animation execution
  
  paused: animation paused
- animation-fill-mode：
  
  animation fill mode
  
  none: The default value animation is completed and returns to the initial value
  
  forwards: After the animation is executed, the element will stop at the position where the animation ends
  
  backwards: When the animation delay waits, the element will be at the start position
  
  both: combined forwardswithbackwards
- Code example: falling of a small ball

<!--案例  小球的落体-->
 <style>
        .box1{
      
      

            border-bottom: 10px  black solid;
            height: 500px;

            overflow: hidden;
        }


        .ball{
      
      
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #497194;
            animation: run 1s forwards infinite ease-in;
        }
        @keyframes run {
      
      
        from{
      
      
                margin-top: 0;
            }

            80%{
      
      
                margin-top: 450px;

            }

        }

    </style>
<div class="ball"></div>
<div class="box1"></div>

3. Deformation translation

transform
- translateX(), translateY(), translateZ(): translation along the corresponding axis
  
  When translating an element, the percentage is calculated relative to itself.
  
  Z-axis translation, under normal circumstances, is to adjust the distance between the element and the human eye. The larger the distance, the closer the element is to the human. The effect of the z-axis is a three-dimensional effect. By default, the effect of the web page does not support perspective, and the near side is larger than the far side.
  
  perspectiveIf you need to see the effect, you must set the viewing distance of the web page, just set the html
- rotateX()、rotateY()、rotateZ()：
  
  backface-visibility：hidden; Whether to show the back of the element
  
  By rotating, the element can be rotated by a specified angle along x, y or z
- scale(), scaleX(), scaleY()zoom
- the code

 <style>
      html{
      
      
          /*perspective: 800px;*/
      }

      .box1{
      
      
          width: 200px;
          height: 200px;
          background-color: #f3f156;
          margin-top :200px;
          margin-left: 400px;
          /*transform:  translateZ(200px);*/
          transition: 2s ;
      }

      body:hover .box1{
      
      
          /*transform: rotateZ(720deg);*/
          /*transform: rotateX(.5turn);*/
          transform: rotateY(.5turn);
          /*transform: rotateX(.5turn) rotateY(.5turn) rotateZ(.5turn); */
          /*transform: rotateY(45deg) rotateZ(50deg);*/
          /* 要把transform写在一起，但是有先后优先级 */
          /*transform: rotateY(180deg) translateZ(400px);   !*Y轴是位置不变的*!*/
          /*transform: translateZ(400px) rotateY(180deg);   !*Y轴是变化位置的*!*/
          /*是否显示元素背面*/
          backface-visibility: hidden;

          background-color: red;
      }


  </style>
    <div class="box1"></div>
    <div class="box2"></div>

transform-style：preserver-3d

3D effect

4. Duck table code

the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }

        .clock {
      
      
            width: 500px;
            height: 500px;
            margin: 0 auto;
            margin-top: 100px;
            border-radius: 50%;

            position: relative;
            background-image: url("https://img0.baidu.com/it/u=1025810358,239117816&fm=26&fmt=auto");
            background-size: cover;
        }
        .clock > div{
      
      
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin:  auto;
            position: absolute;
        }
        .hour-warapper {
      
      
            height: 70%;
            width: 70%;
            animation: run 720s linear infinite;
        }
        .min-wrapper{
      
      
            height: 80%;
            width: 80%;
            animation: run 60s steps(60) infinite;
        }
        .sec-wrapper{
      
      
            height: 90%;
            width: 90%;
            animation: run 1s steps(60) infinite;
        }
        .hour{
      
      
            width: 6px;
            height: 50%;
            background-color: #777777;
            margin:  0 auto;
        }
        .min{
      
      
            width: 4px;
            height: 50%;
            background-color: #8fd76b;
            margin:  0 auto;
        }

        .sec{
      
      
            width: 2px;
            height: 50%;
            background-color: #777777;
            margin:  0 auto;
        }


        @keyframes run {
      
      
            from {
      
      
                transform: rotateZ(0);
            }
            to {
      
      
                transform: rotateZ(365deg);
            }

        }

    </style>
</head>
<body>
<!--    创建表的容器-->
<div class="clock">
    <!--     创建时针-->
    <div class="hour-warapper">
        <div class="hour"></div>
    </div>
<!--    创建分针-->
    <div class="min-wrapper">
        <div class="min"></div>
    </div>
<!--    秒针-->
    <div class="sec-wrapper">
        <div class="sec"></div>
    </div>
</div>

</body>
</html>

Nine, less

1 Introduction

less is a css preprocessing language, less is an enhanced version of css, through less you can write less code and achieve more powerful styles,

Many new features have been added to less, such as support for variables and mixins. The syntax of less is generally consistent with the pre-syntax of css, but many extensions to css functions have been added to less.

Therefore, the browser cannot directly execute the less code. To execute it, it must first convert less to css, and then execute it by the browser.

  html{
    
    
        /*    css原生也支持设置变量*/
            --color :#bfa;
        }
        .box1{
    
    
            width: 100px;
            height: 100px;
            background-color:  var(--color);
        }

Single-line comments in less, the content in the comments will not be parsed into css9
Comments in css, the content will be parsed into the css file

2. Variables in less

        
//变量的语法
@a:200px;
@b:200px;
@c:box1;
.box1{
    
    
  width:@a;
}

//作为类名，或者一部分使用时，必须以@{
    
    变量名}的形式使用
.@{
    
    c}{
    
    
  width: @a;
  background-color: #8fd76b;
  background-image: url("@{c}/1.png");
  color: $background-color;
}

3. Parent elements and extensions

the code

.box1{
    
    
  width: 100px;
  height: 100px;
  .box2{
    
    
    color:red;
  }

  >.box3{
    
    
    color: red;
    &:hover{
    
    
      color: #9a6e3a;
    }
  }

  //为box设置hover
  // & 表示外层的父元素
  &.box1:hover{
    
    
    color:orange;
  }

  //:extent() 对当前选择器扩展指定选择器的样式
  .p2:extend(.box1){
    
    
    color: #63a35c;
  }

  .p3{
    
    
    //直接对指定的样式进行引用，相当于将p1的样式进行了复制
    .p2()
  }
  //使用类选择器时，可以再选择器后添加一个括号，实际上就是创建了一个mixins混合选择器
  .p4(){
    
    
      width: 100px;
    height: 350px;
  }
  .p5{
    
    
    .p4()
  }
}

.box1,
.box1 .p2 {
    
    
  width: 100px;
  height: 100px;
}
.box1 .box2 {
    
    
  color: red;
}
.box1 > .box3 {
    
    
  color: red;
}
.box1 > .box3:hover {
    
    
  color: #9a6e3a;
}
.box1.box1:hover {
    
    
  color: orange;
}
.box1 .p2 {
    
    
  color: #63a35c;
}
.box1 .p3 {
    
    
  color: #63a35c;
}
.box1 .p5 {
    
    
  width: 100px;
  height: 350px;
}
/*# sourceMappingURL=style2.css.map */

4. Blend function

the code


  //可以设置默认值
  .test(@w:1px){
    
    
    width: @w;
    height: 100px;
    border: 1px solid red;
  }
  div{
    
    
    //调用混合函数，顺序传值
    .test(1000px)
  }
  span{
    
    
    .test(@w: 10px)
  }

5. supplement

All values in less can be directly calculated
@import "1.less"Introduce other less styles

Ten, flex elastic layout

1 Introduction

flex (elastic box, stretch box)

It is a layout method in css, which is mainly used to replace floating to complete the layout of the page
Flex can make elements elastic, so that elements can change with the size of the page

flex container

To use flexbox, the element must first be set as a flex container
By displaysetting up the flex container
- display:flexSet as a block-level element
- display:inline-flexSet the flex container inside the majestic row

elastic element

A child element of a flex element is a flex element (flex item)
A child element can be both a flex container and a flex element

2. Properties

flex-directionSpecifies the arrangement of flex elements in the container
- row: Default value, horizontal arrangement (left to right)
- row-reverse: Reverse
- column: Flexible elements are arranged vertically (top to bottom)
- column-reverse: Reverse
Main axis: The arrangement direction of elastic elements is called the main axis

Side axis: The direction perpendicular to the main axis is called the side axis
flex-grow: Specifies the coefficient of stretching of the elastic element
- Specify how the child element stretches when the parent element has extra space; the space of the parent element will be allocated proportionally
flex-shrink: Specifies the shrinkage factor of the elastic element
- When the space in the parent element is not enough to accommodate all the child elements, if the child elements are shrunk.
The calculation method of the reduction factor is more complicated, and the reduction is calculated based on the reduction factor and the element size

3. Styling the flex container

flex-wrapSet whether the flexible element wraps automatically in the flexible container
- nowrap: The default value, the element will not automatically wrap
- wrap: The element automatically wraps along the minor axis
- wrap-reverse: Element wraps in the opposite direction of the main axis
flex-flow： wrapdirectionshorthand for and
- flex-flow：row wrap
justify-content: how to allocate empty space on the main axis
- flex-start: Elements are arranged along the main axis
- flex-end: elements are arranged along the terminal edge of the main axis
- center: elements are centered
- space-around: white space distributed to both sides of the element
- space-evenly: Whitespace distributed to one side of the element
- space-between: space is distributed between elements
align-items: How to align elements on the auxiliary axis, and the relationship between elements
- stretch: Set the element length to be the same
- flex-start: align along the minor axis
- flex-end: Align along the terminal edge of the minor axis
- center: center alignment
- baseline: baseline alignment
align-content: Distribution of minor axis blanks

4. Styling of flex elements

flex-grow
flex-basis: The base length of the element, which specifies the base length of the element on the main axis. If the main axis is horizontal, this value specifies the width of the element; if the main axis is vertical, this value specifies the height of the element

The default value is auto, indicating the height or width of the reference element itself

If a specific value is passed. then this value shall prevail.
The flex elastic element can set all three styles of the element

flex : grow and shrink the base length
order: Determines the arrangement order of elastic elements

11. Pixels

1 Introduction

pixel

The screen is made up of small dots that emit light one by one, and these dots are called pixels.

Resolution: 1920 x 1080 refers to the number of small dots on the screen

In front-end development, pixels are mainly divided into two situations for discussion, CSS pixels and physical pixels.

Physical pixels: the little dots above.

css pixels: When writing web pages, all we use are css pixels
```
浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现

一个css像素最终由几个物理像素显示，由浏览器决定

默认情况下，在pc端，一个css像素=一个物理像素
```
viewport _

The viewport is the area of the screen that the browser uses to display web pages. By default, the viewport width is 1920 pixels (css pixels), physical pixels (1920);
mobile phone pixel

A smartphone has far fewer pixels than a computer. By default, the viewport will be set to 980 pixels (css pixels) when the mobile phone gets a web page. But if the width of the webpage exceeds 980px, my browser on the mobile terminal will automatically zoom the webpage to display the webpage completely.

Basically, most websites on the PC side can be browsed normally on the mobile side.

<meta>The viewport size can be set via a tag. Every mobile device will have its own pixel ratio. A viewport size that sets the pixel ratio to the optimal pixel ratio is called a perfect viewport.

You can set device-widththe width of the device

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

2. vw unit

leads to:

Different devices have different perfect viewports. Because different device viewports and pixel ratios are different, the same pixels are different on different devices. For example, one device is full-screen, and another device is not full-screen or cannot fit. A scroll bar appears. Therefore, when developing on the mobile terminal, px cannot be used for layout of web pages.
Introduction:

New unit: Indicates the width of the viewport ( viewport width), 100vw is the width of a viewport. The vw unit is always calculated relative to the viewport width

The width of common mobile design drawings: 750px, 1125px. Both are multiples of 375px, thinking that the default 1css pixel == 2px

100vw = 750px
vw adaptation

rem: Same size as html font-size, the minimum font size in a web page is 12px, you cannot set a font smaller than 12px

12. Media inquiries

1. Responsive layout

Web pages can display different effects according to different devices or window sizes
Use responsive layouts to make one web page work on all devices
The key to responsive layout is media queries
Through media queries, you can set styles for different devices and different states of the devices.

2. Using media queries

<style>

    @media
    
</style>

Syntax: @media query_rule()

media type

allall equipment
printprinting device
screendevice with screen
speechscreen reader

It can be used to connect multiple media types with an OR relationship between them.

The use of only is mainly for compatibility with some old browsers