Front-end Programming Improvement Tour (v)----A CSS book for everyone to read

Since the internship also has a few months of time, to iqiyi art internship as a stepping stone, entered the current company. If the first to be able to love the odd art is temporary assault div+css words, at present in this company experience, any technology must know the principle, so as to do discovering, to be an expert person. CSS properties and usage are placed there, but if used well, in addition to bowed practice, improve the theoretical accumulation is particularly necessary, this "to everyone read the CSS book" quickly swept over once, before the work encountered unclear problems, swept away, so it is necessary to summarize under.

The understanding of CSS stacking

CSS is the acronym for Cascading Style sheets, which means that styles are passed from one level of the document structure to another, and the browser determines the style attributes from which source the tag is applied.

There are three types of styles: The default browser style sheet, the user style sheet, and the designer style sheet.

The default browser's style sheet differs depending on the browser, and when you write a style, you need to write a reset style sheet so that the designer style behaves uniformly.

user style sheets are personalized settings that users make in a browser .

Designer style sheet is written by the designer, which is divided into inline style, embedded style, link style. Inline styles and inline styles do not separate styles from content, because styles are still included in the same document. A link style is the only way to truly detach a presentation style from a structured tag. The designer's three styles are prioritized from high to Low: inline style, inline style, and link style.

With the above style source, the Cascade works: First, find all the declarations that apply each element and attribute, sort by order and importance, order in order, importance is the weight of the property and the priority of each style, and sort by importance first and then sequentially.

aligning labels in the document hierarchy

A selector can be used in more than one rule. Selectors correspond to the right-to-left label order, as long as the front selector in the label is somewhere above it in the document hierarchy and appears in the same order. The benefit of class and ID selectors is that there is no need to consider document hierarchy styles. classes and IDs should be used sparingly, and it is common to add a block-level element that contains the main part of the tag, and then access the tag in that block-level element with the context selector beginning with the ID and class name of the response.

Sub-selectors, neighboring sibling selectors, attribute selectors, pseudo-classes, pseudo-elements can all help with quick positioning.

Rule declaration

The EM calculation is based on the width of a character in a font, ex equals the letter x height in a given font. In PC development, the use of EM to specify the font size for two reasons: can make full use of inheritance, and secondly, to facilitate the use of visually impaired persons. But Yue Timor is worried about refactoring, changing the nesting hierarchy can easily cause problems, so far Yue Timor still uses pixel units.

Font and text styles

The meaning of CSS is to realize the separation of Web page structure and style. When it comes to the category of fonts, similar to fractals, there are still attributes of structure and style separation. Font properties mainly involve the size and appearance of text. Text attributes mainly involve the processing of fonts, such as line height and letter spacing.

Font collection is divided into two kinds of liner and sans Serif, the main difference is the end of the character strokes. Sans serif sans-serif, more suitable for web design.

The Font property font-variant converts all letters to small caps. Other related font properties such as Font-weight, Font-size, Font-style font-family are literally the font attributes.

The text attribute needs to understand the concept that CSS puts a box around the text in the element. This box is called a text box. The text-indent is used to set the relative position of the text box relative to the containing element. The usual first-line indentation is this property implementation. And the Text-indent attribute has an inherited value, and the Text-indent value is set in the Div, all paragraphs inherit the text-indent value, and the paragraph inheritance indent value is based on the result of the parent element's calculation.

Letter-sapacing is used to adjust the distance between letters, and word-spacing is used to adjust the distance between words.

Text-align sets the alignment of the containing element horizontally, so you must set this property on the containing element.

In addition to setting the line spacing, line-height also has the skill of implementing a single text center. The method is to set the row height to include the height of the element to achieve a vertical centering effect.

text-transform Changes the Chinese text of the element in the case form.

vertical-align can move text above or below the baseline relative to the base. For example, you can construct a chemical expression or an equation.

Box Model

The positioning element is divided into three parts: The box model describes the positioning control of each element that exists in the tag. The Position property defines the position relationship of these elements on the page. The Display property defines whether the element is stacked on the page or side-by and appears.

The box model involves three concepts: border, margin (margin), padding (padding).

The border has three properties: width, style, color. The border increases the size of the element, so the border changes the layout.

The box padding (padding) refers to the distance between the contents of the box and the box's border. The inner margin is inside the box, and setting the background color extension can be used with the padding.

The outer margin of the box sets the distance between the box and the adjacent elements. Most block-level elements have default margins, so they need to be initialized.

*{margin:0;padding:0;}

the outer margin of the box has the problem of folding the margin, that is, when the upper and lower margins meet, they fold each other ., until one element is exposed to another element, in layman's wordsThe final margin effect is a larger margin, rather than accumulating.

