Second week weekly report

Posted by RottenBananas on Sun, 28 Nov 2021 08:38:27 +0100

Container element

This element represents an area where other elements are placed.

1. div element

No semantics (browsers don't know what's in div)

2. Semantic container element

Header: usually used to represent the page header or the article header.
Footer: usually used to represent the footer or the end of an article.
Article: usually used to represent the whole article.
section: usually used to represent a chapter of an article.
aside: usually used to represent a sidebar.

Element containment relationship (now completely depends on semantics)

Previously: block level elements can contain row level elements, and row level elements cannot contain block level elements, except a element.
The inclusion relationship of elements is determined by the category of elements.

summary

1) Container elements can contain any element.
2) The a element can contain almost any element.
3) Some elements have fixed child elements (UL > Li, ol > Li, DL > DT + DD)
4) Title elements and paragraph elements cannot be nested with each other and cannot contain container elements.

Add styles to web pages

     h1{
            color:red;
            background-color:rosybrown;
            text-align:center;

        }

CSS rule = selector + declaration block

1. Selector

Selector (h1 before curly braces): selected element
1) Element selector
2) id selector

 <style>
        #test{color:sandybrown};
    </style>
</head>
<body>
    <p id="test">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio ea incidunt accusantium quas, itaque cumque? Ducimus nisi fuga, veniam eius ullam, sunt nulla itaque non temporibus nostrum, odit exercitationem inventore!</p>
    <p>Cupiditate sequi repudiandae minima incidunt, tempora praesentium quidem corporis mollitia ipsa reiciendis suscipit inventore aperiam? Ad, laudantium aliquam? Libero, laudantium repellendus aspernatur soluta laboriosam vero suscipit voluptas doloribus atque voluptatibus.</p>
    <p>Asperiores, facilis? Saepe nobis vel id nesciunt, fugiat porro quo ab dicta incidunt velit esse beatae nostrum perferendis veritatis tempore consectetur sunt? Id cum delectus ex hic illo deleniti inventore.</p>
</body>

3) Class selector (class represents class)

<style>
        .red{
            color:limegreen;

        }
        .big{font-size:3em;}
</style>
</head>
<body>
    <p class="red big"><!--It turns green and enlarges-->Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio ea incidunt accusantium quas, itaque cumque? Ducimus nisi fuga, veniam eius ullam, sunt nulla itaque non temporibus nostrum, odit exercitationem inventore!</p>
    <p>Cupiditate sequi repudiandae minima incidunt, tempora praesentium quidem corporis mollitia ipsa reiciendis suscipit inventore aperiam? Ad, laudantium aliquam? Libero, laudantium repellendus aspernatur soluta laboriosam vero suscipit voluptas doloribus atque voluptatibus.</p>
    <p>Asperiores, facilis? Saepe nobis vel id nesciunt, fugiat porro quo ab dicta incidunt velit esse beatae nostrum perferendis veritatis tempore consectetur sunt? Id cum delectus ex hic illo deleniti inventore.</p>
</body>

2. Declaration block (in curly brackets)

Attribute +: + attribute value
The declaration block contains many declarations (attributes), and each declaration (attribute) expresses a certain style.

3. CSS code writing location

1) Internal style sheet
Write in style (usually in head, flash if it is written after)
2) Inline style sheet, element style sheet
Write directly in the style attribute of the element

<p style="color:maroon">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio ea incidunt accusantium quas, itaque cumque? Ducimus nisi fuga, veniam eius ullam, sunt nulla itaque non temporibus nostrum, odit exercitationem inventore!</p>
    <p>Cupiditate sequi repudiandae minima incidunt, tempora praesentium quidem corporis mollitia ipsa reiciendis suscipit inventore aperiam? Ad, laudantium aliquam? Libero, laudantium repellendus aspernatur soluta laboriosam vero suscipit voluptas doloribus atque voluptatibus.</p>
    <p>Asperiores, facilis? Saepe nobis vel id nesciunt, fugiat porro quo ab dicta incidunt velit esse beatae nostrum perferendis veritatis tempore consectetur sunt? Id cum delectus ex hic illo deleniti inventore.</p>

3) External style sheet
Write styles to a separate css file

.red-big-center{
    color:blueviolet;
    font-size:5em;
    text-align:center;
}

 <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="red-big-center">
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi atque dolor similique placeat quam suscipit perferendis neque, assumenda tenetur unde itaque quaerat cumque laudantium beatae voluptatum quasi eligendi quos deleniti?
    </div>
    
</body>

External style sheets can solve the problem of multiple page style duplication
It is conducive to browser caching, so as to improve page response speed
It is conducive to code separation (HTML and CSS) and easier to read and maintain

Common style declaration

1,color

Text element inside element
The default value defines the word.
**Three primary colors, color value: * * optical three primary colors (red, green and blue). Each color can be expressed by numbers between 0 and 255. The combination of the numbers of the three colors is the color value.

