|
float属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>float属性</title>
<style type="text/css">
div {
border: 2px solid black;
width: 300px;
height: 80px;
padding: 5px;
}
</style>
</head>
<body>
<div style="float: left;">
float:left; 浮向左边;</div>
<div style="float: left;">
float:left; 浮向左边;</div>
<hr>
<div style="float: right;">
float: right; 浮向右边;</div>
<div style="float: right;">
float: right; 浮向右边;</div>
</body>
</html>
float实现多栏布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>多栏布局</title>
<style type="text/css">
body{
margin: 0px;
}
div#container {
width: 960px;
margin: auto;
}
div>div {
border: 1px solid #aaa;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
background-color: #aaf;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div style="float: left; width: 220px;">
<h2>第一栏</h2>
<ul>
<li>第一栏 1</li>
<li>第一栏 2</li>
<li>第一栏 3</li>
<li>第一栏 4</li>
<li>第一栏 5</li>
</ul>
</div>
<div style="float: left; width: 500px;">
<h2>第二栏</h2>
<ul>
<li>第二栏 1</li>
<li>第二栏 2</li>
<li>第二栏 3</li>
<li>第二栏 4</li>
<li>第二栏 5</li>
</ul>
</div>
<div style="float: left; width: 240;">
<h2>第三栏</h2>
<ul>
<li>第三栏 1</li>
<li>第三栏 2</li>
<li>第三栏 3</li>
<li>第三栏 4</li>
<li>第三栏 5</li>
</ul>
</div>
</div>
</body>
</html>
clear属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<title>clear属性</title>
<style type="text/css">
div>div{
width: 220px;
margin: 2px;
float: left;
background-color: #ddd;
}
</style>
</head>
<div>
<div>测试文字 1</div>
<div>测试文字 2</div>
<div>测试文字 3</div>
<div>测试文字 4</div>
<div>测试文字 5</div>
</div>
</html>
clip属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;"/>
<title>clip属性</title>
<style type="text/css">
div {
position: absolute;
font-size: 30pt;
border: 2px solid black;
background-color: #ccc;
width: 550px;
padding: 5px;
overflow: hidden;
}
</style>
</head>
<body>
<div style="top: 0px; clip: rect(16px 400px auto 30px);">
rect(16px 400px auto 30px);</div>
<div style="top: 120px; clip: rect(24px 480px auto 60px);">
rect(24px 480px auto 60px);</div>
<div style="top: 240px; clip: rect(36px 520px auto 90px);">
rect(36px 520px auto 90px);</div>
<div style="top: 360px; clip: rect(36px auto auto 120px);">
rect(36px auto auto 120px);</div>
</body>
</html>
overflow属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>overflow 属性</title>
<style type="text/css">
div {
width: 300px;
height: 70px;
border: 1px solid black;
white-space: nowrap;
margin: 15px;
}
</style>
</head>
<body>
<div>
<h3>不设置overflow属性</h3>
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow: hidden;">
<h3>overflow:hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow: auto;">
<h3>overflow: auto;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-x:hidden;">
<h3>overflow-x:hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-y: hidden;">
<h3>overflow-y: hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</body>
</html>
基础盒模型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>基础盒模型</title>
<style type="text/css">
div,span {
width: 300px;
height: 40px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>div元素一</div>
<div>div元素二</div>
<div>span元素一</div>
<div>span元素二</div>
</body>
</html>
none值
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<title>隐藏元素</title>
<style type="text/css">
div {
width: 300px;
height: 40px;
background-color: #ddd;
border: 2px solid black;
}
</style>
</head>
<body>
<input type="button" value="隐藏"
onclick="document.getElementById('test1').style.display='none';"/>
<input type="button" value="显示"
onclick="document.getElementById('test1').style.display='';"/>
<div id="test1">
使用display控制对象的显示隐藏
</div>
<input type="button" value="隐藏"
onclick="document.getElementById('test2').style.visibility='hidden';"/>
<input type="button" value="显示"
onclick="document.getElementById('test2').style.visibility='visible';"/>
<div id="test2">
使用visibility控制对象的显示隐藏
</div>
<hr>
</body>
</html>
inline-table属性值
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>inlien-table盒模型</title>
<style type="text/css">
td {
border: 1px solid black;
}
table {
width: 360px;
border-collapse: collapse;
display: inline-table;
vertical-align: top;
}
</style>
</head>
<body>
前面内容
<table style="">
<tr><td>Java</td><td>Ajax</td></tr>
<tr><td>XML</td><td>Android</td></tr>
</table>
后面的内容
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>表格相关的盒模型</title>
<style type="text/css">
div>div {
display: table-row;
padding: 10px;
}
div>div>div {
display: table-cell;
border: 1px solid black;
}
</style>
</head>
<body>
<div style="display: table; width: 400px;">
<div style="display: table-caption;">测试文字</div>
<div>
<div>测试文字1</div>
<div>测试文字2</div>
</div>
<div>
<div>测试文字11</div>
<div>测试文字12</div>
</div>
</div>
</body>
</html>
list-item盒模型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>list-item</title>
<style type="text/css">
div {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>
</head>
<body>
<div>测试文字1</div>
<div>测试文字2</div>
<div>测试文字3</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>多级列表</title>
<style type="text/css">
body>div {
display: list-item;
list-style-type: disc;
margin-left: 20px;
}
div>div{
display: list-item;
list-style-type: square;
margin: 40px;
}
</style>
</head>
<body>
<div id="div1">
测试文字A:
<div>测试文字1</div>
<div>测试文字2</div>
<div>测试文字3</div>
</div>
<div id="div2">
测试文字B:
<div>测试文字1</div>
<div>测试文字2</div>
<div>测试文字3</div>
</div>
</body>
</html>
run-in 盒模型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>run-in</title>
<style type="text/css">
span {
border: 2px solid gray;
width: 200px;
height: 40px;
margin: 8px;
}
div {
border: 2px solid black;
width: 400px;
height: 60px;
}
</style>
</head>
<body>
<span style="display: run-in;">display:run-in</span>
<div>block的div</div>
<span style="display:run-in;">display:run-in</span>
<div style="display:inline-block;">inline-block的div</div>
</body>
</html>
box-shadow对合模型添加阴影
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>box-shadow属性</title>
<style type="text/css">
div {
width: 300px;
height: 50px;
border: 1px solid black;
margin: 30px;
}
</style>
</head>
<body>
<div style="box-shadow:-10px -8px 6px #444;">
box-shadow:-10px -8px 6px #444;(左上阴影)</div>
<div style="box-shadow: 10px -8px 6px #444;">
box-shadow: 10px -8px 6px #444;(右上阴影)</div>
<div style="box-shadow: -10px 8px 6px #444;">
box-shadow: -10px 8px 6px #444;(左下阴影)</div>
<div style="box-shadow: 10px 8px 6px #444;">
box-shadow: 10px 8px 6px #444;(右下阴影)</div>
<div style="box-shadow: 10px 8px #444;">
box-shadow: 10px 8px #444;(右下阴影，不指定模糊程度)</div>
<div style="box-shadow: 10px 8px 20px #444">
box-shadow: 10px 8px 20px #444;(右下阴影，增大模糊程度)</div>
<div style="box-shadow: 10px 8px 10px -10px red;">
box-shadow: 10px 8px 10px -10px red;(右下阴影，缩小阴影区域)</div>
<div style="box-shadow: 10px 8px 20px 15px red;">
box-shadow: 10px 8px 10px -10px red;(右下阴影，缩小阴影区域)</div>
</body>
</html>
对表格及单元格添加阴影
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>box-shadow属性</title>
<style type="text/css">
table {
width: 500px;
border-spacing: 10px;
box-shadow: 10px 10px 6px #444;
}
td {
box-shadow: 6px 6px 4px #444;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>测试文字10</td>
<td>测试文字20</td>
</tr>
<tr>
<td>测试文字11</td>
<td>测试文字22</td>
</tr>
</table>
</body>
</html>
column-count属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>分栏布局</title>
<style type="text/css">
div#content{
column-count: 2;
-moz-column-count: 2;
-o-column-count: 2;
-webkit-column-count: 2;
}
</style>
</head>
<body>
<div id="content">
<h2>测试文字</h2>
这不是一份“X天精通Java EE开发”心灵鸡汤，这是一本令人望而生畏的Java Web开发的“砖头书”。
全面、深入介绍Spring MVC、Spring、MyBatis三大框架整合开发的图书，不仅有三大框架的最佳实践，
而且对Spring MVC、MyBatis框架的源代码 <br>
覆盖Java稳定的大版本Java11，李刚作品成为近百万海峡两岸读者之选，本书赠送1700分钟视频、
源代码、电子书、课件、面试题，提供微信+QQ答疑群 书名：疯狂Java讲义（第5版） 出版
</div>
</body>
</html>
box实现多栏布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>盒模型实现多栏布局</title>
<style type="text/css">
body {
margin: 0px;
}
div#container {
display: box;
display: -moz-box;
display: -webkit-box;
width: 960px;
text-align: left;
}
#container>div {
border: 1px solid #aaf;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
background-color: #ffc;
padding: 5px;
}
</style>
</head>
<body>
<div style="margin: auto; text-align: center;">
<div id="container">
<div style="width: 220px;">
测试文字
</div>
<div style="width: 500px;">
测试文字
</div>
<div style="width: 240px;">
测试文字
</div>
</div>
</div>
</body>
</html>
box-orient实现垂直布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>垂直排列</title>
<style type="text/css">
div#container {
border: 1px solid black;
padding: 5px;
width: 600px;
height: 300px;
display: box;
display: -moz-box;
display: -webkit-box;
box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
div>div{
border: 1px solid #aaf;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div>栏目1</div>
<div>栏目2</div>
<div>栏目3</div>
</div>
</body>
</html>
box-orient实现水平布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>水平排列</title>
<style type="text/css">
div#container {
border: 1px solid black;
padding: 5px;
width: 600px;
height: 300px;
display: box;
display: -moz-box;
display: -webkit-box;
box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}
div>div{
border: 1px solid #aaf;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div style="box-ordinal-group: 2; -moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;">栏目1</div>
<div style="box-ordinal-group: 2; -moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;">栏目2</div>
<div style="box-ordinal-group: 2; -moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;">栏目3</div>
</div>
</body>
</html>
box-flex 自动伸缩
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title> 水平排列 </title>
<style type="text/css">
div#container {
border: 1px solid black;
padding: 5px;
width: 600px;
height: 140px;
display: box;
display: -moz-box;
display: -webkit-box;
box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}
div>div{
border: 1px solid #aaf;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div style="box-flex: 1; -moz-box-flex: 1; -webkit-box-flex: 1;">栏目1</div>
<div>栏目2</div>
<div style="box-flex: 3; -moz-box-flex: 3; -webkit-box-flex: 3;">栏目3</div>
</div>
</body>
</html>
|