|
大小相关属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;"/>
<title>大小相关属性</title>
</head>
<body>
<div style="width: 200px; height:40px; background-color: cadetblue;">
大小相关的属性
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;"/>
<title>大小相关属性</title>
</head>
<body>
<div style="width: 200px; height: 40px; background-color: #ddd;
background-clip: content-box;">
测试文字
</div>
<div style="width:200px; height:40px; background-color:#ddd;
background-clip: content-box;
border:30px solid #555;
padding:30px;">
测试文字
</div>
</body>
</html>
box-sizing
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>box-sizing 属性</title>
</head>
<body>
<div style="width: 200px; height: 100px; background-color: cadetblue;
background-clip: content-box;
border: 2px solid black;
padding: 20px;
box-sizing: content-box;
-moz-box-sizing: content-box;">
box-sizing: content-box;
</div>
<div style="width: 200px; height: 100px; background-color: aqua;
background-clip: content-box;
border: 20px solid #555;
padding: 20px;
box-sizing: padding-box;
-moz-box-sizing: padding-box;">
box-sizing: padding-box;
</div>
<div style="width: 200px; height: 100px; background-color: aquamarine;
background-clip: content-box;
border: 20px solid black;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;">
box-sizing: border-box;
</div>
</body>
</html>
CSS3新增resize属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>resize 属性</title>
</head>
<body>
<div style="width: 200px; height: 100px; background-color: #eee;
resize: both;
overflow: auto;
border: 2px solid #555;">
resize: both;--指定可以在两个方向上调整大小。
</div>
<div style="width: 200px; height: 100px; background-color: red;
resize: horizontal;
overflow: auto;
border: 2px solid #555">
resize: horizontal;--指定只能在横向上调整大小。
</div>
<div style="width: 200px; height: 100px; background-color: blue;
resize: vertical;
overflow: auto;
border: 2px solid black;">
resize: vertical;--指定只能在纵向上调整大小。
</div>
</body>
</html>
定位相关属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<title>位置相关属性测试</title>
</head>
<body>
C/C++<br/>
Java <br>
Python <br>
Go <br>
Lua <br>
<div id="Layer1" style="position: absolute;
left: 40px; top: 20px; width: 180px; height: 80px;
z-index: 2; background-color: #ccc;">
Layer1, 设置position属性为absolute，该Layter将完全浮漂在页面之上，
不受其他对象位置的影响。z-index:2;
</div>
<div id="Layer2" style="position: relative;
left: 50px; top: 10px; width: 200px; height: 80px;
z-index: 3; background-color: #999;">
Layer2, 使用postion属性为relative，该Layer将浮漂在页面之上，
但他将基于上面最后一行文本进行定位。 z-index: 3;
</div>
<div style="position: absolute; left: 260px; top: 80px; width: 250px;
height: 200px; border: black solid 1px;">
<div id="Layer3" style="position: static; left: 100px; top: 40px;
width: 80px; height: 88px; z-index: 1; background-color: red;">
position: static;
</div>
<div id="Layer4" style="position: static; left: 100px; top: 80px;
width: 80px; height: 88px; z-index: 1; background-color: blue;">
position: static;
</div>
</div>
</body>
</html>
轮廓相关属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;"/>
<title>轮廓先关属性测试</title>
<style type="text/css">
body{
font-size: 24pt;
}
div {
font-size: 12pt;
width: 400px;
height: 60px;
border: 1px solid black;
}
</style>
</head>
<body>
outline: rgba(50, 50, 50, 0.5) solid 10px
<div style="outline: rgba(50, 50, 50, 0.5) solid 10px;">
宽度为10的灰色实线轮廓
</div>
outline: rgba(50, 50, 50, 0.5) groove 16px;
<div style="outline: rgba(50, 50, 50, 0.5) groove 16px;">
宽度为16的灰色凹槽轮廓
</div>
outline: rgba(50, 50, 50, 0.5) ridge 16px;
<div style="outline: rgba(50, 50, 50, 0.5) ridge 16px;">
宽度为16的灰色凸槽轮廓
</div>
outline: rgba(50, 50, 50, 0.5) dashed 10px; outline-offset: 10px;
<div style="outline: rgba(50, 50, 50, 0.5) dashed 10px;
outline-offset: 10px;">
宽度为10、偏移距也为10的灰色虚线轮廓
</div>
</body>
</html>
|