rgb Representation:
rgb(0,255,0)
hex(hexadecimal)Representation:
#Red green blue

Taobao Red: #ff4400,f40
Black: #000000, #000
White: #ffffff, #fff
Red: #ff0000,#f00
Green: #00ff00,#0f0
Blue: #0000ff,#00f
Purple: #f0f
Qing: #0ff
Yellow: #ff0
Ash: #ccc

2,background-color

Element background color

3,font-size

The size of the text inside the element
1) px: pixel (absolute unit), which is simply understood as the number of pixels occupied by the text height
2) em: relative unit, relative to the size of the parent element
Each element must have a font size. If it is not declared, the font size of the parent element is used. If the parent element is not set or has no parent element, the base font size is used

User agent, UA, user agent (browser)

4,font-weight

Text thickness can be numeric or preset. (bold bold, normal)
Strongelements are bold by default

5,font-family

Text type
A font that exists on the user's computer must be valid.

<style>
       div{font-family:consolas,Microsoft YaHei, Arial，sans-serif}
   </style>
</head>
<body>
   <div>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi atque dolor similique placeat quam suscipit perferendis neque, assumenda tenetur unde itaque quaerat cumque laudantium beatae voluptatum quasi eligendi quos deleniti?
        Hello
   </div>
   
</body>

Sans serif: sans serif font (no decoration on the edge)

6,font-style

Font style, usually used to set italics.

<style>
        div{font-style:italic}<!--If the attribute value is normal Does not tilt-->
    </style>
</head>
<body>
    <div>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi atque dolor similique placeat quam suscipit perferendis neque, assumenda tenetur unde itaque quaerat cumque laudantium beatae voluptatum quasi eligendi quos deleniti?
         Hello
    </div>
    </body>

i element, em element: the default style is italic font; In practical use, it is usually used to represent an icon.

7,text-decoration

Line through: a line passes through the middle
overline: add a line above
underline: add a line below
none: indicates that there is no line

a element
del element: wrong content (the default style is one line in the middle, but CSS can be changed)
s element: expired content (the default style is one line in the middle, and CSS can also be changed)

8,text-indent

Indent first line of text
Example:
2em: indent two words (Chinese)
20px: indent 20 pixels

9,line-height

The height of each line of text, the greater the value, the greater the spacing of each line of text.
Set the row height to the container height to center the single line text vertically (single line text)
The row height can be set to a pure number, indicating the font size relative to the current element (multiline text)

10,width

width

11,height

height

12,letter-space

Text gap (taken as pixel value)

13,text-align

Horizontal arrangement of text inside the element (left,center,right)

selector

Simple selector

Selector: it can help you accurately select the desired elements

1. ID selector

2. Element selector

3. Class selector

4. Wildcard selector

Indicates that all elements are selected.

5. Attribute selector

Select according to the attribute name and attribute value.

[href]{
    color:cadetblue;
}

[href=(Attribute value)]{
    color:cadetblue;
}

$: end with ···
Search attribute selector mdn

6. Pseudo class selector (preceded by:)

Select a certain state of some elements
hover: indicates the state of moving the mouse 3

:hover{color:cadetblue;}/*If no element is selected, all elements are applied*/

Check a

a:hover{color:cadetblue;}/*Select the a element on mouse over*/

Active: active state, mouse down state. four

a:active{color:cadetblue;}/*Select the a element when the mouse is pressed*/

link: status when the hyperlink is not accessed 1

Visited: hyperlink visited state 2

7. Pseudo element selector (preceded by::)

before:

after:

span::before{
    content:"<";
    color:chartreuse;
}
span::after{
    content:">";
    color:chartreuse;
}
/*Means to create another child element before or after in span, and add the value of content before the content of span element; Color when before or after is selected, it is not span, so the color of things in span will not change*/

Combination of selectors

1. And (two selectors are written with no space in the middle)

1. Descendant element - space

2. Child element - >

3. Adjacent sibling elements -+

4. All sibling elements appearing later -~

Juxtaposition of selectors

Multiple selectors separated by commas

Grammar sugar: easy to write code

Cascade

Declaration conflict: the same style is applied to the same element more than once
Cascade: the process of resolving declaration conflicts, which is handled automatically by the browser (weight calculation)

1 comparative importance

Importance from high to low;

Author style sheets: styles written by developers
1) Author style sheet! Important (try not to add);
2) Common styles for author style sheets
3) Styles in the default style sheet in the browser

2 comparative particularity

Look at the selector
General rule: the narrower the scope of selector selection, the more special
Specific rules: calculate a four digit number through the selector
1. Thousands
If it is an inline style, Mark 1; otherwise, mark 0
2. Hundreds
Equals the number of all id selectors in the selector
3. Ten
Equal to the number of all class selectors, pseudo class selectors and property selectors in the selector
4. Bits
Equal to the number of all element selectors and pseudo element selectors in the selector
(1 in every 256)

