×

CSS篇-CSS小技巧与注意手记(二)

96
TianTianBaby223
2018.07.18 07:49* 字数 320

一 : float/绝对定位/固定定位 可以让元素默认转换为行内块元素

元素的大小完全取决于定义的大小或者默认的内容多少,浮动根据元素书写的位置来显示相应的浮动。

只给盒子一个高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        height: 100px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果


效果

当我们添加float,绝对定位,固定定位盒子时候,默认转化为行内块,假如不给宽度,盒子大小与内容大小相同.

效果

二 : 清除浮动的几种方式

其实本质叫做闭合浮动

  • 额外标签法
    W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
 <div style=”clear:both”></div>

,或则其他标签br等亦可。

  • 父级添加overflow属性方法
可以给父级添加: overflow为 hidden|auto|scroll  都可以实现。
  • 使用after伪元素清除浮动
.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
  • 使用before和after双伪元素清除浮动
.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动*/
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

三 : 定位盒子居中问题

  • 盒子添加float 导致margn:auto失效

浮动是左对齐,添加后与margn:auto同时产生效果,只产生浮动效果
原效果代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3</title>

    <style>
        div{

        background-color: pink;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果


效果

添加float后代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3</title>

    <style>
        div{

        background-color: pink;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        float: left;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

添加后效果


效果
  • 盒子添加绝对定位 导致margn:auto失效

与上述float相同,加了position: absolute;也会使margn:auto失效

男神无私的技术分享
Web note ad 1