文章目录
- 前言
- div
- span
- div 盒子模型
- 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属性）
