Web前端开发——CSS布局与定位之盒子模型（Ⅰ）
1. 盒子模型
1.1 盒子概念
页面当中所有元素都可以看成一个盒子，每个盒子都占据着定的页面空间。它可以指的是页面上的个区域，或者是图片，导航栏、列表、表格等等段落
1.2 盒子组成
盒子模型首先要有内容 ，也就是盒子里面装着的东西，这个内容我们用content来表示 ；
内容占有一定的页面空间，我们通常用height它的高度 ，还有width他的宽度来表示，比如说当前的盒子里面带有一副图片 ，那么这个图片我们就可以通过height和width属性来进行它的高度和宽度的一个设定 ；
盒子必定有边界，这个边界线有粗有细，我们可以通过border来设定它的大小，border的大小也就是边界的外边框与内边框的距离，图片在盒子内部占据一定空间，它可以是并非完全的充满整个空间，因此这个图片到盒子内边框的距离称为是内边距，我们用padding来表示 ；；
盒子与盒子之间的距离我们称为外边距，即盒子外边框与外边框之间的距离，我们用margin来表示，当页面上有多个盒子的时候 ，我们可以通过两个盒子之间的外边距 ，来设定两个盒子之间的一个距离 。
1.3 盒子的实际高度、宽度
一个盒子模型它占据的页面空间大小也就是他的实际宽度和高度是由它的内容+内边距+边框+外边距共同组成的
1.4 测试代码
<html>
<head>
<style type="text/css">
#box{
width:100px;
height:100px;
border:1px solid;
padding:20px;
margin:10px;
}
</style>
</head>
<body>
<div id="box">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
这里同过id选择器设定盒子的样式，上下左右的属性值都相同
2. overflow属性
当内容溢出盒子框时，就需要使用到overflow属性
2.1 测试代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div
{
background-color:#00FFFF;
width:200px;
height:200px;
text-align: justify;
/*overflow: scroll;*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
3. border属性
3.1 基本内容
border可以通过子属性分开设置，也可以统一在一起设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 50px;
height:50px;
margin:5px;
}
.brd1{
border-width:2px;
border-style:solid;
border-color:red;
}
.brd2{
border:2px solid red;
}
.brd3{
border-bottom:1px solid red;
}
.line {
height:1px;
width:500px;
border-top:1px solid blue;
}
</style>
</head>
<body>
<div class="brd1"></div>
<div class="brd2"></div>
<div class="brd3"></div>
<div class="line"></div>
</body>
</html>
可以看到brd1和brd2都是相同的效果，brd3设置了底部边框，line设置了顶部边框，id样式覆盖掉了标签样式，因此顶部边框长度为500px
3.2 应用——水平分割线制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.line {
height:1px;
width:500px;
border-top:1px solid gray;
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>
相关知识
web前端开发爱尚鲜花.rar资源
从前端到后端——完整的Web开发指南
响应式婚礼网站：前端开发实战指南
快速上手web前端开发（超详细教程）
移动应用开发定位
【QT教程】QT6 Web开发入门 QT Web
html网页制作之细谈HTML前端项目开发过程中的细节及心得
学生HTML个人网页作业作品 使用HTML+CSS+JavaScript个人介绍博客网站 web前端课程设计 web前端课程设计代码 web课程设计 (3) (1)
CSS花边无衬线字体和有衬线字体
HTML+CSS+JavaScript美食博客网页制作教程：从零开始，超详细代码解析与完整示例，适合初学者！
网址: Web前端开发——CSS布局与定位之盒子模型（Ⅰ） https://m.huajiangbk.com/newsview949353.html
| 上一篇: vscode前端开发必备扩展 |
下一篇: 前端工程师的 2018 年总结 |
