一、CSS显示模式
1.在HTML中HTML将
所有的标签分为两类,分别是容器类和文本级。在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素
2.什么是块级元素呢?什么是行内元素?
(1)块级元素会独占一行
(2)行内元素不会独占一行
3.块级元素
p div h ul ol dl li dt dd
行内元素
span buis stong em ins del
4.记忆攻略:所有的容器级加上p标签都是块级元素;所有的文本级除了p标签,都是行内元素。
5.例子
<div>我是div</div>
<p>我是段落</p>
<h1>我是标题</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
6.块级元素和行内元素的区别
(1)块级元素
如果没有设置宽度,那么默认和父元素一样宽;如果设置了宽度,那么就按照设置的来显示。
(2)行内元素
如果没有设置宽度,那么默认和内容一样宽;如果设置了宽度,也没有,是不可以设置长度和宽度的。
例子:公共代码
<div>我是div</div>
<hr>
<span>我是span</span>
先看看默认的
div{
background: red;
}
span{
background: blue;
}
再来看看设置好了的
div{
background: red;
width: 100px;
height:100px;
}
span{
background: blue;
width: 100px;
height:100px;
}
web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
上面两个字例子符合我们预期
但是现在我们提出问题:要是想要既不独占一行,又可以设置高度和宽度?
我们引出“行内块级元素”
7.行内块级元素
特点:既不独占一行又可以设置宽度高度
这是img标签
例子:
image{
width: 50px;
height:50px;
}
.........省略代码......
<img src="image\play_tennis.jpg" alt="">
<img src="image\play_tennis.jpg" alt="">
web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
二、CSS元素显示模式转换
给标签设置属性
display:值;
值的范围:inline代表转换为行内标签;block代表转换为块级标签;inline-block代表转换为行内块级标签
div{
display: inline;/*转换为行内的标签*/
background: red;
height: 100px;
width: 100px;
}
span{
display: block;/*转换为块级标签*/
background: blue;
height: 100px;
width: 100px;
}
.c{
display: inline-block;/*转换为块级行内标签*/
background: yellow;
height: 100px;
width: 100px;
}
.........省略代码........
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<p class="c">我是段落</p>
<b class="c">我是加粗</b>
如果大家对编程,web前端感兴趣,想要了解学习,打算深入了解这个行业的朋友,可以加下我们的前端学习扣qun : 784783012 ,不论你是学生还是想转行的朋友,我都欢迎,不定期分享干货,整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家:学习前端我们是认真的
2.快捷键
di+table键:display: inline;
db+table键:display: block;
dib+table键:display: inline-block;