Coincidence, because of some reason, to have time to sort out the CSS related note, hope I can help to want to work introduction to the front of friends, and friends who want to work on the front end to improve, have write wrong place hope more correct, the follow-up summary jquery, JS senior and VUE study notes, study together, progress together…

First, style introduction

Interline style

<div style="background:red;"></div>
Copy the code

Inline style

<style>
    div{
        background:red;
    }
</style>
Copy the code

Outer chain style

<head>
    <link rel="stylesheet" href="css/style.css" />
</head>
Copy the code

Imported styles (hardly needed, not recommended)

Note: If there is an inline style, it must be written after the imported style sheet, before the imported style sheet is invalid

<style type="text/css">
    @import "css/style.css"Div {// is written after the imported stylesheetbackground:red;
    }
</style>
Copy the code

External chain and import

Link is an HTML tag, and @import is a CSS way to write in a CSS file or style tag
When the page is loaded from top to bottom, the CSS file referenced by link is also loaded, while the CSS file imported by @import is loaded after the page is loaded completely.
Link supports javascript control over how DOM elements are styled, whereas @import does not.

Block element, inline element, inline block element

A block element

div,p,h1-h6,ul,ol,li,dl,dt,dd,table,form…

The characteristics of

An exclusive line
Arrange them from top to bottom
You can control the width, height and CSS styles associated with the box model
When the width is not set, the default is a full line, and the height is the height of the content itself
Ul ol can only be li,dl can only be DT dd. The P tag cannot contain other block elements (including itself)

Inline elements

strong,a,em,i,label…

The characteristics of

Do not monopolize a line, and other inline elements are displayed from left to right
Arranged from left to right
You can’t control the width, height and CSS properties of the box model (padding-top/padding-bottom,margin-top/margin-bottom), but you can set padding-left/padding-right,marign-left/ margin-right
Setting the width and height does not work. The width and height are determined by the content
Inline elements can be nested; inline block elements are not recommended (except for the A tag)
Code newlines are parsed

<span>111</span>
<span>222</span>// a newline parses a spaceCopy the code

Inline block elements

img,input,textarea,select…

The characteristics of

Inline blocks are displayed on a line
Supports width and height Settings
Code newlines are parsed

Display :inline to inline display:block to inline display:inline-block to inline

Three, selector

Label selector
The class selector
The id selector
Group selector

div.p.span{
    background:red;
}
Copy the code

Wildcard selector (*)
Union selector

div.p,h{
    background:red;
}
Copy the code

Intersection selector (to find exactly what we want on the tag)

div.box{
    background:red;
}
Copy the code

Descendant selector

ul li a{
    color:red;
}
Copy the code

Child selector (accurate to the first generation of child elements)

span{
    color : # 000;
}
p > span{
    color : red;
}
Copy the code

<p>father<span>Son // turn red<span>grandson</span>
    </span>
</p>
Copy the code

Adjacent sibling selectors (div is the reference, next to the reference’s sibling tag)- hardly needed

div + p{
    background:red;
}
Copy the code

<p></p>
<div></div>
<p>I'm the only one with a red background</p>
<p></p>
Copy the code

Pseudo class selector

a:link/visited/hover/active,input:focus

== Priority == Interline > ID > Class > Label selector > *

4. Box model

: the width/height + padding + border + margin (affecting the size of the box model is width/height, padding, border)

Margin does not affect the actual width of the last element, while the padding affects the actual width of the last element (width/height minus the corresponding padding value, or box-sizing:border-box).
Margin controls the spacing between elements, while padding does not

Margin collapse problem == Margin-bottom and margin-top take the maximum value of the two as the upper and lower spacing (without superposition) == The child will drag the parent down problem ==

Add padding-top to parent level instead of margin-top to child level
Add overflow:hidden to parent;

The role of the overflow

Overflow hidden
Remove the floating
Resolve margin collapse
Single line text overflows ellipsis

