一、文档流
<!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>Document</title>
</head>
<body>
<!--
文档流（normal flow）
网页是一个多层的结构，css可以给每一层设置样式，
最终我们看到的是最上面的一层。
文档流是网页最底下的那一层
元素分为两种祖状态：在文档流中，脱离文档流
之前将元素分为三类，块元素、行内元素、行内块元素
分别具有一些特点，这些特点都是元素在文档流中的特点
块元素：
不会独占一行，宽是父元素内容区宽度，高是被内容撑开
行内元素：
不会独占一行，宽高是被内容撑开，不可以自定义宽高
行内块：
兼具块元素，行内元素的特点
注意
1.一旦元素脱离文档流，以上的分类，以上分类的特点都不复存在
2.我们创建的元素默认是在文档流
-->
</body>
</html>
二、盒子模型
<!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>Document</title>
<style>
/* 布局相关样式
文档流默认的布局，浮动，定位，弹性盒子等*/
/* 盒模型、盒子模型、框模型(box model) */
/*
网页也有很多的元素，将元素摆放在合适的位置，
盒模型将页面所有元素的形状都统一了，你在布局时，
只需要考虑元素的大小即可
*/
/* 盒模型 快递
内容区 content 冰箱
内边距 border 泡沫
边框 padding 快递盒子
外边距 margin 快递离你的距离
盒子的大小：内容区、内边距、边框 有关系，跟外边距是没有关系
*/
.box1{
width: 100px;
height: 100px;
background-color: red;
}
/*
1.内容区 content：
width:;内容区的宽
height:;内容区的高 */
</style>
</head>
<body>
<div class="box1">
于到畴骂兮不讨二这。
</div>
</body>
</html>
三、盒子模型-边框
<!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>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
border-width: 10px;
/* border-color: green blue black orange; */
/* border-color: transparent transparent orange transparent ; */
/* border-color: green;
border-style: solid; */
border:green 10px solid;
/* border-top: 10px solid green;
border-right:10px solid green ;
border-bottom:10px solid green ;
border-left: 10px solid green; */
border-bottom: none;
}
</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.单独设置某一边的颜色
3.小箭头的写法
border-color: transparent transparent orange transparent ;
4.border-color 有默认值，默认值是黑色
边框的样式 border-style
1.边框样式的种类
solid 实线
dotted 点状的虚线
dashed 虚线
double 双线
2.可以写多个样式
规则跟border-width是一样
3.单独设置某一边样式
border-XXX-style:;
XXX:top、right、bottom、left
4.border-style 默认值是none
-->
<!-- 边框 border
1.语法： border:大小 颜色 样式：
三要素顺序无所谓
2.单独设置某一边的边框
border-top
border-right
border-bottom
border-left
3.border-bottom: none; 不要某边边框
-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--
1:border-width 默认值一般是3px
使用border-width可以分别指定四个边框的宽度
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
2:border-color 设置边框的颜色 默认值是黑色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
3:border-style
* 设置边框的样式
* 可选值：
* none，默认值，没有边框
* solid 实线
double 双线
dashed [dæʃt] 虚线
* dotted ['dɔtid] 点状边框
* style也可以分别指定四个边的边框样式，规则和width一致，
* 同时它也提供border-xxx-style四个样式，来分别设置四个边
* border
* - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
* - 而且没有任何的顺序要求
* - border一指定就是同时指定四个边不能分别指定
*
* border-top border-right border-bottom border-left
* 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
-->
四、盒子模型-内边距
<!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>Document</title>
<style>
/* 内边距 padding 是边框和内容之间的距离
1.可以单独设置某一边的内边距
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.内边距padding简写
可以写多个值，规则跟border-width是一样
*/
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px green solid;
/* padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px; */
padding: 10px 20px 30px;
}
/* 创建一个子元素box2占满box1，box2把box1内容区撑满 */
.box2{
width: 100%;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<!-- <ul>
<li>11</li>
<li>11</li>
<li>11</li>
</ul> -->
</body>
</html>
五、外边距
<!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>Document</title>
<!-- 外边距 margin
不影响盒子的大小，可以改变盒子的位置
margin-top 设置元素上方外边距，如果正值，元素向下移动，如果负值，元素向上移动
margin-right 设置元素右外边距，元素是没有效果的
margin-botoom 设置元素的下外边距，正值，元素自己不动，会挤下面的元素向下移动，负值，下面的元素向上移动
margin-left 设置元素左外边距，正值，元素向右移动，负值，元素向左移动
margin简写
margin 可以设置多个值，规则跟padding一样-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/* margin-top: -50px; */
/* margin-left: 50px; */
/* margin-bottom: 50px; */
/* margin-right: 500px; */
margin: 10px 20px 30px 40px;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
六、水平布局
<!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>Document</title>
<style>
.outer{
width: 500px;
height: 200px;
border: 10px red solid;
}
/* 什么是过度约束，浏览器是如何 */
/* 水平方向能影响到inner所占位置的因素有哪些
margin-left border-left padding-left width padding-right border-right margin-right
过度约束：
浏览器规定，元素水平方向7个值相加必须要等于其父元素内容区的宽度
如果不等于，浏览器就会进行调整，让等式成立
margin-left+border-left+padding-left + width + padding-right + border-right+ margin-right=父元素内容区的宽度
40+20+0+100+0+20+0=600
180 ！= 600
浏览器如何调整
1.如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值
40+20+0+100+0+20+ 420 =600
2.7个值当中，有三个值可以设置auto，margin-left width margin-right
（1）设置1个auto 谁是auto，浏览器就调整谁
margin-left
auto+20+0+100+0+20++0=600 auto=460
width
40+20+0+auto+0+20+0=600 auto=520
margin-right
（2）设置2个auto
margin-left width 调整width
width margin-right 调整width
margin-left margin-right 同时调整margin-left margin-right
（3）设置3个auto
margin-left width margin-right 调整的就是width
总结：
1.如果7个值当中有auto，调整的顺序
width>margin-left margin-right
2.如果想让块元素水平方向居中，必须要width为固定值，左右外边距为auto
*/
.inner{
width: 100px;
height: 100px;
background-color: #bfa;
border: 20px solid green;
/* margin-left:auto ;
margin-right:auto; */
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
