css易忽略的小知识点
2018-01-17 本文已影响0人
飞飞廉
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>
