华子目录
- 什么是div
- div盒子模型
- 盒模型标签属性：
- 边框（border）
- 怪异盒与标准盒模型
- 元素类型
- 块级元素基础特性（block）
- 行内元素基础特性（inline）
- 行内块元素（inline-block）
- 元素类型转换
什么是div
div本身是没有任何含义的，它一般是作为划分区域的标签，是一个很单纯的标签，可塑性很强，一般用来做容器，所以称为盒子。把对应的内容放在div盒子里面（分割区域，div本身没有宽高、颜色属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
*{
margin: 0;//清除外边距
padding: 0;//清除内边距
}
.box{
width:200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">我最喜欢麦当了，他很帅，很有担当</div>
</body>
</html>
div盒子模型
盒子组成：
内容区（content）
内边距（padding）：盒子里的内容距离盒子边框的距离
边框（border）
外边框（margin）：盒子里距离外部边界的距离
注：
- 如果把盒子的宽高写死，在设置padding，会把盒子撑大
- 如果盒子没有设定宽高，就会随内容变化而变化
- 盒子大小固定，图片img插入的话，就会显示整个图片
- 有时候盒子为了扩展性，只会设置宽度，不会设置高度，让盒子随着内容增长
盒子的核心属性：
width：宽度，默认为浏览器100%
height：高度，默认为盒子内容
overflow：溢出处理（盒子装不下怎么办）（常常与img标签使用）
:auto让浏览器看着办（一般按照scroll执行）
:scroll通过滚轮条显示溢出部分
:visible照常显示溢出部分（默认）（整体显示）
:hidden隐藏溢出部分
盒模型标签属性：
margin设置外边距
padding设置内边距
margin和padding里面4个不同写法：
padding:10px;距离上下左右10px
padding:10px 15px;上下10px，左右15px
padding:10px 15px 10px;上10px，左右15px，下10px
padding:10px 15px 20px 25px;上，右，下，左
margin（同上）
单独设置方向：
margin-top设置上外边距
margin-right设置右外边距
margin-bottom设置下外边距
margin-left设置左外边距
padding-top设置上内边距
padding-right设置右内边距
padding-bottom设置下内边距
padding-left设置左内边距
margin设置左右居中:
margin:任何px auto;
边框（border）
border-width设置边框粗细
border-color设置边框颜色
border-style设置边框样式
none空
solid实线
double双实线
dashed虚线
dotted点线
border-radius设置边框圆角
border-top设置上边框
border-right设置右边框
border-bottom设置下边框
border-left设置左边框
边框的符合写法：
border:10px solid #096
粗细 样式 颜色
怪异盒与标准盒模型
怪异盒模型和标准模型区别在于 width height所包含的部分不同，标准盒模型width height只表示内容区， 而怪异盒模型的width height包含内容、内边距、边框部分
所以我们可以使用 box-sizing 属性来指定盒模型的类型
元素类型
常见的元素类型有：块级元素，行内元素，行内块元素（这里所说的元素就是指 标签）
块级元素基础特性（block）
相当于地主，有一块自己的地盘，自动换行
常见的块级元素：
div p h1-h6 ol ul li dl dt dd
特性：
1.块元素总是独占一行，不和其他的元素并排
2.块元素有宽高，边距属性，这些都可以自己设置
3.块元素的宽度默认是浏览器的100%，高度为内容高度
4.块元素可以包含行内元素（但是p标签不能放块元素中，也就是p标签里不能嵌套div，p，h等块级元素）
行内元素基础特性（inline）
相当于打工人，没有属于自己的一块地
常用的行内元素：
span a b strong i u
特性：
1.行内的默认宽高是自身的属性
2.行内元素设置宽高没有意义 不具备结构能力
3.行内元素不会独占一行 默认都是放在一起的
4.行内元素不能放块元素 只能放其他行内元素（但是a标签可以放块级元素）（a标签里面可以放div和img）
行内块元素（inline-block）
行内块元素是行内和块元素结合体(融合技) 同时具有两者特征(主块 辅行)
1.相邻的行内元素(行内块)在一行的 末尾会有一个空格
2.默认宽度是内容的宽度
3.宽高 内外边距都可以设置
元素类型转换
display:类型转换样式
display:none;元素不显示 浏览器也不渲染
display:inline-block;把标签转为行内块元素
display:inline;把标签转为行内元素
display:block;把标签转为块元素
