CSS Introduction Notes (1)

1 CSS Introduction and specifications

1.1 the import type

The import mode loads the CSS file after the entire page is loaded, so this causes a problem. If the page is large, it will display the page with no style first, and then the style of the page will appear after a flash. This is an inherent flaw in importing.

<style type="text/css" media="screen">   
	@import url("CSS file");   
</style>
Copy the code

<link rel="stylesheet" type="text/css" href="index.css">
Copy the code

1.3 The difference between external chain and import

• Link and @import both import external CSS files, but they are very different
• Link is an HTML tag, and @import is exactly the CSS way to write it in a CSS file or style tag.
• The loading order is also different. When a page is loaded, the CSS file referenced by link is loaded at the same time, while the CSS file introduced by @import is loaded after the page is downloaded.
• When using JavaScript to control the DOM to change CSS styles, only use the link tag, because the import is not DOM controlled

<p style="width:100px; height:100px; background-color:red;" </p>Copy the code

1.5 embedded type

You can put it inside the head or body tag. It is recommended to put it inside the head tag under the title tag

2 Selector world

2.1.1 Label selector

Select directly using element tags

p{color:red; 1} weight

2.1.3 ID selector

The element is selected by its ID name, the class name is the attribute value in the element ID attribute, for example

#sum{} => This selector has a weight of 100

2.2 Union selector

You can group selectors so that the grouped selectors share the same declaration. The selectors to be grouped are separated by commas. In the example below, we group all the heading elements. All title elements are green.

h1.h2.h3.h4.h5.h6{
	color:green;
}
Copy the code

<p class='name1 name2' id='id1'></p>
p.name1{}
p#id1{}
.name1.name2{}
Copy the code

2.4 Descendent selector

• By defining styles based on the context of an element’s position, you can make the markup more concise, by separating strong elements in a list with Spaces into italics instead of the usual bold, and by defining a derived selector this way
• Try not to have more than 3 background selectors. There is no need to write out every level, just the key node geeks

li strong{ font-style:italic; font-weight:normal; } <ol> <li> <strong> This is because the strong element is inside the li element. </stong> </li> </ol>Copy the code

h1 > strong {color:red; } <h1>This is<strong>very</strong> important.</h1>Copy the code

2.6 Adjacent sibling selectors

Adjacent sibling selectors can select the element immediately after another element that has the same parent element

h1+p{
	margin-top:50px;
}
Copy the code

[title]{color:red; }Copy the code

[title=wjw]{color:red; }Copy the code

input[type='text']{width:150px; display:block; background:yellow}Copy the code

2.8 Camouflage selector

