zoukankan      html  css  js  c++  java
  • 内嵌支持宽高激活因子、清除浮动常用方法

    一、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;

  • 相关阅读:
    bug记录_signalr执行$.connnection.testhub结果为空
    mysql存储过程
    docker安装svn
    Redis在windows下安装过程
    JAVA日期查询:季度、月份、星期等时间信息
    VueX(Vue状态管理模式)
    Lambda常用写法
    Docker部署SpringBoot项目
    vue+nginx+docker 的前端项目部署方案
    docker常用操作
  • 原文地址:https://www.cnblogs.com/YYvam1288/p/4961425.html
Copyright © 2011-2022 走看看