转载请标明出处:/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属性)