小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
[原]CSS常用技巧 - 开发中总结出最有用的技巧
  • 首页 > 前端 > HTML+CSS
  • 作者:小昱
  • 2016年6月8日 22:09 星期三
  • 浏览:127
  • 字号:
  • 评论:0
  • 一、关于浮动后盒子坍塌的解决

    1. 给父元素设置高度

    2. 父元素使用overflow: hidden

    父元素没有设置高度,本来只由padding-top撑起盒子的高度,子代浮动,只需在父元素设置overflow:hidden;即可避免盒子坍塌,如:

    div{
        width:200px;
        border:1px solid red;
        padding-top:30px;
        overflow:hidden;
    }
    p{
        width:200px;
        height:500px;
        float:left;
        background:green;
    }
    <div><p></p></div>

     

    二、清除浮动的几种技巧

    处理浮动带来的问题,可以通过清除浮动属性来解决

    1. 给父元素设置固定的宽高

    2. 给父元素设置overflow:hidden | auto;

    3. 可以在父元4素末尾添加一个空的块标签,设置clear: both;

    <div>
        <p></p>
        <p></p>
        <div style="clear:both;"></div>
    </div>
    也可以在父元素之外添加一个空标签,先定义一个clear类,添加此类即可
    
    .clear{
      clear:both;
    }

    4. 给父元素添加一个结构伪类

    <div>
        <p></p>
        <p></p>
    </div>
    <div class="clear"></div>
    父元素:after{
        content: "";
        width: 0;
        height: 0;
        clear: both;
        display: block;
        zoom: 1;
    }

     

    三、两个inline-block的元素之间产生空白原因

    两个元素之间有换行,当一个空格处理,如果连续写两个此元素不存在此问题

     

    四、内容放不下时出现省略符号…

    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;

     

    五、左侧固定,右侧自适应

    左边块固定宽度,右边块设置定位即可。

    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    .box{
      height: 200px;
      position: relative;
    }
    .box>div{
      height: 100%;
    }
    .left{
      width: 100px;
      background-color: #f00;
    }
    .right{
      background-color: #0f0;
      position: absolute;
      top: 0;
      left: 100px;
      right: 0;
    }

     

    六、图片下方空隙

    1. img{display:block;}
    2. img{vertical-align : top | middle | bottom}
    3. 给父容器设置固定高与img的高一样
    
    div{
      background: #f00;
    }
    img{
      display: block;
      /*vertical-align: top;*/
    }
    <div>
      <img src="http://i0.itc.cn/20170608/3728_69209e22_5ace_2eb7_41ee_f842395e14e3_1.jpg" alt="">
    </div>

     

    七、两个行内元素之间的水平间距

    出现原因:水平间距其实就是元素之间的空格

    1. 让元素之间不要有空格和换行,即让标签紧挨着标签
    2. 给父元素设置font-size:0;但要注意给元素内部所有元素字体大小都为0
    3. 给元素添加浮动属性(推荐使用float)

     

    八、两个行内块对不齐 (img与input)

    1. vertical-align : top | middle | bottom
    2. 添加浮动属性

     

    九、层叠样式问题

    给子元素margin-top时,浏览器中是给父元素添加了margin-top的值

    1. 给父元素添加 overflow:hidden | auto;
    2. 给父元素设置 padding-top:0.1px;
    3. 给父元素设置 padding-top值代替子元素的 margin-top
    4. 给父元素添加一个上边框 border-top
    5. 给父元素或者子元素添加浮动属性
    
    <div class="fu">
      <div class="zi"></div>
    </div>
    .fu{
      background-color: #f00;
      width: 200px;
      overflow: hidden;
    }
    .zi{
      background-color: #0f0;
      width: 100px;
      height: 100px;
      margin-top: 200px;
    }

     

    十、代码写三角形

    element{
        width:0;
        height:0;
        display:block;
        border-top:20px solid transparent;
        border-bottom:20px solid red;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
    }
    将生成一个尖向上的三角形

     

    十一、IE9- 注释hack

    <!--[if IE]>
        此处写的代码只有IE9-浏览器能够解析
        其他浏览器解析为注释
    <![end if]-->
    指定版本的IE(5,6,7,8)
    
    <!--[if IE 版本号]>
    <![end if]-->
    版本号可以省略,省略后代表所有IE版本
      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: [原]CSS常用技巧 - 开发中总结出最有用的技巧
    本文地址:http://www.xiaoyulive.top/?post=62
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号