转载请标明出处：/zhaoyanjun6/article/details/127222347
本文出自【赵彦军的博客】
文章目录
前言divspandiv 盒子模型auto 自动调整水平居中子元素溢出 overflow前言
div、span 是没有语义的。他们就是一个盒子（容器），用来装内容。
1、在功能方面：div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。span没有结构上的意义，只是单纯的应用样式，其它元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。
2、在使用方面：span元素宽度是被包围的内容宽度决定，不建议给span设置宽度属性width，可以给span设置margin值，设置与父元素之前的距离。span可以通过css声明（display:block）转换为块元素，想对一行中的文字或图片单独设置样式，而又由不需要换行的条件下又不影响其他行内其他内容，span可以很好解决这些问题
3、div 有宽度 width 、高度 height 。 如果不设置宽高、那么 div 的宽度和高度则由它所包含的内容决定。
div
html中的div (division)标签是一个块级元素，浏览器通常会在div元素前后放置一个换行符。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<head><meta charset="UTF-8"><title>测试</title><style>.red {background: coral;color: red;}</style></head><body><div class="red"><p>我是一个p</p><p>我是一个p</p></div></body>
span
<head><meta charset="UTF-8"><title>测试</title><style>.red {background: coral;color: red;}.blue {background: blue;}</style></head><body><div class="red"><p>我是一个p <span class="blue"> 我是一个span </span> </p><p>我是一个p</p></div></body>
div 盒子模型
<head><meta charset="UTF-8"><title>测试</title><style>.red {background: black;color: red;float: bottom;width: 250px;height: 70px;padding-top: 10px;padding-bottom: 20px;padding-left: 10px;padding-right: 10px;margin: 20px;border: 2px solid #ff0000;border-left: 10px solid #2c3e50;border-bottom: 10px solid coral;border-radius: 8px;border-top-left-radius: 20px;}</style></head><body><div class="red"><p>我是一个p</p><p>我是一个p</p></div></body>
auto 自动调整
div 的宽度默认是 auto
<head><style>.red {background: black;color: red;width: auto;}</style></head><body><div class="red"><p>我是一个p</p><p>我是一个p</p></div></body>
水平居中
如果margin-left: auto; margin-right: auto;那么控件将会水平居中显示
<head><style>.red {background: black;width: 300px;height: 100px;}.child {width: 100px;color: red;margin-left: auto;margin-right: auto;}</style></head><body><div class="red"><p class="child">我是一个p</p></div></body>
小技巧：margin: 0 auto;表示上下边距为 0 ，左右边距为 auto
子元素溢出 overflow
处理子元素超出父元素的处理情况，在父元素添加overflow属性
overflow: scroll;overflow-x: scroll;overflow-y: scroll;
overflow有以下这些属性：
visible 默认值。内容不会被修剪，会呈现在div之外。hidden 内容会被修剪，并且其余内容是不可见的。scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容，scroll 会出现横向、纵向滚动条auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，auto 会自动根据实际情况添加滚动条。inherit 规定应该从父元素继承 overflow 属性的值。（注：所有IE浏览器都不支持inherit属性）
![[网摘]DIV+CSS两种盒子模型【HTML】](https://1200zi.500zi.com/uploadfile/img/14/588/d670f7e5ad7fea99ef9a720d63dc8ea2.jpg)
