HTML5+CSS3+JavaScript从入门到精通-10
原创HTML5+CSS3+JavaScript从入门到精通-10
原创
qiqi_fu
发布于 2021-12-03 15:55:22
发布于 2021-12-03 15:55:22
HTML5+CSS3+JavaScript从入门到精通
作者：王征，李晓波
第十章 CSS盒子模型和布局
案例
10-01 content内容
<!DOCTYPE html>
<!--web10-01-->
<!--
content(内容):width, height, overflow
padding(内边距):内容和边框直接的空间，可被看做是内容content的背景区域。（padding-top, padding-bottom, padding-left, padding-right, padding）
border(边框): border-width, border-style, border-color, border
margin(外边距):margin-top, margin-bottom, margin-left, margin-right, margin. 值可以为负数
-->
<html">
<head>
<meta charset="utf-8" />
<title>content内容</title>
<style type="text/css">
#main {
border: 10px groove red;
padding: 15px;
display: inline-block;
margin-top: 30px;
margin-left: 50px;
}
.div1 {
width: 300px;
height: 100px;
padding: 10px;
border: 5px solid green;
overflow: auto;
font-size: 15px;
text-indent: 30px;
}
.div2 {
width: 300px;
height: 150px;
border: 5px solid blue;
overflow: auto;
font-size: 15px;
text-indent: 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">
爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。
</div>
<hr />
<div class="div2">
爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。
</div>
</div>
</body>
</html>
10-02 固定定位
<!DOCTYPE html>
<!--web10-02-->
<html">
<head>
<meta charset="utf-8" />
<title>固定定位</title>
<style type="text/css">
#a {
width: 200px;
height: 150px;
background-color: pink;
padding: 15px;
color: blue;
border: 10px double red;
}
#b {
width: 60px;
height: 40px;
position: fixed;/*固定定位，只需指定两个属性值，一般top和left即可。不会随滚动条的拖动而改变位置*/
top: 30px;
left: 400px;
background-color: yellow;
border: 10px groove red;
overflow: auto;
}
</style>
</head>
<body>
<div id="a">没有固定定位的div元素。</div>
<div id="b">固定定位的div元素</div>
</body>
</html>
10-03 相对定位
<!DOCTYPE html>
<!--web10-03-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>相对定位</title>
<style type="text/css">
#mya {
width: 500px;
height: 300px;
border: 5px green dotted;
background-color: yellow;
margin-top: 30px;
margin-left: 50px;
padding: 10px;
}
#mya div {
width: 300px;
height: 80px;
background-color: pink;
border: 3px solid red;
margin: 5px;
}
#s{
position: relative;
top: 20px;
left: 30px;
}/*test时，先把这个#s注释，看到画面后，再uncommon后测试*/
</style>
</head>
<body>
<div id="mya">
<div id="a1">第一个无定位的div元素！</div>
<div id="s">相对定位的div元素！</div>
<div id="a2">第二个无定位的div元素！</div><!--它的定位，只会根据div普通的计算，并不会看上面固定的s位置来计算-->
</div>
</body>
</html>
10-04 绝对定位
<!DOCTYPE html>
<!--web10-04-->
<!--
绝对定位的元素，就是完全脱离正常文档流了，就是它前面或者后面的元素会认为这个元素并不存在，即它浮于其他元素上面，是独立出来的。
-->
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位</title>
<style type="text/css">
#mya {
border: 5px green dotted;
background-color: yellow;
padding: 10px;
}
#mya div {/*两者之间没有逗号，这是关联选择器，意思是mya下面的div应用于这个样式。有逗号的是组合选择器。*/
background-color: rgb(100,250,100);
border: 8px inset red;
margin: 10px;/*外层的padding和里层的margin加起来，才是两个盒子之间真正的实际距离*/
}
#s {
position: absolute;/*另外，static的值则为默认属性，就是不定义position时的默认属性。*/
top: 10px;/*这个相对位置，是针对它上一级的盒子，就是mya的top而言*/
left: 250px;
}
</style>
</head>
<body>
<div id="mya">
<div id="a1">第一个div元素!</div>
<div id="s">第二个div元素！</div>
<div id="a2">第三个div元素!</div>
</div>
</body>
</html>
10-05 CSS浮动布局
<!DOCTYPE html>
<!--web10-05-->
<html>
<head>
<meta charset="utf-8" />
<title>CSS浮动布局</title>
<style type="text/css">
#mya {
border: 5px green dotted;
background-color: yellow;
padding: 10px;
}
#mya div {
background-color: rgb(200,200,100);
border: 8px inset red;
margin: 10px;
}
p {
font-size: 15px;
text-indent: 30px;
color: red;
}
/*a1\a2\a3的浮动属性，请先注释后，再分别测试
变成浮动元素后，a1、a2、a3的宽度不再延伸，也就显示在一行;
只有相邻两个元素都是浮动元素，margin属性才会生效;
*/
#a1 {
float: left;
}
#a2 {
float: left;/*试试 right */
}
/* #a3 {
float: left;
}*/
</style>
</head>
<body>
<div id="mya">
<div id="a1">第一个div元素!</div>
<div id="a2">第二个div元素!</div>
<div id="a3">第三个div元素!</div>
<p>元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。</p>
</div>
</body>
</html>
10-06 清除浮动属性
<!DOCTYPE html>
<!--web10-06-->
<!--
由于p元素清除了浮动，所以p元素的前一个元素产生的浮动，就不会对后续元素产生影响，因此，p元素的文本不会环绕在浮动元素的周围。
-->
<html>
<head>
<meta charset="utf-8" />
<title>清除浮动属性</title>
<style type="text/css">
#mya {
border: 5px green dotted;
background-color: yellow;
padding: 10px;
}
#mya div {
background-color: rgb(200,200,100);
border: 8px red inset;
margin: 10px;
}
p {
font-size: 15px;
text-indent: 30px;
color: red;
}
#a1 {
float: left;
}
#a2 {
float: right;
}
#a3 {
float: left;
}
/*可以对比p的样式注释前后，做对比*/
p {
clear: both;
}
</style>
</head>
<body>
<div id="mya">
<div id="a1">第一个div元素!</div>
<div id="a2">第二个div元素!</div>
<div id="a3">第三个div元素!</div>
<p>元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。元日；爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。</p>
</div>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读