3 Comparison source order

The one who writes the code later wins

##Apply
1. Reset style sheet
Write some author styles to override the browser default style
Reset style sheet – > browser default style
Common reset style sheets: normalize.css,reset.css,meyer.css
2. The law of love and hate
l>v>h>a

inherit

The child element inherits some CSS properties of the parent element

class="container"

.container{/*Style to set*/

}

Generally, attributes related to text content can be inherited

Calculation process of attribute value

One element is rendered one by one, and the order is carried out according to the tree directory structure of the page document

Condition for rendering each element: all CSS attributes of the element must have values
An element, from all attributes without values to all attributes with values, is called the attribute value calculation process
1. Determine the declared value (the declared value of element a is in the default style sheet and will not be inherited automatically, but can be inherited forcibly)
2. Cascade conflict
3. Use inheritance
4. Use default value 22

color:inherit;/*Forced inheritance*/
  • inherit: Manual (forced) inheritance, which takes out the value of the parent element and applies it to the element
  • Initial: initial value, set the attribute to the default value

Box model

Box: each element will generate a rectangular area (box) in the page
Box type:
1. Line box: elements with display equal to inline
2. Block box: display is equal to the element of block
The line box does not wrap lines in the page, and the block box monopolizes one line
display default value inline (non inheritable)

Block boxes for browser default style sheet settings: container elements, h1~h6,p
Common line boxes: span,a,img,video,audio

Components of the box

Both line box and block box are composed of the following parts, from inside to outside:

1. content

Width and height set the width and height of the box content
The content part is usually called the content box of the whole box

2. Filling

Distance from box border to box content
padding-left,padding-right,padding-top,padding-bottom

padding: short attribute

padding: top right bottom left

Filling area + content area = filling box

3. Border (the default color is font color)

If the border has no style but width, it will not be displayed
Border = border style + border width + border color

Border style: border style
Border width: border width
Border color: border color
All of the above can use short attributes
Border + fill + content area = border box

border-top-width:
border-right-width:
border-bottom-width:
border-left-width:

border-width:4px/*Up, down, left and right are 4px*/

border:4px dashed red;/*Sketch attribute, the four directions are the same*/

4. Outer margin

Distance from border to other boxes
margin-top,margin-left,margin-right,margin-bottom

Sketch attribute margin

Box model application

1. Change the width and height range

By default, width and height set the width and height of the content box
When measuring the size of a design, the border box is often used, but if width and height are set, the content box is set
1. Accurate calculation

2.CSS3 box-sizing
Value:
Content box (default)
Border box (after taking this value, the browser will calculate the width and height of the content box by itself)

2. Change background coverage

By default, the background overrides the bounding box

You can modify it through background clip
Values: border box, content box, padding box

3. Overflow treatment

overflow: the value is visible by default
Other values:
Hidden
Scroll (set scroll bar)
Auto (auto, scroll bar if required, no if not required)

overflow-x:scroll;(Horizontal scroll bar)
overflow-y:scroll;(Vertical scroll bar)
overflow:scroll;(Both horizontal and vertical)

4. Word breaking

Word break, which will affect where the text is truncated and wrapped
Value:
Normal: normal. For CJK character text position truncation, non CJK character word position truncation
Break all: all characters are truncated at the text
Keep all: keep all text truncated between words (Chinese without spaces will not be truncated)

5. Blank processing

white-spacs:nowrap;(nowrap )
overflow:hidden;
text-overflow:ellipsis;(Dot)

If it can be displayed, no dots will be added. If it cannot be displayed, no dots will be added
white-spacs:pre; No blank folding

Box model of row box

Common line boxes: for placing specific contents

Salient features

1. The box goes along the content

2. The width and height of the row box cannot be set

To adjust the width and height of the line box, you should use the font size, line height and font type to adjust it indirectly

3. Inner margin (filled area)

The horizontal direction is effective, and the vertical direction will only affect the background and will not actually occupy the space

4.border

The horizontal direction is effective, and the vertical direction will not actually occupy space

Margin

The horizontal direction is valid, and the vertical direction is completely invalid

Row block box

Display: box of inline block

1. Not exclusive line

2. All dimensions in the box model are valid

Blank fold

Blank folding occurs inside or between line boxes (line block boxes)

Replaceable and non replaceable elements

Most elements, the results displayed on the page, depend on the element content and are called non replaceable elements
A few elements, the results displayed on the page, depend on the element attributes and are called replaceable elements

Replaceable elements: img,video,audio
Most replaceable elements are row boxes
Replaceable elements are similar to row block boxes, where all dimensions are valid

Conventional flow

