一、什么是盒子模型
1、介绍
HTML文档中的每个元素都被比喻成矩形盒子， 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么
#外边距margin ===== 一个相框与另外一个相框之间的距离
#边框border ====== 边框指的就是相框
#内边距padding ===== 内容/相片与边框的距离
#宽度width/高度height ===== 指定可以存放内容/相片的区域
提示：可以通过谷歌开发者工具查看盒子的各部分属性
2、盒子模型举例
Title
/html { /
/ height: 100%;/
/}/
/body { /
/ height: 100%;/
/}/
/.box1 { /
/ width: 100%;/
/ height: 100%;/
/ background-color: red;/
/}/
.sp1 {
Width＜/span>: 200px;
Height＜/span>: 200px;
background-color: red;
/display: inline-block;/
display: none;
/visibility: hidden;/
}
.sp2 {
Width＜/span>: 200px;
Height＜/span>: 200px;
background-color: green;
display: inline-block;
}
p span {
color: red;
}
你好
你好
你好ayca
盒子模型
二、盒子模型的宽度和高度
1、介绍
#1、内容的宽度和高度
通过标签的width和height属性设置
#2、元素/盒子模型的宽度和高度
宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
高度= 。。。。
#3、元素/盒子模型空间的宽度和高度
宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距
高度= 。。。。
2、练习1：边框
Title
.box1 {
Width＜/span>: 200px;
Height＜/span>: 200px;
background: yellow;
/border: 1px dotted red;/
/border-width: 1px 2px 3px 4px;/
/border-style: solid dotted dashed double;/
/border-color: red green blue black;/
border: 1px dotted red;
/border-radius: 20px;/
border-radius: 50%;
text-align: center;
line-Height＜/span>: 200px;
}
1111
练习1
3、练习2：内边距
Title
{
padding: 0;
margin: 0;
}
div {
Width＜/span>: 150px;
Height＜/span>: 150px;
}
.box1 {
/height: 100px;/
box-sizing: border-box;
border: 1px solid red;
padding-top: 50px;
}
.box2 {
Width＜/span>: 100px;
border: 1px solid green;
padding-left: 50px;
}
.box3 {
border: 1px solid blue;
padding-right: 50px;
}
.box4 {
border: 1px solid yellow;
padding-bottom: 50px;
}
.box5 {
/width: 50px;/
/height: 50px;/
box-sizing: border-box;
border: 1px solid aqua;
padding: 50px;
}
.boxx {
Width＜/span>: 20px;
Height＜/span>: 20px;
background-color: red;
}
22222
333
4444
5555
内边框
4、练习3：外边距
Title
{
padding: 0;
margin: 0;
}
div {
Width＜/span>: 150px;
Height＜/span>: 150px;
}
.box1 {
border: 1px solid red;
/margin-top: 100px;/
/margin-left: 100px;/
margin-bottom: 70px;
padding-top: 30px;
padding-left: 30px;
box-sizing: border-box;
}
.box2 {
border: 1px solid green;
margin-top: 60px;
}
.box3 {
border: 1px solid blue;
display: inline-block;
margin-right: 50px;
}
.box4 {
border: 1px solid yellow;
display: inline-block;
margin-left: 50px;
}
.box5 {
border: 1px solid grey;
}
.boxx {
Width＜/span>: 20px;
Height＜/span>: 20px;
background-color: red;
/margin-top: 30px;/
/margin-left: 30px;/
}
22222
333
4444
5555
外边距
5、练习4：为何height=100%不起作用
如何让 height:100%起作用：你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做：
现在你给div的高度为100%，它有两个父元素和。为了让你的div的百分比高度能起作用，你必须设定和的高度。
这样这个div的高度就会100%了
练习4
三、css显示模式:块级、行内、行内块级
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
容器级标签：可以嵌套其他的所有标签
div、h、ulli、dl>dt+dd
文本级标签：只能嵌套文字、图片、超链接
span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
div、h、ul、ol、dl、li、dt、dd //代码效果参考：http://www.zidongmutanji.com/zsjx/533345.html
还有标签p行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
span、buis、strong、em、ins、del
#3、块级元素与行内元素的区别
1、块级元素block
独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
若没有设置宽高，那么就按照设置的来显示
2、行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
3、行内块级元素inline-block
不会独占一行
可以设置宽高
举例：
/块级元素/
div,p,h1 {
background-color: red;
Width＜/span>: 200px;
Height＜/span>: 100px;
}
/行内元素/
span,b,strong {
background-color: blue;
Width＜/span>: 200px;
Height＜/span>: 100px;
}
/行内块级元素/
img {
Width＜/span>: 100px;
Height＜/span>: 100px;
}
我是div
我是段落
我是标题
我是span
我是加粗
我是强调
举例
四、CSS显示模式转换
属性描述值
display
可以通过标签的display属性设置显示模式
none HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block 块级
inline 行内
inline-block 行内块级
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
五、div与span
布局都是用块级元素，而行内元素是控制内容显示的。
1、div标签
一般用于配合css完成网页的基本布局
2、span标签
一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色
我是egon
3、div和span有什么区别？
div一般用于排版，而span一般用于局部文字的样式
1、站在HTML的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行
2、站在CSS的角度：div是一个容器级标签，而span是一个文本级标签
举例：
div与span标签
.header {
margin: 0 auto;
width: 980px;
height: 100px;
background: pink;
margin-bottom: 10px;
}
.content {
margin: 0 auto;
width: 980px;
height: 500px;
background: #e9ca37;
margin-bottom: 10px;
}
.footer {
margin: 0 auto;
width: 980px;
height: 100px;
background: #7e1487;
}
.logo {
width: 200px;
height: 50px;
background: #bfccdb;
float: left;
margin: 20px;
}
.nav {
width: 600px;
height: 50px;
background: palegreen;
float: right;
margin: 20px;
}
.aside {
width: 250px;
height: 460px;
background: #cccccc;
float: left;
margin: 20px;
}
.article {
width: 650px;
height: 460px;
background: green;
float: right;
margin: 20px;
}
span {
color: red;
}