The size of the box, through the above padding and the definition of margin, we know that the inner margin and the border is the box size, and the margin does not belong to, usually, the width of the set element is box content, not the width of the box itself, if you set the padding and border, the width of the box will increase , this requires special attention.

float and clear

Floating principle: As long as the width of the element is set, and the page has enough space, then the corresponding elements will be like columns arranged together.

In many layout cases, we don't want any element to be next to the floating element, that is, to keep it below the floating element. That is, clear float.

. Clearfix:atfer{content: "."; Display:block;visibility:hidden;height:0;clear:both;}. Clearfix{display:inline-block}.clearfix{display:block}

Position Property

As described above, the Position property defines the position of the element in the page. Here's a key concept: positioning the environment. Positioning the environment is when we move the element with top, left, right, and bottom, we move it with reference to another element, and this element of reference is the location environment. That is, relative to which element is moved.

Typically, when developing, it is often necessary to set the position attribute as the ancestor element of the element to be positioned as relative, which allows the element to be positioned to modify the positioning environment.

Relative positioning as a static element, the occupied space and the location of other elements are unchanged, that is, just visually moving, and not out of the document flow, the document, still have the position of this element.

absolute positioning differs from relative positioning in that it moves elements completely out of the document stream. the contents of other document streams are moved as the Abosolute is set up to follow the flow of the document.

Fixed positioning is also out of document flow, except that the location environment is the viewport, which is the window where the browser displays the page.

Display Properties

The difference between Display:none and Visiblity:hidden is that the space previously occupied by the former is removed, while the latter elements occupy space and are retained, but not displayed.

Display:block and inline can tailor the display properties of the default elements to the semantic needs.

Floating layouts

for elements with a critical width, a good layout method is to nest an inner div. do not add visual styles directly to the div that makes up the main column, add it to their internal div. This is also the structure and style of fractals, further subdivided.

#main_wrapper {width:840px;/* Widths of columns would change proportionately as this width is changed */margin-left:auto;< c0/>/* Centers layout in browser */margin-right:auto; /* Centers layout in browser */text-align:left; /* Resets the centering hack for IE6 on the body tag */} #header {} #nav {width:22%;/* This width + content width must Tota L 100% */float:left; /* Floats on NAV and content divs make them sit side by side *} #content {float:left;/* floats on nav and content divs ma Ke them sit side by side */width:78%; /* This width + nav width must total 100% */top:0px;} #footer {clear:both;/* makes the footer sit below whichever column is longest */}

The overflow property is used to control how elements handle what they contain, and Overflow:hidden rules enable narrower columns to remain the same width in the above case. This attribute is used when the proportions of the previously processed images are reduced.

Two-column mobile layout

Two-column flow layout, set the Min-width and Max-width properties so that the layout does not get out of control, and set the navigation bar to a fixed width, so that the content bar dynamically change the width.

Three-column layout

Three-column fixed-width layout, set the float and set the percentage width of each column.

Three-column flow layout document flow and key styles are as follows:

#threecolwrap {  float:left;  width:100%;  Background:url (.. /.. /.. /chapter_5/code/images/3_col_faux_art_right.gif) Repeat-y right;  } #twocolwrap {float:left;width:100%;d isplay:inline;/* stops IE doubling  margin on Float*/<span style= "color:# ff0000; " >margin-right:-170px; /* Cws-neg margin Move */</span>background:url (.. /.. /.. /chapter_5/code/images/3_col_faux_art_left.gif) repeat-y left;  } #nav {float:left; <span style= "color: #ff0000;" >width:150px;</span>display:inline; /* Stops IE doubling  margin on float*/} #content {width:auto; <span style= "color: #ff0000;" >margin-left:150px; Margin-right:170px;</span>} #promo {float:left; <span style= "color: #ff0000;" >width:170px;</span>}

The flow three-column layout is achieved by setting the #nav and #promo widths and setting the content margin.

Design Interface Components

Table: The table involves the tagging semantics, and the goal of adding styles is to try to add as few visual factors as possible to ensure the user's understanding of the data. The table label uses Border-collapse to reduce the default two-cell bilateral box to a single-sided box.

Form: A form needs to be aware of a side-by-side form control that, from a semantic relationship, can use an unordered list to achieve alignment.

List: Lists are also different depending on the browser, and the way to make up the difference is to reset the margins and padding of the list to 0, and then add the styles again.

When inline elements apply padding and borders, the containing element is not affected, and the workaround is to set the display property.

Front-end Programming Improvement Tour (v)----A CSS book for everyone to read