CSS——文档流及盒子模型样式设置
发布时间
阅读量：
阅读量
目录
1、文档流
2、盒子模型
3、盒子边框
4、盒子内边距
5、外边距
6、默认样式
1、文档流
文档流（normal flow）
一个网页由多个层次构成，在设计时需要考虑整体布局，在CSS中通过层级结构实现不同元素的显示与隐藏，在最终页面中会展示出最上面定义的内容
文档流是网页最底层
我们创建的元素默认情况下，都在文档流中
元素分为两种状态：在文档流中，脱离文档流
元素在文档流中的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽高
行内块元素
1、可以设置宽高
2、而且不会独占一行
当元素脱离文档流时，在不再将块元素与行内元素区分开来的情况下，则失去了原有的属性。
脱离文档流的元素会更加类似行内块元素
2、盒子模型
安排页面布局元素的过程犹如考虑购买一张桌子，并需明确尺寸与形状之后才能合理地安置于家中。
所以我们把所有的元素都想成盒子，矩形 */
/* 盒模型、盒子模型、框模型（box model）*/
/*
内容区 content
内边距 padding
边框 border
外边距 margin
盒子模型的大小 跟内容区，内边距 边框有关系
跟外边距没有关系
*/
/* 1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列
width 设置内容区的宽度
height 设置内容区的高度
3、盒子边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*
2:边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式
大小 样式 颜色
*/
.box {
width: 100px;
height:100px;
background-color: rgb(222, 255, 170);
/* 设置边框的宽度 */
/* border-width: 1px; */
/* border-top-width:10px ; */
/* 设置边框的颜色 */
/* border-color: red transparent transparent transparent; */
/* border-color: red; */
/* border-top-color: red; */
/* 设置边框的样式 */
/* border-style:double; */
border: red 10px dashed ;
border-bottom: none;
/* border-top: 5px green solid;
border-right: 5px red solid ;
border-bottom: 5px yellow solid;
border-left: 5px blue solid; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--
42. 1:border-width 默认值一般是3px
使用border-width可以分别指定四个边框的宽度
可以跟多个值
4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右
50. 51. 除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
55. 2:border-color 设置边框的颜色 默认值是黑色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
59. 补充小箭头的写法
61. 3:border-style 设置边框的样式
* 可选值：
* none，默认值，没有边框
* solid 实线
double 双线
dashed [dæʃt] 虚线
* dotted ['dɔtid] 点状边框
* style也可以分别指定四个边的边框样式，规则和width一致，
* 同时它也提供border-xxx-style四个样式，来分别设置四个边
71. * border
* - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
* - 而且没有任何的顺序要求
* - border一指定就是同时指定四个边不能分别指定
* * border-top border-right border-bottom border-left
* 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
79. -->4、盒子内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px red solid;
/* padding-top:50px ;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px; */
padding:10px ;
}
/* * 创建一个子元素box2占满box1，box2把内容区撑满了
*/
.box2{
width: 100%;
height: 100%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<!--
/*
内边距（padding），指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：
padding-top
padding-right
padding-bottom
padding-left
来设置四个方向的内边距
46. 总结：
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定
*/
51. 52. /* * 使用padding可以同时设置四个边框的样式，规则和border-width一致
*/
-->5、外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
border: 10px solid orange;
padding: 50px;
/* margin-top: 50px;
margin-left: 50px;
margin-bottom: -50px;
margin-right: 500px; */
margin: 10px 20px 30px 50px;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
.s1 {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<span class="s1">低夭过</span>
<span>你看我动没动</span>
</body>
</html>
<!--
外边距指的是当前盒子与其他盒子之间的距离，
他不会影响可见框的大小，而是会影响到盒子的位置。
44. 盒子有四个方向的外边距：（边演示，边总结）
margin-top
上外边距，设置一个正值，元素会向下移动,设置一个负值，元素会向上移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距，设置一个正值，自己不动，其下边的元素会向下移动，挤别人
margin-left
左外边剧，设置一个正值，元素会向右移动,设置一个负值，元素会向左移动
由于页面中的元素都是靠左靠上摆放的，
所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置（挤别人）
58. 外边距也可以指定为一个负值，
如果外边距设置的是负值，则元素会向反方向移动
61. 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
规则和padding一样
64. 65. -->6、默认样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!-- 重置样式表，专门用来对浏览器的样式进行重置 -->
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./index.css" />
<style type="text/css">
/* 默认样式：
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
*/
/*
方式一：
1:清除浏览器的默认样式
方式二：
2:引入重置样式表 */
/* * {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
*/
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>全部评论 (0)
还没有任何评论哟~