HTML标签的类型
①块级标签
独占一行的标签，能随时设置宽度和高度(比如div、p、h1、ul、li)
②行内标签
多个行内标签能同时显示在一行，宽度和高度取决于内容的尺寸。(设置高度无效)
③行内块级标签
多个行内-块级标签可以显示在同一行，能随时设置宽度和高度(比如input、button)
案例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常见的标签类型</title> <style> div{ background-color: red; width: 150px; /*块级-->行内 块级标签*/ display: inline-block; } p{ background-color: yellow; display: inline; } span{ background-color: blueviolet; height: 90px; /*变成独占一行 行内-->块级标签*/ display: block; } button{ width: 200px; height: 80px; } </style> </head> <body> <!--块级标签--> <div>我是div</div> <p>段落标签</p> <!--行内标签--> <span>我是行内标签</span> <span>我是行内标签</span> <span>我是行内标签</span> <a href="#">我是超链接</a> <a href="#">我是超链接</a> <a href="#">我是超链接</a> <br><br><br><br><br><br> <!--行内块级标签--> <input> <button>我是按钮</button> <button>我是按钮</button> </body> </html>
布局相关属性
opacity:0; /透明度 1完全显示0 完全隐藏/
1.display :修改元素性质 (display: block)
我们不能为行内元素设置width、height,我们可以通过修改display来修改元素的性质
-block : 设置元素为块元素 在元素后面换行，显示下一个元素 ，多添加一个就会到下一行显示【Div】
-inline : 设置元素为行内元素 多个块可以显示在一行内【span】
-inline-block : 设置元素为行内块元素
-none : 隐藏元素(元素将在页面中完全消失)
内联元素和块级元素转换：
<style> .display-div{ background-color: red; width: 200px;/*可定义宽度*/ display: inline;/*转换为内联元素*/} .display-span { background-color: green; width: 200px;/*无法定义宽度*/ display: block; /*编程块级元素就可以定义宽度了*/} </style>
2.visibility 设置元素是否可见
和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
-visible ： 可见的
-hidden : 隐藏的
3.overflow:控制内容溢出
当标签内容超出样式的宽高时，浏览器就会让内容溢出盒子。通过overflow来控制溢出的情况
-visible ： 默认值
-scroll : 添加滚条
-auto : 根据需要添加滚动条
-hidden : 超出盒子内容隐藏
4.float 浮动
使元素脱离原来的文本流，在父元素中浮动起来，浮动使用float属性.
- none : 不浮动
- left : 左浮动
- right : 右浮动
①块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。
②当一个块级元素浮动以后，宽度默认被内容撑开，所以当浮动一个块级元素时，我们要为其制定一个宽度。
③当元素浮动后，其下方的元素会上移，元素中的内容将会围绕在元素的周围。
④浮动会使元素脱离文本流，即不在文档中占用位置。
⑤元素设置浮动后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素
⑥元素浮动后完全脱离文档流，这时不再影响父元素的高度，也就是浮动元素不会撑开父元素。
⑦浮动元素默认会变为块元素，即使设置display:inline依然是个快元素。
清除浮动
clear 清除元素周围的浮动对元素的影响。(元素不会因为上方出现了浮动元素而改变位置)
- left 忽略左浮动
- right 忽略右浮动
- both 忽略全部浮动
- none 不忽略浮动，默认值
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 提升定位元素所在的层级，值越大，优先级越高。
7.其他
/*设定分栏的个数*/
-webkit-column-count: 3;
-moz-column-count: 3;
/*设定两个栏目之间间隙*/
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
/*栏目之间增加一条分割线*/
-webkit-column-rule: solid 1px lightgray;
-moz-column-rule: solid 1px lightgray;
/*设定分栏的宽度*/
-webkit-column- 200px;
-moz-column- 200px;
/*修改成盒布局*/
display: -moz-box;
display: -webkit-box;
/*改变元素的排列方向*/
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
/*设置元素的显示顺序*/
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
*设置自动填充 使用弹性盒布局来消除空白*/
-webkit-box-flex: 2;
-moz-box-flex: 2;
指定水平方向与垂直方向的对齐方式
-moz-box-align: end;
-webkit-box-align: end;
-moz-box-pack: end;
-webkit-box-pack: end;
自适应布局：监听屏幕宽度对标签样式大小进行修改
<style> /*自适应布局*/ @media screen and (max- 1086px){ #nav ul li a{ width: 150px; } } @media screen and (max- 812px){ #nav ul li a{ width: 100px; font-size: 25px; } #list{ margin-top: 50px; } } </style>
兼容问题及高效开发工具
<!--①兼容性测试工具 ： 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]> 仅-->