内嵌支持宽高激活因子、清除浮动常用方法

一、HTML+CSS

1、盒子模型、块级元素、行内元素特性与区别?http://www.tuicool.com/articles/JzuQZnI

盒子模型:标准盒子模型——宽度width为content宽度;IE盒子模型——宽度width包含content、padding、border。解决办法:在页面顶部加上DOC声明,浏览器就会采用标准盒子模型。

块级元素:独占一行,垂直方向排列,可以设置宽度和高度,可以容纳行内元素

行内元素:同一行内水平排列,不能容纳块级元素,widthheight、margin-topmargin-bottompadding-toppadding-bottom失效

块级元素和行内元素可以通过display互相转换

2、如何使内嵌元素支持宽高,加上以下任一属性,即可给内嵌元素设置宽高。

  1)display:inline-block

    使块元素在一行显示,IE67下不支持块标签,需要加上{*display:inline;*zoom:1;}

    使内嵌支持宽高

    换行被解析

    不设置宽度时由内容撑开  (正常情况下,块元素不设置宽度,默认占据一行,内嵌是由宽度撑开,加上这个属性后,块元素可以不设置宽度,而由内容自动撑开了)     

  2)浮动  left right none

    使块元素在一行显示

    使内嵌支持宽高

    不设置宽度时由内容撑开  

    脱离文档流

    提升层级半层

  3)position:absolute;

    脱离文档流

    使内嵌支持宽高

    使块元素的宽度由内容撑开

    有定位父级,相对定位父级偏移,没有定位父级,相对文档偏移

    相对定位一般都是配合绝对定位使用

  4)position:fixed

    脱离文档流

    使内嵌支持宽高

    使块元素的宽度由内容撑开

    相对整个文档进行定位   

3、清除浮动的方式以及各自的优劣?

  1)伪类清除浮动

    .clearfix { *zoom:1; }  触发haslayout,如果元素有width,可以不用设置

    .clearfix:after{ content:""; display:block; clear:both; }

  2)空标签

    <div style="clear:both"></div>  (元素无语义,不易维护和改版,并且IE6下有最小高度,解决后也有2px偏差)

  3)<br clear="all"/>  (缺点同上)        

  4)overflow:hidden

    需要配合宽度,或*zoom:1

    缺点:不能嵌套使用,点击浮动框会造成外层至内层内容全选、内容增多时会隐藏掉内容等问题。适用在小模块里使用

  5)正文中可以使用邻接元素清理浮动

  6)加高度  (扩展性不好)

  7)给父级加浮动  (页面中所有元素都加浮动,margin左右auto失效)

  8)inline-block  (导致margin左右auto失效)

4、CSS选择器以及优先级计算

选择器优先级

  !important,IE6不支持 > 行间样式 > id选择器 > 类选择器、属性选择器、伪类选择器 > 元素类型选择器 > 通配选择器

样式表优先级

  第一优先级:<head><style>这里最高</style></head>

  第二优先级:style标签里@import 引入的样式表

  第三优先级:由link引入的样式表

  第四优先级:link引入的样式表里@import 导入样式表

  第五优先级:用户设定的

  第六优先级:浏览器默认

5、定位

  1)relative

    a.不影响元素本身的特性

    b.不会使元素脱离文档流,元素移动后,原始位置会保留

    c.如果没有定位偏移量,对元素本身没有任何影响

    d.提升层级

  2)absolute

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

    b.使内嵌支持宽高

    c.块属性标签内容撑开高度

    d.如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移

    e.相对定位一般都是配合绝对定位使用

    f.提升层级

  3)fixed

    特性与absolute基本一致,差别是始终相对文档定位

    问题:IE6不支持,IE6需要用JS去做

  4)static  默认值

    inherit  从父元素继承定位属性的值(不兼容)

6、清除默认样式

  body {margin:0;}

  ul,ol {margin:0;padding:0;list-style:none;}

  dl,dd {margn:0;}

  h1,h2,h3,h4,h5,h6 {margin:0;}

  p {margin:0;}

  strong {font-weight:normal;}

  a {text-decoration:none;}

  em {font-style:normal;}

  {border:0;}  包含在a链接下,在IE下时有边框

  table {border-collapse:collapse;}

  th.td {padding:0;}

7、input的一些常见样式

  清除input获取焦点后的边框  outline:none;

  清除submit的边框  border:none;

原文地址:https://www.cnblogs.com/YYvam1288/p/4961425.html