左侧固定，右侧自适应1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="左侧固定右侧自适应" />
<meta name="copyright" content="左侧固定右侧自适应" />
<title></title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:100%; height:50px; background:green;}
#div1 div{ height:50px;}
#left{float:left;width:200px; background:#ccc;}
#right{ margin-left:200px; background:pink;}
</style>
<script>
</script>
</head>
<body>
<div id="div1">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
左侧固定，右侧自适应2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{ display:-webkit-box;width:100%; height:50px; background:green;}
#div1 div{ height:50px;}
#left{width:200px; background:#ccc;}
#right{ -webkit-box-flex:1; background:pink;}
</style>
<script>
</script>
</head>
<body>
<div id="div1">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
左右固定,中间自适应1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>左右固定,中间自适应</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:100%; height:50px; background:green;}
#div1 div{ height:50px;}
#div1 .left{float:left;width:200px; background:#ccc;}
#div1 .center{background:pink; margin-left:200px; margin-right:200px;}
#div1 .right{float:right;width:200px; background:yellow;}
</style>
<script>
</script>
</head>
<body>
<div id="div1">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</body>
</html>
左右固定，中间自适应2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>左右固定,中间自适应</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{ display:-webkit-box;width:100%; height:50px; background:green;}
#div1 div{ height:100px;}
#div1 .left{ width:200px; background:#ccc;}
#div1 .center{ -webkit-box-flex:1;background:pink; min-width:400px;}
#div1 .right{ width:200px; background:yellow;}
</style>
<script>
</script>
</head>
<body>
<div id="div1">
<div class="left">left</div>
<div class="center">未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网未连接到互联网</div>
<div class="right">right</div>
</div>
</body>
</html>
弹性布局方向
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>弹性布局方向</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{ display:-webkit-box;width:100%;
-webkit-box-orient:horizontal;
}
#div1 div{ height:100px;}
#div1 .left{ width:200px; background:#ccc;}
#div1 .center{ -webkit-box-flex:1;background:pink; min-width:400px;}
#div1 .right{ width:200px; background:yellow;}
</style>
<script>
</script>
</head>
<body>
<div id="div1">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
弹性布局第二中写法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>弹性布局第二种写法</title>
<style>
*{margin:0;padding:0;list-style:none;}
ul{display:flex;}
ul li{flex:1;/*float:left;*/ height:50px; line-height:50px; text-align:center;border:2px solid yellow;}
</style>
<script>
</script>
</head>
<body>
<ul>
<li style="background:#16FBE9;">首页</li>
<li style="background:#1B6FE9;">首页</li>
<li style="background:#16FE9B;">首页</li>
<li style="background:#916FBE;">首页</li>
<li style="background:#1FB6E9;">首页</li>
</ul>
</body>
</html>
弹性布局1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></title>
<style>
*{margin:0;padding:0;list-style:none;}
ul{display:-webkit-box;}
ul li{-webkit-box-flex:1;/*float:left;*/width:20%; height:50px; line-height:50px; text-align:center;border:2px solid yellow;}
</style>
<script>
</script>
</head>
<body>
<ul>
<li style="background:#16FBE9;">首页</li>
<li style="background:#1B6FE9;">首页</li>
<li style="background:#16FE9B;">首页</li>
<li style="background:#916FBE;">首页</li>
<li style="background:#1FB6E9;">首页</li>
</ul>
</body>
</html>
弹性布局2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></title>
<style>
*{margin:0;padding:0;list-style:none;}
ul{display:-webkit-box;}
ul li{height:50px; line-height:50px; text-align:center;border:2px solid yellow;}
ul li:nth-child(1){-webkit-box-flex:1;}
ul li:nth-child(2){-webkit-box-flex:2;}
ul li:nth-child(3){-webkit-box-flex:1;}
</style>
<script>
</script>
</head>
<body>
<ul>
<li style="background:#16FBE9;">首页</li>
<li style="background:#1B6FE9;">首页</li>
<li style="background:#16FE9B;">首页</li>
</ul>
</body>
</html>
水平居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>水平居中</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;width:500px; height:500px; border:1px solid red; margin:100px auto;}
#div2{ width:100px; height:100px; background:red;}
</style>
<script>
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
流式布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>流式布局</title>
<style>
*{margin:0;padding:0;list-style:none;}
ul li{float:left;width:calc(20% - 4px); height:50px; line-height:50px; text-align:center;border:2px solid yellow;}
</style>
<script>
</script>
</head>
<body>
<ul>
<li style="background:#16FBE9;">首页</li>
<li style="background:#1B6FE9;">首页</li>
<li style="background:#16FE9B;">首页</li>
<li style="background:#916FBE;">首页</li>
<li style="background:#1FB6E9;">首页</li>
</ul>
</body>
</html>
流式布局2
扫描二维码关注公众号，回复：
1660616 查看本文章
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>流式布局</title>
<style>
*{margin:0;padding:0;list-style:none;}
ul li{float:left;width:20%; height:50px; line-height:50px; text-align:center;border:2px solid yellow; box-sizing:border-box;}
</style>
<script>
</script>
</head>
<body>
<ul>
<li style="background:#16FBE9;">首页</li>
<li style="background:#1B6FE9;">首页</li>
<li style="background:#16FE9B;">首页</li>
<li style="background:#916FBE;">首页</li>
<li style="background:#1FB6E9;">首页</li>
</ul>
</body>
</html>
box-sizing的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>box-sizing border-box content-box</title>
<style>
#div1{width:200px; height:200px; background:red;
border:10px solid #000; box-sizing:content-box;
/*
box-sizing:
border-box:怪异模式—— 自动计算
content-box：正常盒模型
*/
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv.offsetWidth);
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
em的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>em的使用</title>
<style>
html{font-size:30px;}
body{font-size:20px;}
div{float:left; margin:10px;height:200px; line-height:200px; text-align:center;}
#div1{width:10em; background:red;}
#div2{width:10rem; background:green;}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
fontSize的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>fontSize</title>
<style>
html{font-size:62.5%;}/*16*62.5% = 10px */
</style>
<script>
window.onload = function(){
var oSpan = document.getElementById("s1");
//html字体大小 最小就是12px
alert(getComputedStyle(oSpan,null).fontSize);
};
</script>
</head>
<body>
<span id="s1">啥啥啥</span>
</body>
</html>