div和span
2017-06-27 本文已影响0人
佩佩216
div
作用：一般用于配合css完成网页的基本布局。
span
作用：一般用于配合css修改网页中的一些局部信息。
div同span的区别：
- div会单独占领一行，span不会单独占领一行；
- div是一个容器级别的标签，span是一个文本级别的标签；
区别：容器级中的标签可以嵌套其它所有的标签，文本级的表情中只能嵌套文字/图片/超链接。
容器级的标签：ul，h, div, ol, dl, li,dt,dd···
文本级的标签：span,p,buis, em, ins ,del ,strong···
注意点：在企业开发中一般情况下要嵌套都是嵌套在div中，或者按照组标签来嵌套。
在HTML中将所有的标签分为两类，分别是容器级和文本级。
在css中将所有标签也分为两类，分别是块级元素和行内元素。
块级元素：p ,ul，h, div, ol, dl, li···
行内元素：span,buis, em, ins ,del ,strong···
区别：
- 块级元素:独占一行，如果未设置宽高，则是按照父元素的默认宽高，如果设置了宽高，那么就按照设置来显示；
- 行内元素:不会独占一行，如果未设置宽高，那么默认和内容一样的宽高，行内元素是不可以设置宽度和高度。
- 行内块级元素:为了让元素能够不独占一行，又可以设置宽高，就是行内块级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>30-CSS元素的显示模式</title>
<style>
div{
background: red;
width: 200px;
height: 200px;
}
span{
background: blue;
width: 200px;
height: 200px;
}
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是段落</p>
<h1>我是标题</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<hr>
</body>
</html>
css元素显示模式转换
如何转换css元素的显示模式?
设置元素的display属性。
取值：
block 块级
inline 行内
inline-block 行内块级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31-CSS元素显示模式转换</title>
<style>
div{
display: inline;
background: red;
width: 200px;
height: 200px;
}
span{
display: block;
background: green;
width: 200px;
height: 200px;
}
.cc{
background: blue;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>
</body>
</html>
