一、盒子模型
1.盒子模型概念
CSS将页面中的元素都设置为了一个矩形的盒子。
将元素设置为矩形的盒子，对页面的布局就转化为了将不同的盒子摆放在不同的位置。
2.盒子模型组成
1.内容（content）
2.内边距（padding）
3.边框（border）
4.外边距（margin）
1.1 盒子模型
1）内容区（content）
内容区（content），元素中所有的子元素和文本都在内容区中排列。
内容区的大小由width和height属性来决定。
width：10px; 默认值为auto,设置内容区的宽度
height:10px; 设置内容区的高度
min-width:20px; 最小宽度
max-width:200px;最大宽度
min-height:50px 最小高度50px
max-height:50px 最大高度50px
<!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>
<style>
/**
内容区的大小由width和height来设置
*/
#b1{
width:50px;
height:50px;
background-color:hsl(50,50%,50%)
}
</style>
<body>
<div id="b1">
</div>
</body>
</html>
2）边框（border）
| 边框样式 | 默认值 | 语义 | 分别样式 | 语义 |
|---|---|---|---|---|
| border-width | 一般默认为3个像素 | 指定边框宽度 | border-top-width border-left-width border-right-width border-bottom-width | 分别指定每一边的宽度 |
| border-style | 默认为none | 指定边框的样式 | border-top-style border-left-style border-right-style border-bottom-style | 分别指定每一边的样式 |
| border-color | 默认为color的颜色 | 指定边框颜色 | border-top-color border-left-color border-right-color border-bottom-color | 分别指定每一边的颜色 |
| border | 统一指定边框样式（顺序可随意） | border-top border-left border-right border-bottom | 分别统一指定边框样式 |
1.边框（border）:
1.边框属于盒子边缘。
边框里属于盒子的内容，出了边框属于外部。
2.设置边框，至少设置三个样式：
设置边框的长度 border-width
设置边框的颜色 border-color
设置边框的风格 border-style
统一设置边框样式 border
1.border-width:10px;
border-xxx-width:10px;
1.默认值：一般都是3个像素。
2.border-width可以指定四个边框的宽度。 也可以分别指定(border-xxx-width)。
指定所有边：
border-width：10px 20px 30px 40px; //上 右 下 左
border-width：10px 20px 30px ; //上 左右 下
border-width：10px 20px ; //上下 左右
border-width：10px ; //上下左右
指定某个边:
border-top-width：10px;
2.border-color:red；
border-xxx-color:red；
1.默认值：元素color设置的颜色值。
2.border-color可以指定四个边框的颜色，也可以分别指定(border-xxx-color)。
指定所有边：
border-color：red blue red blue;
border-color：red blue red ;
border-color：red blue ;
border-color：red ;
指定某个边:
border-top-color：red;
border-bottom-color：red;
border-left-color：red;
border-right-color：red;
3.border-style:solid;
border-xxx-style:solid;
1.默认值：none；//无边框
2.border-style指定边框的样式
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
3.border-style可以指定四个边框的样式。也可以分别指定(border-xxx-style)。
指定所有边：
border-style：solid dotted dashed double ;
border-style：solid dotted dashed ;
border-style：solid dotted ;
border-style：solid ;
指定某个边:
border-top-style：solid;
4.border的简写属性
1.border的简写属性，通过该属性可以同时设置边框的所有相关样式。而且没有顺序要求。
2.语法：
指定所有边：
border:solid red 10px;
border:10px solid red;
指定某个边:
border-top:solid red 10px;
>>>>>> 案例1：设置边框样式
<!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>
<style>
div{
width:50px;
height:50px;
background-color:hsl(50,50%,50%);
}
/** 分别设置样式*/
#b1{
border-width:10px;
border-color:yellow;
border-style:solid;
}
/** 分别设置每一边的样式*/
#b2{
border-top-width:10px;
border-left-width:10px;
border-right-width:10px;
border-bottom-width:10px;
border-top-color:yellow;
border-left-color:yellow;
border-right-color:yellow;
border-bottom-color:yellow;
border-top-style:solid;
}
/** 统一设置样式*/
#b3{
border:10px solid red;
}
/** 统一设置每一边的样式*/
#b4{
border-top:10px solid red;
}
</style>
<body>
<div id="b1">b1 </div>
<div id="b2">b2 </div>
<div id="b3"> b3</div>
<div id="b4"> b4</div>
</body>
</html>
>>>>>> 案例2：border-color的默认值为元素color的样式
backgound-color设置的是背景色。
color设置的是前景色。
所以border-color如果没有设置，则默认为color的颜色。
<!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>
<style>
div{
width:50px;
height:50px;
background-color:hsl(50,50%,50%);
color:blue;
}
/** 分别设置样式*/
#b1{
border-width:10px;
border-style:solid;
}
</style>
<body>
<div id="b1">b1 </div>
</body>
</html>
>>>>>> 案例3：input标签的border和outline
若希望实现input在触发焦点时更改样式，通常会想到使用:focus选择器，但当使用border去更改样式时，会发现失效了:
input[type=text]:focus{ border: 1px solid #AFECAB; }
这里是希望改成浅绿色边框，发现不起作用，也无关层级，因为加了!important也没有作用，后来发现，在触发:focus时，用作突出的边框色，是由outline控制的，即获得焦点时，会被一个轮廓虚拟框围绕，而轮廓虚线框就是 outline。
input[type=text]:focus{ outline: 1px solid #AFECAB;}
将border改为outline，这样便能达到预想的效果了。
ps：当然，若你直接用js或jq的.focus去更改border的样式也是可以实现的。
3）内边距（padding）
| 样式 | 语义 | 案例 | 分别样式 | 语义 | 案例 |
|---|---|---|---|---|---|
| padding | 指定内边距 | padding:10px 20px 30px 40px padding:10px 20px 30px padding:10px 20px padding:10px | padding-top padding-left padding-right padding-bottom | 分别指定每一边的宽度 | padding-top :10px |
1.内边距（padding）:
1.内容区和边框之间的距离就是内边距。
2.背景颜色会延伸到内边距。
3.一个盒子可见框的大小由内容区、内边距、边框共同决定。
所以在计算盒子大小时，需要将三个区域加在一块。
但是外边距不会影响盒子的大小。
padding:10px;
1.不能有负值
2.padding指定所有边或某个边的内边距
指定所有边：
padding：10px 20px 30px 40px; //上 右 下 左
padding：10px 20px 30px ; //上 左右 下
padding：10px 20px ; //上下 左右
padding：10px ; //上下左右
指定某个边：
padding-top：10px;
padding-left：10px;
padding-right：10px;
padding-bottom：10px;
4）外边距（margin）
| 样式 | 语义 | 案例 | 分别样式 | 语义 | 案例 |
|---|---|---|---|---|---|
| margin | 指定外边距边距 | margin:10px 20px 30px 40px margin:10px 20px 30px margin:10px 20px margin:10px | margin-top margin-left margin-right margin-bottom | 分别指定每一边的宽度 | margin-top :10px |
1.外边距（margin）：
1.外边距不会影响盒子可见框的大小
2.但是外边距会影响盒子实际占用空间。
margin:10px;
1.可以有负值。
margin-xxx设置负值，则会设置相反方向的外边距。
margin-xxx设置正值，则会设置该方向的外边距。
2.margin指定所有边或某个边的外边距。
指定所有边：
margin：10px 20px 30px 40px; //上 右 下 左
margin：10px 20px 30px ; //上 左右 下
margin：10px 20px ; //上下 左右
margin：10px ; //上下左右
指定某个边：
margin-top：10px;
margin-left：10px;
margin-right：10px;
margin-bottom：10px;
1.2 width、margin、padding 值详解
1.默认值：
width默认值为auto。
margin、padding默认值为0;
2.只有margin可以为负值。
3.width(width值默认就为auto)
如果div没有设置宽度，则占父元素的100%。
原因是由于width的默认值为auto。浏览器为使等式满足，自动调整auto值，即width。
1.3 盒子大小
1) 盒子大小
1. 默认情况下，盒子可见框的大小由内容区、内边距、边框共同决定。
2. 默认情况下，父元素的高度由内容撑开。
3. 子元素在父元素中内容区排列，如果子元素大小超过父元素大小，
则子元素默认会溢出。
2) 设置盒子尺寸计算方式 ，box-sizing
box-sizing:用来设置盒子尺寸的计算方式。（设置width、height的作用）
可选值:
content-box （默认值）宽度和高度用于设置内容区的大小。
width、height指的是内容区的大小
border-box 宽度和高度用于设置整个盒子可见框的大小。
width、height指的是可见框的大小
>>>>>> 默认情况下，盒子可见框的大小由内容区、内边距、边框共同决定。
盒子的大小=width、height指定的大小+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>
div{
width:100px;
height:100px;
border:10px solid red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
>>>>>> 设置盒子大小计算方式。box-sizing:border-box;
盒子的大小=width、height指定的大小
<!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>
div{
width:100px;
height:100px;
border:10px solid red;
box-sizing:border-box;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3) 设置盒子溢出方式，overflow属性（溢出设置）
overflow:
visible (默认值) 子元素从父元素中可以溢出，在父元素外部显示
hidden 溢出内容将会被隐藏，溢出的部分不会显示
scroll 生成水平、垂直双方向的滚动条
auto 根据内容自动生成滚动条
overflow-x：
单独处理水平方向，可选值和overflow一样。
overflow-y:
单独处理垂直方向，可选值和overflow一样。
>>>>>> 默认情况下，父元素的高度由内容撑开
<!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>
<style>
#b1{
width:400px;
background-color:red;
}
.inner{
width:100px;
height:30px;
background-color:blue;
margin-bottom:20px;
}
</style>
<body>
<div id="b1">
<div class="inner"></div>
<div class="inner"></div>
</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>
</head>
<style>
#b1{
width:500px;
height:200px;
background-color:red;
}
.inner{
width:200px;
height:400px;
background-color:blue;
margin-bottom:20px;
}
</style>
<body>
<div id="b1">
<div class="inner"></div>
</div>
</body>
</html>
>>>>>> overflow设置溢出
overflow:
visible (默认值) 子元素从父元素中可以溢出，在父元素外部显示
hidden 溢出内容将会被隐藏，溢出的部分不会显示
scroll 生成水平、垂直双方向的滚动条
auto 根据内容自动生成滚动条
overflow-x：
单独处理水平方向，可选值和overflow一样。
overflow-y:
单独处理垂直方向，可选值和overflow一样。
<!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>
<style>
#b1{
width:1000px;
height:200px;
background-color:red;
overflow: auto;
}
.inner{
width:200px;
height:400px;
background-color:blue;
margin-bottom:20px;
}
</style>
<body>
<div id="b1">
<div class="inner"></div>
</div>
</body>
</html>
1.4 三角
<!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>
#b1{
width:0px;
height:0px;
border:20px solid transparent;
border-top-color:red;
border-bottom-color:blue;
border-left-color:green;
border-right-color:pink;
}
</style>
</head>
<body>
<div id="b1"></div>
</body>
</html>
二、文档流
文档流(normal flow)
1.网页是一层多层的结构，一层落着一层。对用户来说，是从俯视的角度来看的
2.通过css可以为每一层来设置样式。
3.这些层中，最底下的一层我们称之为文档流。文档流是网页的基础。
我们所创建的元素默认都是在文档流中排列的。
4.对于我们来说，元素主要有两个状态:
在文档流中
不在文档流中（脱离文档流）
元素在文档流中特点
块元素:
块元素独占一行。（自上向下垂直排列）
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容撑开。
行内元素：
行内元素不会独占一行。（只占自身大小）
行内元素在页面中自左向右水平排列，如果溢出，则换行继续排列。
三、盒子的水平方向布局
3.1 水平布局恒等式
1.一个元素在其父元素中，水平方向布局必须满足以下等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素其内容区的宽度（必须满足）。
3.2 过度约束自动调整
2.盒子水平布局恒等式必须要满足，如果不满足，则称之为过度约束;
如果不满足，则浏览器会自动调整。
如果这七个属性无auto，则会调整margin-right。
如果这七个属性有auto，则会调整auto值。
1.只有width为auto，
那么width会被调整为父元素的100%
2.只有margin为auto，
那么外边距会设置为相同的值。
3.width、margin为auto。
那么width会被设置父元素的100% 。margin被设置为0。
3.3 案例
1）无auto，则浏览器会自动调整margin-right
inner:0+0+0+100+0+0+0 = 1000
由于上述等式不满足，则会调整margin-right=900。即：
inner:0+0+0+100+0+0+900 = 1000
2）width、margin为auto，那么width会被设置为父元素的100%。margin设置为0
inner:0+0+0+auto+0+0+0 = 1000
由于上述等式不满足，则会调整width=1000。
3） width固定，margin为auto，那么外边距会被设置相同的值
如果将两个外边距都设置为auto，宽度固定，那么外边距会设置为相同的值。
4）如果子元素超过父元素宽度，则浏览器依旧会自动调整恒等式，只不过是调整为负值
inner: 0+0+0+1200+0+0+0 =400
为使等式成立，浏览器将margin-right调整为-800.即:
inner: 0+0+0+1200+0+0+-800 =400
3.4 水平布局恒等式应用
1）块级元素独占一行
根据盒子水平布局恒等式，
如果无auto的情况，浏览器会默认调整margin-right。
所以块级元素无论宽度是否设置，都会独占一行。
2）块级元素默认情况下块级元素-子元素的宽度占父元素的100%
由于width默认值为auto，
根据盒子水平布局恒等式，浏览器会自动调整
3）设置块级元素居中
#box{
width:200px;
margin:0 auto;
}
原因：根据水平布局恒等式，
width固定，margin为auto，那么浏览器会自动调整左右外边距相等。
四、盒子的垂直方向布局
3.1 盒子的垂直方向布局
盒子的垂直方向没有恒等式。
3.2 垂直外边距的重叠效应
垂直方向的外边距重叠，会对元素产生影响。
+++ 兄弟元素垂直方向的外边距重叠
1.影响效果
1.垂直方向的外边距都为正，取外边距最大。
2.垂直方向的外边距都为负，取绝对值最大。
3.垂直方向的外边距一正一负，则取两者之和。
2.是否有益
兄弟之间元素外边距的重叠对开发是有利的，不需要处理。
+++ 父子元素垂直方向的外边距重叠
1.影响效果
父子元素垂直方向外边距重叠，子元素外边距会传递给父元素（上外边距）
2.是否有益
父子元素上下外边距的重叠会影响到页面的布局，所以必须要处理
处理方法：给父元素加上border-top：1px solid。
原因：给父元素加上border,此时父元素的外边距和子元素的外边距不会重叠
1）兄弟元素上下外边距重叠，无须处理
>>>>>> 垂直方向的外边距都为正，取最大值
<!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>
<style>
*{
margin:0px;
padding:0px;
}
#b1{
width:1000px;
height:200px;
background-color:red;
margin-bottom:120px;
}
#b2{
width:1000px;
height:200px;
background-color:blue;
margin-top:120px;
}
</style>
<body>
<div id="b1"> b1 </div>
<div id="b2"> b2 </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>
</head>
<style>
#b1{
width:1000px;
height:200px;
background-color:red;
margin-bottom:-20px;
}
#b2{
width:1000px;
height:200px;
background-color:blue;
margin-top:-100px;
}
</style>
<body>
<div id="b1"> b1 </div>
<div id="b2"> b2 </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>
</head>
<style>
*{
margin:0px;
padding:0px;
}
#b1{
width:1000px;
height:200px;
background-color:red;
margin-bottom:-20px;
}
#b2{
width:1000px;
height:200px;
background-color:blue;
margin-top:120px;
}
</style>
<body>
<div id="b1"> b1 </div>
<div id="b2"> b2 </div>
</body>
</html>
2）父子元素上外边距重叠，需要处理
>>>>>> 父子元素上外边距重叠，子元素外边距会传递给父元素
子元素设置了margin-top：120px；由于父子元素上下外边距重叠，
所以子元素的外边距会传递给父元素。所以父子元素都下移。
<!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>
<style>
*{
margin:0px;
padding:0px;
}
#b1{
width: 200px;;
height:200px;
background-color:red;
}
#b2{
width:50px;
height:50px;
background-color:blue;
margin-top:120px;
}
</style>
<body>
<div id="b1">
<div id="b2"> b2 </div>
</div>
</body>
</html>
>>>>>> 父子元素外边距的重叠会影响到页面的布局，所以必须要处理
方式一：
处理方法：给父元素加上border-top：1px solid。
原因：给父元素加上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>
</head>
<style>
*{
margin:0px;
padding:0px;
}
#b1{
width: 200px;;
height:200px;
background-color:red;
border-top :1px solid;
}
#b2{
width:50px;
height:50px;
background-color:blue;
margin-top:120px;
}
</style>
<body>
<div id="b1">
<div id="b2"> b2 </div>
</div>
</body>
</html>
方式二：
#b1::before{
content:'';
display:table;
}
<!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>
#b1{
background-color: red;
}
#b2{
width:100px;
height:100px;
background-color: blue;
margin-top:50px;
}
#b1::before{
content:'';
display:table;
}
</style>
</head>
<body>
<div id="b1">
<div id="b2"> </div>
</div>
</body>
</html>
方式三：
开启BFC
<!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>
.box1{
width:500px;
height:500px;
background: red;
overflow: hidden;;
}
.box2{
width:50px;
height:50px;
margin-top:100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
五、行内元素的盒子模型
行内元素的盒子模型：
1.行内元素不可以设置width、height。其大小由内容撑开
2.行内元素可以设置margin、padding、border。
但是垂直方向内外边距无效，下内边距只会产生遮盖，不会对页面产生影响。
1）行内元素不可以设置width、height。其大小由内容撑开
<!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>
<style>
*{
margin:0px;
padding:0px;
}
#b1{
width: 200px;;
height:200px;
background-color:red;
}
</style>
<body>
<span id="b1">1111</span>
</body>
</html>
2）行内元素可以设置margin，但是上下外边距无效。左右外边距有效。
<!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>
<link rel="stylesheet" href="./c/font/css/all.css">
<style>
#b1{
background:blue;
margin-left:200px;
margin-top:200px;
margin-bottom:200px;
/* margin-left:200px; 有效*/
/* margin-right:200px; 有效*/
/* border:10px solid yellow; 有效*/
}
</style>
</head>
<body>
<span id="b1">xxx</span> <span id="b2">x22xx</span>
<div style="width:100px;height:200px;background:red;">xx</div>
</body>
</html>
行内元素可以设置padding，但是上下内边距无效。左右内边距有效。
<!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>
<link rel="stylesheet" href="./c/font/css/all.css">
<style>
#b1{
background:blue;
padding-left: 200px;
padding-right:200px;
padding-top:100px; /** 无效 */
}
</style>
</head>
<body>
<span id="b1">xxx</span> <span id="b2">x22xx</span>
<div style="width:100px;height:200px;background:red;">xx</div>
</body>
</html>
4）行内元素可以设置padding，但是上下内边距无效。左右内边距有效。下内边距只会产生遮盖效果，不会对页面产生影响。
<!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>
<link rel="stylesheet" href="./c/font/css/all.css">
<style>
#b1{
background:blue;
padding-bottom:100px;
}
</style>
</head>
<body>
<span id="b1">xxx</span> <span id="b2">x22xx</span>
<div style="width:100px;height:200px;background:red;">xx</div>
</body>
</html>
六、块级元素、行内元素和行内块元素
6.1 块级元素、行内元素和行内块元素
HTML标签的类型分为三种：块级元素、行内元素、行内块元素。
+++ 块级元素:
1. 独占一行。自上向下垂直排列。
2. 可以设置宽高，默认情况下宽度占父元素的100% ,高度由内容撑开。
3. 可以设置margin、padding、border。
4. 可以容纳内联元素和其他块元素。
+++ 行内元素：
1. 不会独占一行。自左向右水平排列。如果溢出，则换行继续排列。
2. 不可以设置宽高，默认大小由内容撑开。
3. 可以设置margin、pading、border。但是垂直方向内外边距无效。
下内边距只会产生遮盖效果，不会对页面产生影响。
margin:左右有效，上下无效。
border:有效。
padding:左右有效，上无效，下有效。
下内边距不会对页面产生影响，只会遮盖。
4. 只能容纳文本、其他行内元素。 a标签除外
+++ 行内块元素
1. 不独占一行
2. 可以设置宽高，默认大小由内容撑开。
3. 可以设置margin、padding、border。
6.2 元素转换
1.display:用于设置元素类型。
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-blobk 将元素设置为行内块元素。
table 将元素设置为一个表格
none 隐藏元素。但是元素已经物理删除
2.visibility：用来设置元素的显示状态。
可选值：
visible(默认值) 元素在页面中显示
hidden 隐藏元素。但是元素依旧存在
6.2.1 元素类型转换
display:inline; 转换为行内元素；
display: linline-block; 转换为行内块元素；
display: block; 转换为块级元素。
6.2.2 元素隐藏
1. display: none; 隐藏元素。但是元素已经物理删除
2. visibility:hidden;
扫一扫
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
