css易忽略的小知识点

作者: 飞飞廉 | 来源:发表于2018-01-17 23:16 被阅读0次

css易忽略的小知识点
两年iOS经验之你忽略的小知识点
Activity易忽略的知识点
java易忽略知识点
2019-10-21
iOS开发之 - 小冷易忘知识点总结
17-进阶：第一个JS作品
CSS思维导图(自己梳理)
css小知识点
CSS 小知识点

1、去除inline-block元素间间距的N种方法
给父元素设置font-size为0，在子元素中设置正常的font-size
http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
2、判断一个对象为空？
http://www.jb51.net/article/94318.htm

如果知道属性
var a={name:fei}
if(!a.name)
如果不知道，则将json对象转换成字符串if(JSON.stringfy(a)=='{}')

3、box-sizing
box-sizing:border-box
就是说div设置的width就是实际的width，已经算上了padding和border
box-sizing：content-box
就是说div设置的width只是内容的宽度，并不是实际的宽度，实际的宽度还应加上padding和border
默认不设置的时候是content-box
4、使用CSS实现三栏自适应布局（两边宽度固定，中间自适应），高度随着内容增加而增加

方法1:
思路：两边的div一个左浮动，一个右浮动。中间的自然会跑上边去，这样只需要给中间的div设置等于左边div宽度的margin-left和等于右边div宽度的margin-right即可。中间盒子能撑起父盒子高度，但左右的盒子由于浮动并不能撑起，所以需要清除浮动。
html

 <div class="content">
        <div class="left"></div>
        <div class="right">
            游客被困礁石 危急时刻他跳海救人1月份的青岛，正值隆冬，寒风刺骨。1月14日，气温更是下降至-5℃，寒气逼人。当天下午1
        </div>
        <div class="mid">游客被困礁石 危急时刻他跳海救人1月份的青岛，正值隆冬，寒风刺骨。1月14日，气温更是下降至-5℃，寒气逼人。当天下午1时左右，海军北海舰队中校军官曹海滨在路过青岛八大关海水浴场时，猛然听到海边传来呼救声。“我循声望去，发现海边礁石上有两个人影，他们正在向岸边不停地挥手求助。”曹海滨走近发现，消防官兵、警察已经赶到海边，但是还没展开施救。
        </div>
    </div>

css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 20px;
}
.content{
    width: 100%;
    border:1px solid #999;
    background-color: #eee; 
    padding: 20px;
}
.content:after{
    clear: both;
    content: '';
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
}
.left{
    float: left;
    width: 200px;
    height:100px;
    background-color: #fff;
    border:1px solid #999;
}
.right{
    float: right;
    width: 200px;
    background-color: #fff;
    border:1px solid #999;
}
.mid{
    margin-left: 210px;
    margin-right: 210px;
    background-color: #fff;
    border:1px solid #999;
}

方法二
思路：左右两边用绝对定位，中间元素会自动上来，用margin-left和margin-right在中间自适应宽度。但是有一个问题，这时候绝对定位的元素导致父盒子塌陷是没办法自适应高度的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrap{
            width:100%;
            height: 100px;
            background-color: pink;
            float: left;
        }
        #wrap #center{
            margin:0 210px;
            background-color: green;
        }
        #left_margin,#right_margin{
            width: 200px;
            height: 100px;
            background-color: red;
            float: left;
        }
        #left_margin{
            margin-left: -100%;
        }
        #right_margin{
            margin-left: -200px;
        }
        *{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h3>使用margin负值法进行布局</h3>  
        <div id = "wrap">  
            <div id = "center">sss</div>  
        </div>  
        <div id = "left_margin">11</div>  
        <div id = "right_margin">22</div>  
</body>
</html>

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .con{
            display: flex;
            background-color: #000;
        }
        .left{
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .right{
            width: 200px;
            height: 500px;
            background-color: pink;
        }
        .mid{
            background-color: yellow;
            flex: 1;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="con">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>
    
</body>
</html>