background color background-color

The value of background color can be in English , Can be hexadecimal color value , It could be rgb

Background picture background-image

The size of the background image can be different from that of the container

Background image will not occupy space

If the container is large , Background picture small , Background image will be tiled Fill the whole container

Background picture location background-position

The value of the background image positioning is two units , Represent coordinates separately x,y axis

The value of background image positioning can be left,right,top,bottom,center

Duplicate background image background-repeat

no-repeat Array image is not duplicate , Common

round Autoscale until you fit and fill the entire container

space Tile and fill the entire container at the same spacing

Background image positioning background-attachment

background-attachment:fixed

Is the background image fixed or scrolling with the rest of the page

background-attachment The value of can be scroll,fixed

background abbreviation

background: #ff0000 url(bg01.jpg) no-repeat fixed center

Font style

Font family :font-family

font size :font-size

Font weight :font-weight

font-weight:400

normal default

bold Bold

bolder

lighter

Font color color

Font italics :font-style

* font-style:italic
* normal Normal text display
* italic Text in italics
* oblique Text tilt display
Text properties

Row height line-height

line-height:50px

You can support the height of the parent element

Text horizontal alignment :text-align

left,center,right

Vertical alignment of line height of text :vertical-align

baseline default

sub Subscript of vertically aligned text , and sub Label like effect

super Superscript vertically aligned text , and sup Label like effect

top Align the top of the object with the top of the container

text-top Align the top of the object with the top of the line text

middle Element objects align vertically based on baseline

bottom Align the bottom of the object with the bottom of the text in the line

text-bottom Align the bottom of the object with the bottom of the line text

Text indent text-indent

text-indent:2em

First line indent, usually used at the beginning of a paragraph

Spacing between letters letter-spacing

Space between words :word-spacing

Case of text text-transform

capitalize Each word in the text begins with a capital letter .

uppercase Definitions are capital letters only

lowercase Definition only lowercase

Decoration of text text-decoration

none default

underline Underline

overline Upper line

line-through center line

Auto wrap word-wrap

word-wrap: break-word

basic style

width,height

Element has no height by default , Height setting required , Let the content of the element hold the element high

Mouse style cursor

Define the style of the mouse cursor:pointer

default default ,pointer Small hand shape ,move Move shape

transparency opacity

opacity:0.3

Transparency values enable 0 reach 1 Number between ,0 On behalf of transparency ,1 Represents total opacity

Transparent elements are just invisible , But it also takes up the document flow .

visibility visibility

visibility:hidden

visible Element visible

hidden Element not visible

collapse When used in table elements , This value deletes a row or column , Does not affect the layout of the table

Overflow hiding overflow

Sets how content is displayed when the content of an object exceeds its specified height and width

visible Default , Content will not be trimmed , Will appear outside the element box

hidden Content will be trimmed , And the rest is invisible

scroll Content will be trimmed , But the browser displays scroll bars to see the rest .

auto If content is trimmed , The browser will display scroll bars to view the rest .

Border color outline

input Text box with border , And ugly

outline:none Clear border

Style reset

Clear element's margin and padding

Remove the list character

Remove the underline

Box model style

Blocky element , Inline elements , Inline strong element

Element classification transformation display

block, Convert element to block level element

inline, Convert element to row level element

inline-block, Convert element to inline block element

none Hide elements

Stroke border

Style of line :

dashed Dotted line ,dotted Dotted line ,solid Solid line

css Only one direction border can be styled in the style

Down stroke border-bottom

Top stroke border-top

Right stroke border-right

Left stroke border-left

spacing margin

Infill padding

float float

Floating principle : Floating detaches elements from the normal flow of documents , Floating on a common current

Floating elements still appear at their normal stream locations , Then float left or right as far as possible according to the set float direction ,
Until the outer edge of a floating element encounters a containing box or another floating element , And allow text and inline elements to surround it

Floating produces block level boxes , Regardless of the element itself

Clear the effect of float

clear Clear float

none Do not clear ,left Floating objects are not allowed on the left ,right,both

Using pseudo class to clear floating
.clearFix{ content=""; display: block; width: 0; height: 0; clear: both; }
location position

Layer model , Absolute positioning ( Relative to parent )

If you want to set the absolute positioning in the layer model for an element , Settings required position:absolute Absolute positioning , What this statement does is add you an element
Drag from document stream , Then use left,right,top,bottom Property relative to its closest
Absolute positioning of parent containing block with positioning attribute .

If such a containing block does not exist , Relative to body element , That is, relative to the browser window

position:absolute
div{ width: 200px; height: 200px; border: 2px red solid; position: absolute;
left: 100px; top: 20px; }
Layer model - Relative positioning ( Relative to original position )

position: relative
#div{ width: 200px; height: 200px; border: 2px red solid; position: relative;
left: 100px; top: 20px; }
Layer model - Fixed positioning ( Relative to web window )

position: fixed

Technology
©2019-2020 Toolsou All rights reserved,
JS How to operate java Realize the function of grabbing red packets C Language programming to find a student's grade The United Nations 《 Glory of Kings 》 Please go to the studio : To save the earth Dialogue between apple and Nissan suspended ,Apple Car How's it going ?CSS architecture design China's longest high speed rail officially opened ! The fastest way to finish the race 30.5 hour First knowledge MySQL Comprehensive review ( dried food )2021 year 1 Monthly programmer salary statistics , average 14915 element How to use it quickly html and css Write static page