HTML5高级

块元素的特征：

1、在没有设置宽度的时候，默认撑满一行

2、默认块元素独占一行

3、支持所有CSS命令

内联元素的特征：

1、宽高由内容撑开

2、不支持宽高

3、一行可以显示继续跟同类的标签

4、不支持上下的margin

5、代码换行被解析

Inline-block的特点：

1、块在一行显示

2、行内属性标签支持宽高

3、没有宽度的时候内容撑开宽度

float/文档流

float：left/right/none/inherit;

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

Float的特征：

1、块在一排显示

2、内联支持宽高

3、默认内容撑开宽度

4、脱离文档流

5、提升层级半级

清除浮动：

clear:left/right/none/inherit;元素的某个方向上不能有浮动元素

clear:both;在左右两侧均不允许浮动元素

 
    <style> 
   
    .clearfix{ 
   
     * 
    zoom: 
    1; 
   
     } 
   
    .clearfix:after{ 
   
    content: 
    ""; 
   
    display: 
    block; 
   
    clear: 
    both; 
   
     } 
   
    .box{ 
   
    border: 
    1 
    px 
    solid 
    red; 
   
     } 
   
    .item{ 
   
    width: 
    200 
    px; 
   
    height: 
    200 
    px; 
   
    background-color: 
    red; 
   
    float: 
    left; 
   
     } 
   
    < 
    /style>

 
   <body> 
  
   <div 
    class= 
   "box clearfix" 
   > 
  
   <div 
    class= 
   "item" 
   ></div> 
  
   </div> 
  
   </body>

BFC、haslayout

BFC（block formatting context）标准浏览器

a、float的值不为none;

b、overflow的值不为visible;

c、display的值为table-cell，table-caption，inline-block中的任何一个

d、position的值不为relative和static

e、width/height/min-width/min-height：（！auto）

haslayout IE浏览器

a、writing-model：tb-rl

b、-ms-writing-model：tb-rl

c、zoom：（！normal）

定位：

position:relative;相对定位

a、不影响元素本身的特性；

b、不使元素脱离文档流（元素移动之后原始位置会被保留）；

c、如果没有定位偏移量，对元素本身没有任何影响；

d、提升层级

定位元素位置控制

top/right/bottom/left 定位元素偏移量

position:absolute;绝对定位

a、使元素完全脱离文档流

b、使内嵌支持宽高

c、块属性标签内容撑开宽度

d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移;

e、相对定位一般都是配合绝对定位元素使用

f、提升层级

position:fixed;固定定位

与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；（IE6不支持固定定位）

定位其他值：

position:static;默认值

position:inherit;从父元素继承定位属性的值（不兼容）

position:relative/absolute/fixed/static/inherit;

表格/表单

表格，合并：colspan/rowspan

表单，form，<input type="……" name="" value=""/>

text 文本框 password 密码 radio 单选 checkbox 复选 submit 提交

reset 重置 button 按钮 image 图片 file 上传 hidden 隐藏

type为radio时name要设置相同

label标签为input元素定义标注

checked在页面加载时默认选定的input元素

disabled属性规定应该禁用input元素

select/option 下拉选框，对高度的支持不兼容

textarea 文本域，各个浏览器下的默认滚动条显示不兼容，css3新增resize调整尺寸属性

兼容性：

H5标签兼容（IE6）

 
   <script> 
  
   document. 
   createElement( 
   "header"); 
  
   document. 
   createElement( 
   "section"); 
  
   document. 
   createElement( 
   "footer"); 
  
   < 
   /script> 
  
   <style> 
  
   header{ 
  
   width: 
   200 
   px; 
  
   height: 
   200 
   px; 
  
   display: 
   block; 
  
   background-color: 
   red; 
  
    } 
  
   section{ 
  
   width: 
   150 
   px; 
  
   height: 
   150 
   px; 
  
   display: 
   block; 
  
   background-color: 
   yellow; 
  
    } 
  
   footer{ 
  
   width: 
   100 
   px; 
  
   height: 
   100 
   px; 
  
   display: 
   block; 
  
   background-color: 
   blue; 
  
    } 
  
   < 
   /style>

 
   <body> 
  
   <header>header 
   </header> 
  
   <section>section 
   </section> 
  
   <footer>footer 
   </footer> 
  
   </body>

这个办法不是很简洁，比较麻烦。可以引入html5shiv.js文件。

元素浮动兼容性

元素浮动之后，能设置宽度的话就给元素加宽度。如果需要宽度是内容撑开，就给它里边的块元素加上浮动。

第一块元素浮动，第二块元素加margin值等于第一块元素，在IE6下会有间隙问题；

IE6下子元素超出父级宽高，会把父级的宽高撑开

p包含块元素嵌套规则

margin兼容性问题

display:inline-block

IE6最小高度问题

IE6双边距

li里元素都浮动li在IE67下方会产生4px间隙问题

浮动元素之间注释，导致多复制一个文字问题

IE67父级元素的overflow：hidden是包不住子级的relative

IE6下绝对定位元素父级宽高是奇数，绝对定位元素的right和bottom值会有1px的偏差

IE6下绝对定位元素和浮动元素并列绝对定位元素消失

IE6下input的空隙

IE6下输入类型表单控件背景问题

猜你喜欢