div css (key review)_html/css_WEB-ITnose

CSS Cascading Style Sheet

优势：使页面结构和表现分离1.引入方式：   1）行内样式：<h2 id="Hello-World">Hello World</h2>　　2）内部样式：<style type="text/css">        　　　　  h2{        　　　　　　　　 color:#F00;           　　　　   }　　　　　　　　 </style>　　3）外部样式：<link href=“a.css”  type=“text/css” rel=“stylesheet”/>    推荐　　　　　　　 　<style type="text/css">     　　　　     @import url("a.css");                    //  @import “a.css”;　　　　　　    </style>　　　　问题：link和@import的区别：　Link和@import的区别： 　　　　　　　　　　　　　　　　　　  1.隶属上的差别     　　　　　　　　　　　　　　　　　　 link是一个html的一个标签，而@import是css的一个标签　 　　　　　　　　　　　　　　　　　　  2. @import次数限制  听说在IE下只能导入61个CSS样式文件   　　　　　　　　　　　　　　　　　　  3.加载顺序的不同   　　　　　　　　　　　　　　　　　　    当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，   　　　　　　　　　　　　　　　　　　    而@import引用的CSS 会等到页面全部被下载完再被加载。    　　　　　　　　　　　　　　　　　　  4.兼容性上的差别   　　　　　　　　　　　　　　　　　　    由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题    　　　　　　　　　　　　　　　　　　  5.使用DOM控制样式时的差别   　　　　　　　　　　　　　　　　　　    当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。　  优先级问题：行内样式  > 内部样式 > 外部样式   就近原则

 2.CSS选择器

      1）语法格式：选择器{属性：属性值；}    举例：h2{color：#0F0;}

　　2) 常见选择器

Tag Selector h2{ } Class Selector .a { }

// Cannot be a numeric ID selector #a{ }

// ID must be a unique intersection selector h1,h2{ } Union selector ( Parent class selector) p a{ } Pseudo class selector Anchor link LoVe Hate CSS2 - :first-child Pseudo class p:first-child { font-weight: bold; } Universal selector *{ }

　　注意：

　　　　一个HTML元素只能有一个ID选择器，但是可以有多个类选择器。

　　　　?<h1 id = “a” id = “b”></h1>                                             错误

　　　　?<h1 class = “a b c”></h1> .a{  }   .b{   }   .c{   }               正确  3. 盒子模型（边距）                

border, margin, padding.

boder: The border of the table box.

Margin: the distance between the box and the outside world

padding: the distance between the box boundary and the content inside the box.

border:1px means the top, bottom, left and right borders are 1px

boder:1px 2px means the top and bottom borders are 1px, and the left and right borders are 2px

Represents a border The order is top, right, bottom, left.

Set borders individually: bottom border: border-bottom: 2px solid #cccccc;

Head border: border-top: 2px solid #cccccc;

margin,padding Similar to border.

IE6/IE7/firefox final width = left margin, left border width, left inner margin, width, right inner margin, right border width, right outer margin.

4. CSS floating

Floating concept:
When using div layout, I found that each div is arranged in blocks, which is not conducive to the layout of the page, so CSS The floating technology of elements is proposed, which can make block elements appear in the same line while floating.
Features
The element will get stuck when it encounters the border of the parent container when floating
If the child element and the parent element float in opposite directions at the same time, then the parent element will be floated first, and then the child element will float in the parent element Internal float
If the parent element does not float and contains floating child elements, then the floating element will break away from the document flow (emphasis)

1: Web page layout method: floating layout, positioning layout. They are all out of the control of document flow (top-down relationship).
2: Floating cleaning: clear
3: When to use floating positioning
Note: Floating is required when the website has strong adaptability to resolution and content size. In the center layout, the horizontal width can be scaled by percentage, and you need to use attributes such as margin, padding, and border.
After the layer is set to float, the layer will be separated from the document flow, and subsequent layers will flow into this layer, but the text will not flow into this layer. It is not completely separated from the document flow

Absolute positioning will cause the layer to be completely separated from the document flow and placed on top of other objects. At this time, the layer has the z-index attribute. The larger the value of the z-index attribute, the more this layer appears on top. Position has two commonly used values: absolute and relative. The former represents absolute positioning and does not take up space. The latter represents relative positioning and takes up space. The default is not set to static

z-index
The z-index attribute in CSS is used to set the stacking order of nodes. Nodes with a higher stacking order will be displayed in front of nodes with a lower stacking order. This is our common understanding of the z-index attribute.