文章目录
一、盒子的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: aquamarine;
border: 10px red solid;
padding: 10px;
box-sizing: content-box;
}
.box2{
width: 100px;
height: 100px;
background-color: aquamarine;
border: 10px red solid;
padding: 10px;
margin-top: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
结果：
二、轮廓的阴影和圆角
1.轮廓
outline：用来设置元素的轮廓线，用法和border一样。
但轮廓与边框不同的地方是：轮廓不会影响可见框的大小。（框下有文字，会重叠不会下移）
<style>
.box1{
width: 200px;
height: 200px;
background-color: aquamarine;
outline: 10px red solid;
}
</style>
</head>
<body>
<div class="box1"></div>
<span>hello</span>
</body>
结果：
2.阴影
box-shadow是用来设置元素的阴影效果，也不会影响页面布局。
第一个值：水平偏移量，正值向右移动
第二个值：垂直偏移量，正值向下移动
第三个值：阴影的模糊半径
第四个值：阴影的颜色
box-shadow: 10px 10px 10px yellowgreen;
结果：
3.圆角
border-radius用来设置圆角，指定圆的半径大小。
border-radius: 30px;
结果：
border-top-left-radius: 60px;
border-top-right-radius: 100px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px 80px;
结果：
border-radius: 10px 40px 80px;
结果：
-
border-radius
- 四个值 左上 右上 左下 右下
- 三个值 左上 右上/左下 右下
- 两个值 左上/右下 右上/左下
border-radius: 10px/50px;
结果：
三、浮动
浮动可以使一个元素向其父元素的左侧或右侧移动
-
float
- none 默认值，元素不浮动
- left 元素向左浮动
- right 元素向右浮动
元素浮动以后会从文档流中脱离，不在占用文档流中的位置，所以元组下面还在文档流中的元素会向上移动。
浮动的特点：
- 浮动元素完全脱离文档流，不在占据文档流中的位置。
- 设置浮动后元素会向父元素的左侧或右侧移动。
- 浮动元素默认不会从父元素中移出
- 浮动元素左或右移动时，不会超过他们前面的浮动元素
- 如果浮动元素的前面是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过它上面的浮动的兄弟元素，最多最多就是跟他一样高
- 主要作用就是让页面中的元素水平排列
注：浮动元素不会覆盖文字。
脱离文档流后元素特点：
- 块元素不在独占一行
- 块元素的宽度和高度都被文字撑开
- 行内元素脱离文档流后，特点和块元素一样
- 脱离文档流之后，不再区分行内元素和块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: aquamarine;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span>
唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。
问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。
东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。
万里赴戎机，关山度若飞。朔气传金柝，寒光照铁衣。将军百战死，壮士十年归。
归来见天子，天子坐明堂。策勋十二转，赏赐百千强。可汗问所欲，木兰不用尚书郎，愿驰千里足，送儿还故乡。
爷娘闻女来，出郭相扶将；阿姊闻妹来，当户理红妆；小弟闻姊来，磨刀霍霍向猪羊。开我东阁门，坐我西阁床，脱我战时袍，著我旧时裳。当窗理云鬓，对镜帖花黄。出门看火伴，火伴皆惊忙：同行十二年，不知木兰是女郎。
雄兔脚扑朔，雌兔眼迷离；双兔傍地走，安能辨我是雄雌？
</span>
</body>
</html>
结果：
四、导航条练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navigation</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.nav{
width: 1210px;
height: 48px;
background-color: #E8E7E3;
margin: 20px auto;
}
li{
float: left;
line-height: 48px;
}
li a{
/* 把a设为块元素，这样点在文字的外面超链接也生效 */
display: block;
font-size: 18px;
text-decoration: none;
color: #777;
padding: 0 39px;
}
.nav li:last-child a{
padding: 0 42px 0 41px;
}
a:hover{
background-color: #3f3f3f;
color: #E8E7E3;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</body>
</html>
结果：
