0.1, CSS introduces the way of the interface: inline: Through the label's style property, on the label directly write style. <div style= "width:100px; height:100px; Background:red "></div> embedded: Create an embedded style sheet on a Web page by using the Style tab. <style type= "Text/css" >div{width:100px; height:100px background:red chain: via link tag, Link the external style file to the page. <link rel= "stylesheet" type= "Text/css" href= "Css/main.css" >
0.2. CSS selector:
Tag Selector class selector hierarchy selector
0.3, properties (Common): layout commonly used: Width,height,background,border,solid (solid line), padding, margin,float,opacity:0.3 (element transparency), z-index:1 ( Represents a cascade, the higher the value, the higher the above)
Text common style attributes; Color,font-size, font-family, Font-weight, Line-height, text-decoration (underline), text-align (text alignment), Text-indent ( Indent the first line of text) 0.4, element overflow: overflow:visible (default) is not trimmed hidden: trimmed, the rest is not visible scroll: trimmed, but the browser will have a scroll bar to see the rest of the content auto: If trimmed, there will be scroll bars
0.5, sub-column: <p> This section of text to test the column. This section of text is used to test the column. This section of text is used to test the column. </p>
p {width:200px;/* Set the width of the paragraph a little shorter to facilitate the presentation of the effect */column-count:3;/* settings need to be divided into several columns */column-gap:20px;/* Set two column interval */}
1.1, Box model: include: content, fill (padding), Border (border), margin (margin). The height that we set for the element is the height of the content, and then the element is filled (padding), which makes the original element look higher because it will hold 1.2, without semantics: no elements of the style (that is, there is no line height, spacing, color, etc.), such as Div 1.2 Bounding box model: <box-sizing:border-box></box-sizing:border-box> Sometimes we don't want to fill the element (padding), the height of the element changes, Against our layout, we can use the above method, in the strange mode of IE, using this mode ... <div class= "Box-model" >box-model</div> ... <typle>. Box-model {box-sizing:border-box;/* Set to border-bound box model */BORDER:1PX solid red; height:80px; padding:10px;} </typle> ;
1.3, inline elements (block) layout is generally used block elements: 1.3.1 elements can be set wide, the default occupies a row, the line element cannot be set wide, width is determined by its content of 1.3.2 elements are not height by default, and content will have height. The inline element defaults to no height and width, there is content to be there, although the inline elements cannot be set to a wide height, but when set to absolute positioning (absolute), you can set the width height. 1.3.3 block elements: <div></div> <p></p> <ul></ul> <li></li> <table>< /table> <form></form>
Inline elements: <a href= "" ></a> <font></font> <em></em> <strong></strong> < i></i> <span></span> empty elements: <br>
1.4. Position (position): 1.4.1 Absolute (absolute), relative (relative), fixed (fix) Move: Left,right,top,bottom Clear the positioning of the layout space (absolute fixed) 1.4.2 Fixed positioning does not change position as the mouse scrolls. He really is a fixed screen of a certain location, the more common is the bottom right corner of the page ads
The location origin of absolute positioning (absolute) is the parent node of the non-default positioning (static). Can be absolute fixed relative, if the parent node does not have these, the positioning origin is the body. Using one of these two positions, the layout space that the element originally occupies will disappear (out of the document flow)
1.4.5 relative positioning (relative): Position relative to the original position. Using this method, the layout that the element was originally occupied is preserved. The parent uses relative, and the descendants use absolute. The location origin of the descendant becomes the default position of the parent element's upper-left corner: static floating (float): Center A floating element: width:500px; height:300px;//height can be set without Margin: -150px 0 0-250px; Center A common element: margin:0 auto; Clear float (overflow:hidden;): Using this method means that a floating element has to have a parent element and add Overflow:hidden to the parent element;. nav {overflow:hidden;} Clear float (. Clear): This method requires adding an empty node after the floating element, and then writing the clear property. Compatible IE6 need to add zoom:1;. <div class= "Clear" ></div> <!--used to clearly float the empty element--
CSS selectors have: ID selector (# myID) class selector (. myclassname) Tag Selector (Div, H1, p) neighbor selector (H1 + P) Sub-selector (UL < li) descendant selector (Li a) wildcard selector (*) Property selection (A[rel = "external"]) pseudo-class selector (a:hover, li:nth-child) 1.5, display of the value of block as a block type element as shown. The default value of None. Appears as an element type in the row. Inline-block is displayed like an inline element, but its contents are displayed like a block type element. List-item is displayed like a block type element, and a style list tag is added. 1.6, Weight: Tags: 1 class selector: The weight is: Ten ID selector: The weight of 100 weights can be added: the weight of the #id div is 101 embedded in the label of the style property weight of 1000 weight is the same, the last defined style will work, Generally try to avoid this situation 1.7, graceful downgrade: The Web site in all modern browsers are working properly, if it is an old-fashioned browser, will check whether it works, if not support the function for those browsers to add a candidate scheme, so that in the old-style browser can be degraded in some way experience, But it is not completely ineffective. Progressive enhancement: Add features that are only supported by modern browsers, starting with the basic features supported by all browsers, and adding extra styles and functionality to the page that are harmless to the underlying browser. When browsers support them, they are automatically rendered and functioning.
Summary of front-end HTML,CSS Basics