p{
    width:100px;
    height:30px;
    line-height:30px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
Copy the code

Multiple lines of text overflow ellipsis

p{
    width:100px;
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // line count -webkit-box-orient: vertical; }Copy the code

Left /right/none/inherit(inherit)

Floating characteristics

Float out of the document flow (an element without a float can’t recognize its height and position and runs up to occupy the float element color position.

Flow: The process by which elements are automatically arranged from left to right and from top to bottom out of flow: the normal arrangement of elements is broken (not completely out of flow (text surround)) 2. Float with direction 3. Float elements in a row 4. Text around 5. Float left and right to the left of their parent (float left to right, float right to left) 6. After floating, the parent is not wide enough and the floating element will fall down. 9. Float a child element within a float element and do not inherit the float attribute of the parent element. After floating, the width becomes as narrow as possible, down to the width of the content

Clear float method (there are floats to clear floats)

Parent ClearFix pseudo-class element

.clearfix:after{
    content : ' ';
    display : block;
    clear : both;
}
.clearfix{
    *zoom : 1;  //* CSS hack compatible with IE7 browser}Copy the code

The parent add overflow: hidden;
Add height to parent level
Add an empty tag to the end of a child element (not recommended)

Six, positioning (can not use do not use positioning)

Relative positioning

Characteristics of the

Reference: self
Document flow: Does not deviate from document flow
Can’t make rows become blocks (can give width and height)
If you have both left and right in the direction, you listen for left last, you listen for top and bottom last
Change the hierarchy

Absolute positioning

Characteristics of the

Reference: a positioned (relative/absolute) parent. If the parent is not positioned, it goes up one level until the HTML reference is used
Document flow: Disengage from document flow
Can make the line into blocks (can give width and height)
If you have both left and right in the direction, you listen for left last, you listen for top and bottom last
Change the hierarchy

Fixed position

Characteristics of the

Reference point: the entire browser window
Document flow: Disengage from document flow
Can make the line into blocks (can give width and height)
If you have both left and right in the direction, you listen for left last, you listen for top and bottom last
Change the hierarchy

Z-index hierarchy (must work with the positioning element, not alone)

Change the hierarchy and add a location element
The element following the two positioning elements defaults to a higher level than the previous element

Similarity of location

You can set the left/right top/bottom values to both left and right, and both up and down, and up
You can set z-index to change the hierarchy. The higher the value, the higher the hierarchy

Different points of positioning

Only relative locations are not detached from the document flow; other locations are not detached
The reference is different

BFC (Block-level Formatting Context)

When an element’s BFC is triggered, it creates a wall inside the element, and the inside and outside of the wall do not interfere

<ul>< li floating</li>
    <li>floating</li>
</ul>
<p>There's no clear float up there, so UL and P are already interfering with each other</p>
Copy the code

Conditions that trigger the BFC

Parent element plus OVrFlow: Hidden;
The child element floats, and the parent element floats
The value of position cannot be static or relative
The display value is tablecell,inline-block, one of flex’s

8. Browser kernel

IE: Trident Kernel Firefox: Gecko kernel Safari: WebKit kernel Opera: Formerly Presto kernel Opera is now Google Chrome Blink kernel Chrome:Blink(based on WebKit, Developed by Google and Opera Software)

skills

The arrow on the

.arrow{
    width:10px;
    height:10px;
    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:0;
    border-left-width:0;
    border-color:red;
    border-style:solid;
    transform:rotate(-45deg);
}
Copy the code

The triangle

.triangle{
    width:0;
    height:0;
    line-height:0;
    border:10px dashed transparent;
    border-top:10px solid red;
}
Copy the code

Inli-block blank Bug 1. Solution 1

div{
    font-size : 0; // Parent set font size to0
}
div button{
    font-size:14px// The child font size is the desired size}Copy the code

Option 2 (not recommended)

<div>
    <button>111</button><button>222</button><button>333</button>// Inline-block elements must be written on one line</div>
Copy the code

== Multiple methods of horizontal and vertical center (absolute center, center) ==

Table-cell: center the table vertically by middle, and then center the table horizontally based on the inline or block-level content (compatible with IE8+)

The children are block-level elements

.fa{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	display: table-cell;
	vertical-align: middle;
}
.child{
	width: 200px;
	height: 200px;
	background: green;
	color: #fff;
	margin: 0 auto;
}
Copy the code

Children are inline elements (unknown width and height absolutely centered)

.fa{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.child{
	background: green;
	color: #fff;
}
Copy the code

Position: Parent position relative to child absolute position, and then according to margin or transform combination to achieve positioning

Margin negative

.fa{
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid red;
}
.child{
	position: absolute;
	width: 200px;
	height: 200px;
	background: green;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
}
Copy the code

Transform (Unknown width and height absolutely middle, not compatible, compatible with IE9+)

.fa{
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid red;
}
.child{
	position: absolute;
	top: 50%;
	left: 50%;
	background: green;
	transform: translate(-50%, -50%);
}
Copy the code

Absolute Locates 0 in four directions

.fa{
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid red;
}
.child{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 200px;
	height: 200px;
	background: green;
}
Copy the code

Flex elastic box model (unknown width and height absolutely in the middle, not compatible, suitable for mobile terminal)

.fa{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	display: flex;
	justify-content: center;
	align-items: center;
}
.child{
	width: 200px;
	height: 200px;
	background: green; } or.child{// Unknown width and height are absolutely centeredbackground: green;
}
Copy the code

Two column layout implementation scheme

Float +margin (float+margin)

Disadvantages: The right right element, child element clearance float, will drop the right right to the bottom

html.body{
	height: 100%;
}
div{
	height: 100%;
}
.left{
	float: left;
	width: 300px;
	background: red;
}
.right{
	width: 100%;
	background: green;
	margin-left: 300px;
}
.right-child{
    clear:both; Will drop the whole right side of the content to the bottom}Copy the code

Solve the above drawbacks (left and right floating)

.left{
	float: left;
	width: 300px;
	height: 600px;
	background: red;
	position: relative; // raise the level}.fa-right{
	float: right;
	width: 100%;
	height: 700px;
	background: green;
	margin-left: -300px; // Float the right side upfont-size: 36px;
}
.child{
	margin-left: 300px; // Avoid the left widthheight: 600px;
	background: blue;
}
.inner{
	clear: both; // If the content floats, it will not drop its parentbackground: yellow;
	height: 300px;
}
Copy the code

Float + Overflow BFC(left blank, plus overflow BFC property)

.left{
	float: left;
	width: 300px;
	height: 300px;
	background: red;
}
.right{
	background: green;
	height: 500px;
	overflow: hidden;   //BFC
}
Copy the code

Table + table cell (similar to the table > td)

.fa{
	display: table;
	width: 100%; / / must be addedwidth:100%
	height: 300px;
}
.left{
	display: table-cell;    //td
	width: 300px;
	height: 300px;
	background: red;
}
.right{
	display: table-cell;    //td
	height: 300px;
	background: green;
}
Copy the code

Absolute absolute positioning

.fa{
	position: relative;
}
.left{
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 300px;
	background: red;
}
.right{
	position: absolute;
	left: 300px;
	right: 0; // Subtract the left-hand side300Is the width of the entire pagetop: 0;
	height: 300px;
	background: green;
}
Copy the code

Flex layout

.fa{
	width: 100%;
	display: flex;
}
.left{
	width: 300px;
	height: 300px;
	background: red;
}
.right{
	flex: 1;
	height: 300px;
	background: green;
}
Copy the code

Grid layout (poor compatibility)

.fa{
	width: 100%;
	display: grid;
	grid-template-columns : 300pxauto; // The width of each column is left:300px, right: adaptive}.left{
	height: 300px;
	background: red;
}
.right{
	height: 300px;
	background: green;
}
Copy the code

Implementation scheme of three-column layout (fixed width on both sides, adaptive in the middle)

Grail layout (center content is shown in advance, layout is written in front)

.fa{
	padding: 0 300px; // Step 2, add children to the left and right of the parent elementleft.rightThe width is reserved forleft.rightSpatial locationheight: 300px;
}
.left..center..right{
	height: 300px;
	float: left;	/* Float */
}
.left..right{
	width: 300px;
}
.left{
	background: red;
	margin-left: -100%;	/* Step 3, move the bottom left to a negative center100% width */
	position: relative;	/* Use relative positioning (without leaving the document flow) to move one left width to the far left of the page */
	left: -300px;
}
.center{
	width: 100%;
	background: green;
}
.right{
	background: yellow;
	margin-left: -300px;	/* Step 4, move the width of right */
	position: relative;	/* Use relative positioning (without leaving the document flow) to move one right width to the far right of the page */
	right: -300px;
}
Copy the code

<div class="fa">
	<div class="center">center</div>
	<div class="left">left</div>
	<div class="right">right</div>
</div>
Copy the code

Twin wing layout

On the basis of the Grail, a subcontainer inner is nested in the center container, which solves the problem of moving the grail positioning again. The position is moved without positioning, and the code of the Grail is optimized (removing positioning).

.fa{
	height: 300px;
}
.left..center..right{
	height: 300px;
	float: left;	/* Float */
}
.left..right{
	width: 300px;
}
.left{
	background: red;
	margin-left: -100%;	/* Step 3, move the bottom left to a negative center100% width */
}
.center{
	width: 100%;
	background: green;
}
.right{
	background: yellow;
	margin-left: -300px;
}
.inner{
    height:300px;
    margin-left:300px;/* Step 2, squeeze the center */
    margin-right:300px;
    background:blue;
}
Copy the code

<div class="fa">
	<div class="center">
	    <div class="inner">
	        center
	    </div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
</div>
Copy the code

Difference: both are floating, margin-left (margin-right) of the Grail is added to the parent (FA). The white space of the wings is added to the child element in center. Holy grail: Margin negative movement +position left movement. Twin wings: Margin negative movement

The implementation of contour layout

table

.fa{
    width:100%;
    display:table;
}
.left.right{
    display:table-cell;
    width:50%;
}
.left{
    background:red;
}
.right{
    background:green;
}
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Half of CSS

First, style introduction

Block element, inline element, inline block element

Three, selector

4. Box model

Left /right/none/inherit(inherit)

Six, positioning (can not use do not use positioning)

BFC (Block-level Formatting Context)

8. Browser kernel

skills

Half of CSS

First, style introduction

Block element, inline element, inline block element

Three, selector

4. Box model

Left /right/none/inherit(inherit)

Six, positioning (can not use do not use positioning)

BFC (Block-level Formatting Context)

8. Browser kernel

skills

Related Posts

VxeTable table, simple secondary encapsulation

Node, NPM, NVM, NRM, NPX, CNPM usage summary

Resolve Git commit conflicts