• A :link{color:#ff000} // Not accessed link
• A: Visited {color::#ff000} // Have visited the link
• A :hover{color:#ff000
• A :active{color:#ff000} // Selected link

Weight 10 < < 11

3 Three features of the CSS (Overlap + Priority)

3.1 the cascading sex

Browsers parse CSS from top to bottom. In case of CSS conflicts, the CSS defined last takes precedence. Cascading refers to the stacking of multiple CSS styles. For example, when using inline CSS style sheet definitions

The tag size is 12 pixels and is defined in chained format

If the markup color is red, the paragraph text will appear 12 pixels red, which is an overlay of the two styles

3.1.1 Basic selectors

• offspring
• Their offspring
• intersection
• And set
• Adjacent brothers
• brother
• attribute
• pseudo-classes
• Pseudo elements

Weight: The sum of the weights of each individual selector

.header ul li{
	/* Weight 12:10+1+1 */
  backgournd:red;
}

.header .right li{
	/* Weight 21:10+10+1 */
  backgournd:# 000;
}
Copy the code

• The weight is equal

> * id > class > tag

1. Weight is not equal to the case: whose power is important, listen to who
2. In the case of equal weight: follow the nearest principle, the bottom cover the top
3. Equal weight, do not follow the nearest principle, just want to listen to the above how to do
4. ! important 1000

4.2 Properties of non-inheritance

4.2.2 Text Attributes:

Vertical-align: vertical text alignment text-decoration: specifies the decorations added to the text text-shadow: specifies the text shading effect white-space: specifies the handling of whitespace unicode-bidi: specifies the text orientation

4.3.3 Attributes of box Model:

Width, height, margin , margin-top, margin-right, margin-bottom, margin-left, border, border-style, border-top-style, border-right-style, border-bottom -style, border-left-style, border-top-width, border-right-right, border-bottom-width, border-left-width, border-c Bor, bor, bor, bor, bor, bor, bor, bor, bor Der-left, PADDING, padding-top, padding-right, padding-bottom, padding-left

4.3.4 Background Properties

Background, background-color, background-image, background-repeat, background-position, background-attachment

4.3.5 Locating Attributes

Float, clear, position, top, right, left, min-width, min-height, max-width, max-height, overflow, clip, z-index

4.3.6 Generate content properties

Content, counter-reset, counter-increment

4.3.7 Outline Style properties

Outline-style, outline-width, outline-color

4.3.8 Page Style Properties

Size, page-break-before, page-break-after

4.3.9 Sound Style Properties

Pause -before, pause-after, pause, cue-before, cue-after, cue, play-during

4.3.1 Font Series properties

Font family: a set of fonts for elements; font weight: a set of fonts; font size: a set of fonts; Setting the font for small uppercase to display text means that all lowercase letters are converted to uppercase, but all letters using small uppercase will have a smaller font size than the rest of the text. Font-stretch: Stretches the current font-family. None of the major browsers support it. Font-size-adjust: Specify an aspect value for an element so that the x-height of the preferred font is maintained.

4.3.2 Text series attributes

Text-align: text-align line-height: word-spacing: increasing or decreasing the space between words Text-transform: controls the case direction of the text. Specifies the direction of the text. Color: specifies the text color

4.3.3 Element visibility

visibility

quotes

4.3.7 Cursor Properties

cursor

4.4 Attributes that all elements can inherit

2. Cursor attributes: cursor

4.5 Attributes that inline elements can inherit from

2. Text series attributes except text-indent and text-align

4.6 Attributes that block-level elements can inherit

1, text-indent, text-align

5 CSS box model

5.1 CSS Box Model Diagrams

• Margin: from the outside
• Border: border
• Padding: padding

5.2 Width and height of the CSS box model

1. Px pixel write down 2. % units of dynamic calculation (adaptive response)

* {margin:0;
  padding:0;
}
.banner img{
	width:100%;
}
Copy the code

5.3 Inner Margin padding and abbreviation

5.4 Skills of using border line border

Border: width of the border Border type Border line color

5.4.2 Type of border line

• Solid solid line
• Dashed line
• Dotted dotted line

5.4.4 Remove the border

Border :0 If the border attribute has only the border segment, the type and color of the border will be invalid

5.4.5 Interview Questions (Draw a triangle)

/ * triangular arrowheads principle: any adjacent two edge of the square Then rotate an Angle to get any direction, we need the size of the unit to rotate arrows deg Angle rotation Angle triangle from a square of wide high to control the thickness of the triangle is a border line to control the color of the triangle is the color of the border lines to control the * /<div class="arrow"></div>

<style>.arrow{ width: 0px; height: 0px; margin-top: 50px; margin-left: 50px; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333; transform: rotate(90deg); // control Angle}</style>
Copy the code

5.5 the padding

It’s in the same direction as the padding

5.6 Margin negative use skills

Structurally unchanged, you can switch div order

5.7 Padding and margin

Padding is the padding that affects the actual size of the element that we see in the browser and it makes the content of the element bigger and it doesn’t matter what the other elements are. Margin is the margin that doesn’t affect the actual size of the element that we see in the browser and it doesn’t make the content of the element bigger and the space between it and another element

5.8 Calculation formula and use skills of box model

Actual element width

Width width + padding-left/padding-right+border-left/border-right

Actual height of element

Height height + + padding – top/padding – bottom border – top/border – bottom

If you add the padding and border values, subtract the padding and border values from the width and height values otherwise the content will overflow

6 landing the mechanism

BFC stands for Block Formatting Context. It is a concept defined by the CSS2.1 specification regarding CSS rendering positioning. It is a separate rendering area, with only block-level box participation, which dictates how the internal block-level box is laid out and has nothing to do with the outside of the area.

6.1 BFC Layout Rules

1. The internal boxes will be placed vertically, one on top of the other;
2. The vertical distance of the Box is determined by margin. The margins of two adjacent boxes belonging to the same BFC will overlap.
3. The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float. ;
4. BFC areas do not overlap float boxes and are often used to clear floats and layouts. ;
5. A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa. ;
6. When calculating the height of the BFC, the floating element is also involved;

6.2 BFC elements are generated

• The root element or other element containing it;
• floating(elements offloatDon’t fornone);
• Absolute location element(elements ofpositionforabsoluteorfixed);
• Inline blocksinline-blocks(elements ofdisplay: inline-block);
• Table cell(elements ofdisplay: table-cell, default attributes of HTML table cells);
• overflowThe value of thevisibleThe element;
• Flex boxes(elements ofdisplay: flexorinline-flex);

<div class='div_1 BFC'>
     <div class='div_2'>
         <div class='div_3'></div>
         <div class='div_4'></div>
      </div>
      <div class='div_5 BFC'>
	       <div class='div_6'></div>
         <div class='div_7'></div>
     </div>
</div>
Copy the code

6.4.1 Height collapse of the parent due to Child Floating

<style type="text/css">.box{ width: 900px; background: black; height: 300px; }. Box1 {height: 300px; width: 300px; background: red; float: left; } .box2{ height: 300px; width: 300px; background: blue; float: left; }</style>.<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
Copy the code

The above code defines 3 blocks. A parent contains two subsets, but the background color of the parent cannot be displayed because the subset-element float causes the height of the parent to collapse.

6.4.2 Child margin-top Triggers BFC from the parent band to the parent band

If one box has a top margin and the other has a bottom margin, there will be the overlapping problem of margin margin. Margin rewriting of parallel boxes => overlap of double margins -> Taking a large value is not the sum of them, that is, who listens to who most

To move the small red block in the black block down a bit, use margin-top directly and the black block moves down together.

<style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background: black;
        }

        .box1{
            height: 100px;
            width: 100px;
            background: red;
            margin-top: 50px;
        }

    </style>.<div class="box">
    <div class="box1"></div>
</div>
Copy the code

After setting the BFC, the red block will float correctly

Compatibility problem of margin: transfer problem of margin top

Margin-top added to the small box does not achieve the spacing between the small box and the big box, but instead transfers the space to the big box, resulting in the overall downward movement to solve the compatibility problem

1. Overflow :hidden resolve margin-top pass-through (no overflow hidden here)
2. Padding-position :1px This method affects the actual width and height, and subtracts the width/height so as not to affect the actual width and height
3. Border-top :1px; border-top:1px; border-top:1px; border-top:1px; border-top:1px
4. Change the margin-top value of the child element to the padding-top value of the parent element to avoid pass-through problems with margin-top values

7 Background

<style>.box{ width:650px; height:32px; background-color:orange; / / color color: # FFF; // Use the color text-aligh:center; } div{width:200px; height:200px; backgournd-color:darkbule; margin:0 auto; // Auto block element horizontal center line-height:200px; // Vertical center}</style>
Copy the code

7.3 Background Image

background-image

• Url (‘ image’s URL path address ‘) The URL of the image
• None indicates that no images are blocked on Beijing, which is the default
• Inherit specifies that the background image should be inherited from the parent element
• An element can introduce multiple background images, specifying one or more background images to use. By default, background-image is placed in the upper left corner of the element, and the vertical horizontal direction is repeated.
• backgournd image:url(‘pic.png’),url(‘pic2.png’)… .
• The backgournd image property cannot be inherited

.logo{ width:300px; height:300px; backgournd-image:url('.. /xxx/png'); backgournd-repeat:repeat x; // Tiling mode (repeat)}Copy the code

7.5 Background Location

• The backgournd-position property sets the starting position of the background image.
• Xpos ypos is the horizontal position of the first value, and the second value is vertical. The top left corner is 0. Units can be length values px, keywords, and percentiles
• The keywords appear in pairs left right top bottom center. If only one keyword is specified, the other values will be “center”.
• X % y% the first value is horizontal and the second value is vertical. The top left corner is 0%, 0%.
• Inherit specifies that background-position property Settings should be inherited from the parent element

.logo{ width:400px; height:400px; backgournd-color:#3385ff; // Backgournd-image :url('./xxx.png'); backgournd-repeat:no-repeat; backgournd-position:50px 50px; // the larger the X-axis is, the more the X-axis is, the more the X-axis is, the more the X-axis is, the more the X-axis is, the lower the X-axis is.Copy the code

Often used in Sprite images

*{ padding:0px; margin:0px; } .banner{ width:100%; height:800px; backgournd:url(.. /xxx.png) no-repeat } .banner01{ width:100%; height:800px; backgournd:url(.. /xxx.png) no-repeat } .banner02{ width:100%; height:800px; backgournd:url(.. /xxx.png) no-repeat backgournd-attachmen:fixed; // Can be fixed}Copy the code

7.7 Setting the size of the background image of the object

background-size

• Specifies the background image size with the length value. Negative values are not allowed;
• Specifies the background image size as a percentage. Negative values are not allowed.
• Auto The true size of the background image
• Cover scales the background image to completely cover the container, and the background image may exceed the container.
• Contain scale the background image to the same width or height as the container

.pic{ width:200px; height:1600px; background:url('.. /xx.png') background-size:300px 300px; // X-axis Y-axis}Copy the code

.pic{ width:200px; height:1600px; background:url('.. /xx.png') background-size:300px 300px; // X-axis Y-axis backbound-clip :border-box; }Copy the code

7.9 Setting the Reference Origin (Position) of the Background Image

background-orign

• Padding-box: Displays the background image from the padding area (including the padding)
• Border-box: Displays the background image starting from the border area
• Content-box: Displays the background image from the Content area

8 voerflow:hidden

p{ width:300px; height:10px; overfolw:hidden; }...<p>xxxxxxxxxxxxxxxxxxxxxxxx...... xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.....</p>
Copy the code

9.1 Methods for displaying a line of multiple elements

• display:inline; // Convert to inline element but does not work when the width and height attribute is set
• display:inline-block; // Block allows elements to be displayed on a single line, but it is subject to space/line breaks, which creates a default spacing
  • Remove whitespace and line feed effects so labels are all on one line (not recommended for bad reading)
  • Add a font size:0 to the parent element and a font size:14px to the child element. (But we can also find a problem: if there is text in the element, the text disappears, and then add an attribute to the child element.)
• float:left/rigjt; // But we are clear float

** [display:inline-block element characteristics]**

• Arrange the boxes horizontally
• The Vertiacal-align attribute affects the inline-block element, which you may set to top
• You need to set the width of each column
• If there are Spaces between elements in the HTML source, there will be gaps between columns

*{ margin:0px; padding:0px; } .content1{ display:inline; width:200px; height:100px; backgournd-color:yellow; } .content2{ display:inline; width:200px; height:100px; backgournd-color:yellow; }... <div class="content1"> <div class="content2"> </div>Copy the code

Inline-block is not compatible with IE7

Let the block element be rendered inline directly (with the display:inline attribute), and then trigger the layout of the block element (such as the zoom:1 or float attribute). The following code

/* Recommended :IE6, 7*/ div {display:inline-block; *zoom:1; *display: inline; } /* Recommended */ div {display:inline-block; _zoom:1; _display:inline; }Copy the code

Explanation: Display: Inline block takes care of Internet Explorer 8+, this is normal Settings, under the lower version of Internet Explorer, there are two conditions, one is inside the line, one is set to width and height, trigger layout to set width, while div width is set to yellow air, layout is not set to horizontal. Display :inline will not trigger the layout, so zoom:1 will trigger the layout again, resulting in a cross-domain set width and height of the inline element

10 Ellipsis in the text

* {margin:0;
  padding:0;
}

h2: {width:600px;
  height:30px;
  /* Single line text appears to omit good prerequisite */
  overflow:hidden;/* Overflow hide */
  white-space:nowrap;/* Enforces text not to break */
  text-overflow:ellipsis;/* How to hide text: hide it with ellipsis */
}

Copy the code

10.2 Necessary Conditions for Ellipses in Multi-Line Text (Interview questions)

h2{
	width:600px;/ * * / width
  display:-webkit-box;/* Elastic box model */
  -webkit-line-orient:vertical;/* Specifies the ranking of elements by vertical order */
  -webkit-line-clamp:2;/* The number of lines needed to display the number of lines */
  overflow:hidden;/* Overflow hide */
}
Copy the code

Floating element features

12.1 introduction

• Document flow: Refers to the automatic left to right, top to bottom streaming of elements during layout. The final form splits into rows from top to bottom and emptying elements from left to right in each row
• Each non-floating block-level element has an exclusive row, and the floating element floats on one end of the row as specified. If the current line is not enough, a new line will float again
• Inline elements do not occupy a single line; Almost any element (including block-level, inline, and list elements) can generate child rows for placing child elements
• Standard document flow level: divided into two levels, block level elements and inline elements;
• Out-of-document flow: This element is not recognized by normal elements in the document flow (out-of-document elements float parallel to the document flow)

Normal document flow: left to right and top to bottom Document flow can be hierarchical: inline elements and accounting elements Inline elements are left to right and block level elements are top to bottom

12.3 Impact or Negative Effect of Floating Parameters

1. Setting the background color attribute does not work
2. The border attribute for the parent element is not stretched
3. Setting the padding property for the parent element is also not supported

12.5 Let the elements disappear from our view

1. Transparency opacity: 0; [0 ~ 1]
2. Display: hidden node
3. Height: 0 and overflow: hidden
4. Line-height :0 and overflow:hidden(if no height is set)
5. visbility:hidden; Make all visible elements hidden
6. Margin /padding is large enough to make it disappear
7. Use the transform property to make the transform coordinate large enough