Visual formatting model (layout rules): multiple box arrangement rules in a page
The visual formatting model generally divides the arrangement of boxes in the page into three ways:
1. Conventional flow
2. Floating
3. Positioning

General flow layout

General stream, document stream, general document stream, general document stream

All elements, by default, belong to the general flow layout

General rule: block boxes occupy one row, and row boxes are arranged horizontally

Containing block: each box has its containing speed. The containing block determines the activity range of the box
In most cases, the containing block of the box is the content box of its parent element

Block box
1. The total width of each block box must be just equal to the width of the containing block
The default value for width is auto
The value of margin can also be auto, and the default value is 0
auto: absorb the remaining space
The absorption capacity of width is stronger than that of margin

If there is still space left after calculating the width, border, inner margin and outer margin, the remaining space margin right is fully absorbed
In the regular flow, the block box is centered in its containing block, the width can be fixed, and then the left and right margin is set to auto

2. auto value in the vertical direction of each block box
height:auto, adapt to the height of the content
margin:auto, indicating 0

3. Percentage value
padding, width and margin can be taken as percentage
All of the above percentages are relative to the width of the containing block

Percentage of height
1) Whether the height of the containing block depends on the height of the child element. If so, the setting percentage is invalid
2) The height of the containing block does not depend on the height of the child element, and the percentage is relative to the height of the parent element

float

Application scenario

1) Text wrapping
2) Lateral arrangement

1. Basic characteristics of floating

Modify the float attribute value to:

  • Left: float to the left, with the element on the top and on the left
  • Right: float right, element up and right
  • The default value is none;

1. When an element floats, the element must be a block box (change the display attribute to block)
2. The containing block of the floating element is the content box of the parent element like the regular stream

Box size

1. The width is auto to adapt to the content width
2. The height is auto, which is consistent with the conventional flow and adapts to the height of the content
3.margin is auto and 0
4. The settings of border, inner margin and percentage are the same as those of normal flow

Box arrangement

1. Left floating boxes are arranged on the top and left
2. Right floating boxes are arranged on the top and right
3. When the floating box is arranged in the containing block, it will avoid the conventional flow block box
4. When the conventional flow block boxes are arranged, the floating box is ignored
5. When the row boxes are arranged, they will avoid the floating box

If the text is not in the line box, the browser will automatically generate a line box to wrap the text, which is called an anonymous line box

High collapse

Root cause of height collapse: the floating box will not be considered in the calculation of the automatic height of the conventional flow box

Clear the float, involving the css attribute clear

  • The default value is none
  • Left: to clear the left float, the element must appear below all previous left float boxes
  • Right: to clear the right float, the element must appear below all previous right float boxes
  • both: clear left and right floating, and this element must appear below all previous floating boxes
    Treatment method:
    Add div
 <style>
        .clearfix{
            clear:both;
        }
    </style>
</head>
<body>
   <div class="clearfix"></div>
    
</body>
</html>

In the original div

<style>
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
   <div class="clearfix"></div>
    
</body>
</html>

location

Manually control the precise position of the element in the containing block

css attribute involved: position

position

  • Default: static: static positioning (no positioning)
  • Relative: relative positioning
  • Absolute: absolute positioning
  • Fixed: fixed positioning

An element is considered to be a positioning element as long as the value of position is not static

Locating an element breaks away from the document flow (except relative positioning)

An element separated from the document flow:

  • When the elements in the document stream are placed, the elements separated from the document stream will be ignored
  • When calculating the automatic height of elements in the document flow, elements separated from the document flow are ignored

1. Relative positioning

It will not cause the element to leave the document stream, but offset the element in its original position.
Its location can be set through four CSS properties:

  • left
  • right
  • top
  • bottom
    The offset of the box has no effect on other boxes

2. Absolute positioning

1. The width and height are auto, which is suitable for the content
2. Include block change: find the first positioning element in the ancestor, and the filling box of the element is its containing block. If it cannot be found, its containing block is the entire web page (initialization containing block)

Fixed positioning

Other situations are exactly the same as absolute positioning.

Contains different blocks: fixed as a viewport (the browser's visual window)

3. Centering under positioning

Center in one direction:
1. Fixed width (height)
2. Set the left-right (up-down) distance to zero
3. Set the left and right (up and down) margin to auto

In absolute positioning and fixed positioning, when margin is auto, the remaining space will be automatically absorbed

4. When multiple positioning elements overlap

stacking context
Set z-index. Generally, the larger the value, the closer it is to the user

Only the positioning element setting z-index is valid

z-index can be a negative number. If it is a negative number, it will be overwritten by the regular flow and floating elements

supplement

  • Absolute positioning, fixed positioning elements must be block boxes
  • Absolute positioning, fixed positioning elements must not be floating
  • No outer margin merge

Topics: Front-end html css

Hot Topics

©2024 Programmer Think