12-CSS基础-CSS显示模式
Div和Span标签
- 什么是div?
- 作用: 一般用于配合css完成网页的基本布局
<style>
.header{
width: 980px;
height: 100px;
background: red;
margin: auto;
margin-bottom: 10px;
}
.content{
width: 980px;
height: 500px;
background: green;
margin: auto;
margin-bottom: 10px;
}
.footer{
width: 980px;
height: 100px;
background: blue;
margin: auto;
}
.logo{
width: 200px;
height: 50px;
background: pink;
float: left;
margin: 20px;
}
.nav{
width: 600px;
height: 50px;
background: yellow;
float: right;
margin: 20px;
}
.aside{
width: 250px;
height: 460px;
background: purple;
float: left;
margin: 20px;
}
.article{
width: 650px;
height: 460px;
background: deepskyblue;
float: right;
margin: 20px;
}
</style>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
- 什么是span?
- 作用: 一般用于配合css修改网页中的一些局部信息
<style>
span{
color: red;
}
</style>
<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>
- div和span有什么区别?
- 1.div会单独的占领一行,而span不会单独占领一行
- 2.div是一个容器级的标签, 而span是一个文本级的标签
- 容器级的标签和文本级的标签的区别?
- 容器级的标签中可以嵌套其它所有的标签
- 常见容器级的标签: div h ul ol dl li dt dd ...
- 文本级的标签中只能嵌套文字/图片/超链接
- 常见文本级的标签:span p buis strong em ins del ...
- 注意点:
- 不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)
CSS元素显示模式
- 在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
- 在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)
- 什么是块级元素, 什么是行内元素?
- 块级元素会独占一行
- 行内元素不会独占一行
- 常见容器级的标签: div h ul ol dl li dt dd ...
- 常见文本级的标签:span p buis stong em ins del ...
- 常见块级元素: p div h ul ol dl li dt dd
- 常见行内元素: span buis strong em ins del
- 块级元素和行内元素的区别?
- 块级元素
- 独占一行
- 如果没有设置宽度, 那么默认和父元素一样宽
- 如果设置了宽高, 那么就按照设置的来显示
- 行内元素
- 不会独占一行
- 如果没有设置宽度, 那么默认和内容一样宽
- 行内元素是不可以设置宽度和高度的
- 行内块级元素
- 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
- 不独占一行, 并且可以设置宽高
CSS元素显示模式转换
- 如何转换CSS元素的显示模式?
- 设置元素的display属性
- display取值
- block 块级
- inline 行内
- inline-block 行内块级
- 快捷键
- di display: inline;
- db display: block;
- dib display: inline-block;