一、文档流
文档流（normal flow）
网页是一个多层结构，CSS可以给每一层设置样式，最终我们看到的是最上面的一层
文档流是网页最底下的那一层
元素分为两种状态：
1、在文档流中
2、脱离文档流
之前将元素分为三类，块元素、行内元素、行内块元素，分别具有一些特点，
这些特点都是元素在文档流中的特点：
块元素：不会独占一行，宽是父元素内容区宽度，高被内容撑开
行内元素：不会独占一行，宽高被内容撑开，不能自定义宽高
行内块：兼具块元素、行内元素的特点
注意：
1、一旦脱离文档流，以上的分类，以上分类的特点都不复存在
2、我们创建的元素默认是在文档流中
二、盒子模型
布局相关样式：
文档流默认的布局，浮动，定位，弹性盒子等
盒模型、盒子模型、框模型（box model）
网页中也有很多元素，将各种元素摆放在合适的位置，盒模型将页面所有元素的形状都统一了，
你在布局时只需要考虑元素的大小即可
盒模型： 快递
内容区 content 冰箱
内边距 padding 泡沫
边框 border 快递盒子
外边距 margin 快递离你的距离
盒子的大小：内容区、内边距、边框 有关系，跟外边距没有关系
内容区content
width：内容区的宽
height：内容区的高
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
三、盒子模型的边框
边框（border）边框用来隔开盒子内部和盒子外部
设置边框，三个要素缺一不可，边框的宽度，边框的颜色，边框的样式
边框的宽度 border-width
1、可以设置多个值,空格隔开即可，
4个值 上 右 下 左（顺时针）
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右
2、单独设置某一边的宽度
border-top-width
border-bottom-width
border-left-width
border-right-width
3、border-width有默认值，默认在1-3px
边框的颜色 border-color
1、可以设置多个值
规则跟border-width一样
2、可以单独设置某一边的颜色
border-xxx-color
xxx：top、bottom、left、right
transparent：透明色
3、小箭头的写法：
border-color：transparent transparent transparent orange；
4、border-color有默认值，默认为黑色
边框的样式 border-style
1、边框样式的种类
solid 实线
dotted 点状的虚线
dashed 虚线
double 双线
2、可以写多个样式
规则和border-width一样
3、可以单独设置某一边样式
规则和border-width一样
4、没有默认值
边框border简写：
1、语法：border：大小 颜色 样式；
三要素顺序无所谓
2、单独设置某一边的边框
border-top：大小 颜色 样式
border-bottom
border-left
3、border：none；不要某一边框
border-right：none
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
border-width: 10px 20px 30px 40px;
border-top-width: 20px;
border-color: green;
border-style: solid dotted double dashed;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
扫一扫
981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
