布局
文档流简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局-文档流</title>
<style>
/* 块元素 在页面中独占一行
默认宽度：是父元素的全部
默认宽度：根据内容成长
*/
.box1{
width: 100px;
background-color: yellow;
}
.box2{
width: 100px;
background-color: red;
}
/* 行内元素 不会独占一行，只占自己的大小
行内元素在水平上自左向右，一行不够，自动换行
默认宽度和高度都是被内容撑开
*/
span{
background-color: #bfa;
}
</style>
</head>
<body>
<!-- 文档流 网页是一个多层结构
通过css可以分别为每一层设置样式
作为用户来讲只能看见最顶上的一层
我们创建的元素默认都在文档流中进行排序
状态 在文档流中
不在文档流中（脱离文档流）
-->
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<span>我是span 1</span>
<span>我是span2</span>
<span>我是span 1</span>
<span>我是span2</span>
<span>我是span 1</span>
<span>我是span2</span>
<span>我是span 1</span>
<span>我是span2</span>
<span>我是span 1</span>
<span>我是span2</span>
</body>
</html>
盒子模型由以下几个部分组成
内容区（content）：存放内容
内边距（padding）：内容与边框的距离
边框（border）：盒子的边界
外边距（margin）：盒子与盒子之间的位置
以下是边框的样式设置
border：宽度、样式、颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style>
.box1{
/* 内容区（content）：元素中的所有子元素和文本内容的设置都是在内容区排列
包含：width: 内容去宽度
height：内容区的高度*/
width: 200px;
height: 200px;
background-color: #bfa;
}
/* 边框（border）：属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
设置边框：需要设置三种样式
边框的宽度：border-width
边框的颜色：border-color
边框的样式：border-style
*/
.box2{
width: 200px;
height: 200px;
background-color: aqua;
border-wi
版权声明：本文为await_9原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。