一、盒子的尺寸
1. 默认情况下，盒子可见框大小由内容区、内边距和边框共同决定；
2. box-sizing 用来设置盒子尺寸的计算方式（即 width 和 height 的作用）
可选值有 content - box：宽高用来设置内容区大小；
border - box : 宽高用来设置整个盒子的可见框大小。
二、 盒子的轮廓和圆角
1. 轮廓： box - shadow : xpx xpx xpx rgba(x, x, x, x) ;
第一个值为水平偏移量；
第二个值为垂直偏移量；
第三个值为模糊半径；
第四个值为阴影颜色 。
2. outline：用法与border一样，但它不会影响可见框的大小。
3. 圆角：border - radius：x px ; （用来设置圆角的半径）
三、浮动的简介及特点
1. 通过浮动可使一个元素向其父元素的左侧或右侧移动；
2. 可选值 ：none 默认值
left / right
3. 设置浮动后，水平布局的等式不需要再成立；所以其下面文档流中的元素会上移；
4. 设置浮动后，会向父元素的左侧或右侧移动；
5. 浮动元素左右移动时，不会超过它前面的浮动元素；
6. 如果浮动元素前面是文档流中的块元素，它将不会上移；
7. 浮动元素不会超过上一个浮动元素，最多就是和它一样高；
8. 浮动元素不会盖住文字，以此可设置文字环绕效果；
9. 脱离文档流后，不用区分行内元素和块元素了，天下大同。
四、练习：制作简单的导航条
1. 超链接在一个块元素中时，要想点击块时也会跳转，应该将超链接文字display 为block
2. 将文字在父元素中水平垂直居中的办法：
text-align: center;
line-height：x px；（此处x为父元素高度）
3.代码：
<!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>导航条练习</title>
<link rel="stylesheet" href="C:\data\计算机学习\index3.html\02.CSS\reset.css.css">
<style>
.box1{
width: 166px;
background-color:#E8E7E3 ;
}
.box2{
width: 191px;
background-color:#E8E7E3 ;
}
.box3{
width: 175px;
background-color:#E8E7E3 ;
}
.box4{
width: 198px;
background-color:#E8E7E3 ;
}
.box5{
width: 113px;
background-color:#E8E7E3 ;
}
.box6{
width: 197px;
background-color:#E8E7E3 ;
}
.box7{
width: 170px;
background-color:#E8E7E3 ;
}
a{
font-size: 20px;
color: #888887;
/*把a设置为块元素是因为要将整个框弄成超链接*/
display: block;
}
div:hover{
background-color: #3F3F3F;
}
div{
/*将文字在父元素中水平垂直居中*/
line-height: 48px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<img src="C:\data\计算机学习\index3.html\02.CSS\图片\屏幕截图 2022-03-26 173359.png" alt="">
<div class="box1">
<a href="http:www.baidu.com">HTML/CSS
</a>
</div>
<div class="box2">
<a href="#">Browser Side</a>
</div>
<div class="box3">
<a href="#">Server Side</a>
</div>
<div class="box4">
<a href="#">Programming</a>
</div>
<div class="box5">
<a href="#">XML</a>
</div>
<div class="box6">
<a href="#">Web Building</a>
</div>
<div class="box7">
<a href="#">Referance</a>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通