DIV CSS Summary Experience_html/css_WEB-ITnose-HTML Tutorial-php.cn

DIV CSS Summary Experience_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:32:05

Original

884 people have browsed it

让你使用DIV+CSS排版不是让你用换个标签然后再去按照表格的方式去排版
而是做到内容与表现的分离
1: ID用于标识页面单独元素以及持久行的结构性元素方便JS的调用
类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形式无关：leftContent 而使用有意义的定义方式：sideBar等等。命名方式遵循“驼峰式大小写（标志符由多个单词组成除首词首字母小写外其余单词首字母均大写）”
2：避免滥用类当类型的结构需要不一样的表现时记得什么是层叠样式表具体结构中的p a h1等可使用如下方式：div.sideBar p{}定义即后代选择器+ID或类选择器组合方式。
3：DIV与SPAN DIV（块级框）用于对块级元素的分组 SPAN（行内框）用于对行内元素分组标识
4：对于页面基本默认的方式可以选择通用选择器（*标识）进行定义 * { padding：0; margin:0;}
5: body 也是可以添加ID和类的这样就可以为其添加特别样式。
6:样式表中导入样式表需在顶端覆盖规则为本身样式覆盖导入样式
7：CSS样式表细分化颜色布局风格表单均可分离这样对以后的修改和风格设计更方便
8：盒模型：内→外
content←width height(补充：height只有在父元素定义了绝对高度时其%才有意义)
border
padding（内补丁）-“填充”
background-image
background-color
margin(外补丁)-“空白边”透明可为负值
记住:在css中 width是指内容区域的宽度
IE/WIN与盒模型：
IE5.5/IE6怪异模式下：元素框总宽度=content.width+margin.width
FireFox/Opera/.. : 元素框总宽度=content.width+padding.width+border.width+margin.width
差异在于：IE5.5/IE6怪异模式下 width=有效content.width+padding.width+border.width 内补丁和边框被算在内容宽度里面
#select{width:750px;padding:10px;border:5px} IE怪异模式:总宽度：750px FF/OP：780px
IE怪异模式:有效内容宽度：750-20-10 FF/OP：750
IE6正常模式下：同于FF/OP
处理方法：在父元素或子元素中使用padding 本身不使用
空白边叠加：当两个空白边叠加时顶或底边将会叠加实际空白边高度=空白边大的值
例：

The height of the blank margin is 20px
But if you add a border or padding at this time, it will no longer be superimposed

//Positioning mechanism//
9: Relative positioning (relative): Absolute positioning relative to its default initial position: Relative to the parent element or canvas, HTML elements have nothing to do with the document flow and can cover other elements using Z-INDEX to control their hierarchy. When setting the right bottom under IE5.5/IE6, you need to set the width and height of the box and then position it according to the right bottom of the canvas
Absolute positioning (absolute)
10: float floating: Remember: "Float in standard browsers" Elements are separated from the document flow and do not occupy the surrounding container space." Once you understand this, you will understand why the performance is different between IE and FIREFOX. IE5.5 and IE6 floating elements still occupy the peripheral container space
For example: How can the feet be normal under IE but run up under Firefox? ^_^ Clear the float
Under IE, a double error occurs when float and text-align define the same direction: select{float:left;text-align:left;margin:0 10px;}
Actual left margin-left: 20px; FF/OP: 10px Solution: add display: inline;

11: Thoroughly understand "clear float" clear
clear: none, left, right, both,
Indicates which sides of the current box element should not be next to the floating box
After understanding the performance of float in different browsers in 10, you will know how to use it clearly.
12: Positioning of the background image: only talk about percentage background:url(image-url.gif)no-repeat 20% 30%
20%: Align 20% of the X-axis of the image with 20% of the X-axis of the parent element Top=0% bottom=100% left=0% right=100% center=50%
13: Sliding door/
The backgrounds of the two left and right DIVs are defined separately. Generally, the left background image is longer; Left background positioning: left center Right background positioning: right center
The width of the external control container is generally less than or equal to two backgrounds. In this way, when the content changes dynamically, the right background image feels like it is sliding on the left background image, hence the name.
This can also be achieved: