Css+div a detailed description of common properties

This article shares a detailed description of Css+div Common properties

Css

Wildcard Selector *{}

Tag Selector p{}

ID selector #ID {}

Class selector. class{}

A tag containing the selector p a{} p

Group selector p,p{} p tag and P label

Display Rules element box type block block level element, none element is not displayed, Inine inline element is inside element, Inline-black inline block element.

visibility Specifies whether the element is visible, visible, hidden not visible, inherit inherits the parent element

Disalay and visibility are used to hide the difference is that display hidden after the space-occupying

Overflow content Overflow when the visible does not trim, rendered outside the element window, hidden overflow content hiding, scroll always add scroll bar, auto auto, trim add scroll bar, inherit inherit the parent element.

Cursor shape

Float Block-Float

Letter-spacing Letter Spacing

Line-height High height defines the height of the entire block, while Line-heught defines the line height of the text, set a line of 30px, and the text is centered vertically relative to the 30px.

Border-collapse table border overlap

Font-weight setting the thickness of text

Text-decoration text Decoration

Font-family the font of the specified element

Text-align block-When text alignment is set to elements as text, picture, and so on, horizontal centering is done by setting Text-align:center for the parent element.

Clear desirable value for Left,righr,both both objects are not allowed to appear floating objects around

The Z-index value is Auto/number, and the larger the number is, the higher is the negative.

The position positioning value is absolute positioning absolute indicates that the object is out of the document stream and is positioned according to the upper-left corner of the browser or parent element with positioning function.

The value is relative positioning relative means that the position of the current object in a document stream is positioned as the origin of the coordinates,

Fixed means not affected by any page, based on the top left corner of the browser to locate, after positioning in the window is not scrolling with the scroll bar

OL orderly

UL disorderly

List-style-type None Show bullets

List-style-image URL list Picture

: Link has no links that have been visited

: visted the link that has been visited

: Hover Mouse Pause Element

: Active activated element (that is, the clicked Element)

Css3

Border-radius bezel fillet border-radius:5px 10px 15px 20px; Represents the radius of the upper-left, upper-right, lower-right, lower-left corner, respectively. If you specify two values for Border-radius, the first value is the upper-left and lower-right corner, and the second value is the upper-right corner and the lower-left corner. If you specify three values, the first value is the upper-left corner, the second value is the upper-right corner and the lower-left corner, and the third value is the lower-right corner.

Box-shadow is used to add shadows box-shadow:10px 10px 5px Blue; The first is the horizontal distance, the second is the vertical distance, the third is the blurred distance, and the fourth is the color of the shadow.

Border-image

Background-image

Background-size set the picture size to set the width of p, otherwise the picture is not displayed, background-size:50px 100px; can be a percentage, meaning the percent of the parent element.

Backgrond-origin setting the position of the background image is padding-box by default; Border-box start at the outermost content-box start inside

Background-clip clipping the background of the specified position is the same as the previous Box-shadow

Linear-gradient linear gradient Color background:-moz-linear-gradient (red,blue); background:-webkit-linear-gradient from top to bottom (right, Red,blue), left-to-right standard syntax to the right 45deg point to the top corner, 90deg to the right background:-o-linear-gradient (50deg, red, blue); specify any angle.

Linear-gradient Color Transparency Rgba (255,0,0,0.7); The last value of Rgba represents opacity: 0 is fully transparent and 1 is completely opaque.

Text-shadow Adding a shadow to the text is the same as the Box-shadow usage

WHITE-SPACE specifies how white space within the specified element handles normal (default) compressed spaces, pre retains all spaces and never wraps, nowrap compressed spaces, does not wrap, pre-wrap preserves spaces, normal line breaks, pre-line pressure Indent spaces, line breaks, inherit.

How to display content when Text-overflow text overflows

Word-wrap allows words to be word-wrap:break-word for a long time;

Word-break action the same as the property value is Keep-all all the words are complete, and when the property value is Break-all, all words that are out of bounds will be break.

P

Box Model P is very important (nonsense) so the following are important (images are found on the Internet)

The top right bottom left stands for positioning-placed up and down, the odd order is because the CSS is a strange setting, all attributes without a specified direction are all in this order,

Margin the vertical adjacent margins of the block-level elements are merged, while the inline elements do not actually occupy the upper and lower margins. The margins of floating elements are also not merged. Allows you to specify a negative margin value.

Border border such as border-width:10px 5px 1px 20px represents the top border 10 pixels, right box 5 pixels, bottom border 1px, left box 20px.

padding if the inner margin is two values, the first value is up and down, and the second value is about. If you have three values, the first value is up, the second value is left and right, and the third value is the next one.

Height width internal content height and width

The margin fixed-width block element can be centered by setting the "left and right margin" value to "auto".

The P-Layer default width is 100%

The Float property can be used to drift after the width is determined

When the layer is set with float, the layer to be used next will be affected by the drift, which needs to be set with clear

Setting absolute positioning within a layer requires relative positioning to be set in the parent object or absolute positioning is positioned as body parent object