- HTML 5_CSS 3_JavaScript讲义（八）- 大小
- HTML 5_CSS 3_JavaScript讲义（三）-HTM
- HTML 5_CSS 3_JavaScript讲义（四）-HTM
- HTML 5_CSS 3_JavaScript讲义（十二）- D
- HTML 5_CSS 3_JavaScript讲义（六）- 字体
- HTML 5_CSS 3_JavaScript讲义（七）-背景，
- HTML 5_CSS 3_JavaScript讲义（九） - 盒
- HTML 5_CSS 3_JavaScript讲义（二）-HTM
- HTML 5_CSS 3_JavaScript讲义（十一）- 变
- HTML 5_CSS 3_JavaScript讲义（十）- 表格
（1）.大小相关属性
heigth max-height min-height
width max-width min-width
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>大小相关属性测试</title>
</head>
<body>
<!-- 下面使用内联的CSS样式控制大小，
为了得到更好的显示效果，并设置了背景色 -->
<div style="width:200px;height:40px;background-color:#ddd">
Java学习
</div>
</body>
</html>
image.png
1.box-sizing属性
- content-box 设置width,height控制内容区宽度和高度
- padding-box 设置width,height控制内容区和内边距宽度和高度
- border-box 设置width,height控制内容区，内边距和外边框宽度和高度
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>box-sizing属性</title>
</head>
<body>
<div style="width: 200px;height:100px;background-color:#ddd;
background-clip: content-box;
border: 20px solid #555;
padding: 20px;
box-sizing: content-box;
-moz-box-sizing: content-box;">
box-sizing: content-box;
</div>
<div style="width: 200px;height:100px;background-color:#ddd;
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:#ddd;
background-clip: content-box;
border: 20px solid #555;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;">
box-sizing: border-box;
</div>
</body>
</html>
image.png
2.resize属性
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<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:#eee;
resize: horizontal;
overflow: auto;
border: 2px solid #555;">
resize: horizontal;——指定只可在横向上调整大小。
</div>
<div style="width: 200px;height:100px;background-color:#eee;
resize: vertical;
overflow: auto;
border: 2px solid #555;">
resize: vertical;——指定只可在纵向上调整大小。
</div>
</body>
</html>
image.png
（2）.定位相关的属性
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>位置相关属性测试</title>
</head>
<body>
Struts<br />
Hibernate<br />
Spring<br />
jBPM<br />
<!-- 下面的<div.../>元素定位时使用了absolute值，因此不会受上面文本的影响
它将直接基于页面定位-->
<div id="Layer1" style="position:absolute;
left:40px; top:20px; width:180px; height:88px;
z-index:2; background-color: #ccc;">
Layer1,使用positon属性值为absolute,该Layer将完全漂浮在页面之上，
不受其他对象位置影响。z-index:2
</div>
<!-- 下面的<div.../>元素定位时使用了relative值，因此它将基于上面
最后一行文本进行定位 -->
<div id="Layer2" style="position:relative;
left:50px; top:10px; width:200px; height:88px;
z-index:3; background-color: #999;">
Layer2,使用positon属性值为relative,该Layer将漂浮在页面之上，
但它将基于上面最后一行文本进行定位。z-index:3
</div>
<div style="position:absolute; left:260px; top:80px; width:250px;
height:200px; border:black solid 1px">
<!-- 下面的Layer3和Layer4两个<div.../>
虽然设置了top一个为40px，另一个为80px。
但不会有任何作用,因为其position为static -->
<div id="Layer3" style="position:static; left:100px; top:40px;
width:80px; height:88px; z-index:1; background-color: #666;">
position:static
</div>
<div id="Layer4" style="position:static; left:100px; top:80px;
width:80px; height:88px; z-index:1; background-color: #999;">
position:static
</div>
</div>
</body>
</html>
image.png
（3）轮廓相关属性
outline
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>轮廓相关属性测试</title>
<style type="text/css">
body {
font-size: 24pt;
}
/* 设置div元素的宽度和高度 */
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) ridge 10px;outline-offset:10px;
<div style="outline: rgba(50,50,50,0.5) ridge 10px;
outline-offset:10px;">
宽度为10、偏移距也为10的灰色虚线轮廓
</div>
</body>
</html>
image.png
网友评论