p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000; background-color: #ffffff }
span.s1 { }
布局相关属性
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000; background-color: #ffffff }
span.s1 { }
opacity:0; /透明度 1完全显示0 完全隐藏/
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000; background-color: #ffffff }
span.s1 { }
1.display :修改元素性质 (display: block)
我们不能为行内元素设置width、height,我们可以通过修改display来修改元素的性质
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000 }
-block : 设置元素为块元素 在元素后面换行，显示下一个元素 ，多添加一个就会到下一行显示【Div】
-inline : 设置元素为行内元素 多个块可以显示在一行内【span】
-inline-block : 设置元素为行内块元素
-none : 隐藏元素(元素将在页面中完全消失)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Yuanti SC" }
内联元素和块级元素转换：
<style>
.display-div{ background-color: red; width: 200px;/*可定义宽度*/ display: inline;/*转换为内联元素*/}
.display-span { background-color: green; width: 200px;/*无法定义宽度*/ display: block; /*编程块级元素就可以定义宽度了*/}
</style>
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC" }
2.visibility 设置元素是否可见
和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
-visible ： 可见的
-hidden : 隐藏的
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 21.0px; font: 18.0px "Yuanti SC"; color: #000000 }
3.overflow:控制内容溢出
当标签内容超出样式的宽高时，浏览器就会让内容溢出盒子。通过overflow来控制溢出的情况
-visible ： 默认值
-scroll : 添加滚条
-auto : 根据需要添加滚动条
-hidden : 超出盒子内容隐藏
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Yuanti SC"; color: #000000 }
4.float 浮动
使元素脱离原来的文本流，在父元素中浮动起来，浮动使用float属性.
- none : 不浮动
- left : 左浮动
- right : 右浮动
①块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。
②当一个块级元素浮动以后，宽度默认被内容撑开，所以当浮动一个块级元素时，我们要为其制定一个宽度。
③当元素浮动后，其下方的元素会上移，元素中的内容将会围绕在元素的周围。
④浮动会使元素脱离文本流，即不在文档中占用位置。
⑤元素设置浮动后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素
⑥元素浮动后完全脱离文档流，这时不再影响父元素的高度，也就是浮动元素不会撑开父元素。
⑦浮动元素默认会变为块元素，即使设置display:inline依然是个快元素。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Yuanti SC"; color: #000000 }
清除浮动
clear 清除元素周围的浮动对元素的影响。(元素不会因为上方出现了浮动元素而改变位置)
- left 忽略左浮动
- right 忽略右浮动
- both 忽略全部浮动
- none 不忽略浮动，默认值
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Yuanti SC"; color: #000000 }
5.position 定位：
控制浏览器在何处显示特定的元素。可以使用position属性把一个元素放置到网页中的任何位置。
-static 没有定位
-relative（相对定位）
-absolute（绝对定位）
-fixed 根据浏览器窗口进行定位
left ,right ,top ,bottom 离页面顶点的距离
相对定位：relative
每个元素在文档流都有一个自然位置，相对于这个位置对元素进行移动，周围的元素完全不受此影响。
将position属性设置为relative时，则开启了元素的相对定位。
当开启相对定位后，可以使用top、right、bottom、Left四个属性对元素进行定位。
特点：
①如果不设置元素的偏移量，元素位置不会发生改变。
②相对定位不会是元素脱离文本流，元素在文本流中的位置不会改变。
③相对定位不会改变元素原来的属性。
④相对定位使元素的层级提升，使元素可以覆盖文本流中的元素。
绝对定位：absolute
绝对定位使元素相对于离他最近的父级定位元素进行定位。
当开启绝对定位后，可以使用top、right、bottom、Left四个属性对元素进行定位。
特点：
①使元素脱离文本流，不受其他元素的影响和影响其他元素。
②块元素的宽度会被内容撑开。
③使行内元素变为块级元素。
④absolute和relative一般成对使用。
固定定位：fixed
设置后，该元素被锁定在屏幕的某个位置上，滚动网页时，固定元素会在屏幕上保持不动。
同样可以使用top、right、bottom、Left四个属性对元素进行定位。
6.z-index 提升定位元素所在的层级，值越大，优先级越高。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Yuanti SC"; color: #000000 }
兼容问题及高效开发工具
<!--①兼容性测试工具 ： IE Tester 和 Multibrowser--> <!--②常用的浏览器 Google chrome Firefox opera--> <!--③高效的开发工具：--> <!--Notepad + + 、 subline Text 、记事本 轻量级的--> <!--WebStorm Dreamweaver 重量级的--> <!--④网页设计工具：fireworks 、Photoshop--> <!--⑤判断IE的方法：只有在IE浏览器下才能执行--> <!--<!—[if 条件版本]> 那么显示 <![endif]—> 条件判断格式--> <!--除了IE8都可以显示 [if !IE 8]不等于--> <!--如果IE 浏览器版本小于5.5的显示 [if lt IE 5.5] 小于--> <!--如果IE浏览器版本大于5的显示 [if gt IE 5] 大于--> <!--如果IE浏览器版本小于6的显示 [if lte IE 6] 小于或者等于--> <!--如果IE浏览器版本小于7的显示 [if gte IE 7] 大于或等于--> <!--如果IE浏览器版本大于IE5小于7的显示 [if (gt IE 5)&(lt IE 7)] 大于和小于之间--> <!--如果是IE6或者IE7显示 [if (IE 6)|(IE 7)] 或--> <!--如果是IE8 <!–[if IE 8]> 仅-->
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Yuanti SC" }
原文地址：https://www.cnblogs.com/StevenHuSir/p/WebLayout.html