HTML连载30-CSS显示模式&模式转换
2019-08-26 05:41:13来源:博客园 阅读 ()
一、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>
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;
}
上面两个字例子符合我们预期
但是现在我们提出问题:要是想要既不独占一行,又可以设置高度和宽度?
我们引出“行内块级元素”
7.行内块级元素
?特点:既不独占一行又可以设置宽度高度
这是img标签
例子?:
image{ width: 50px; height:50px; } .........省略代码...... <img src="image\play_tennis.jpg" alt=""> <img src="image\play_tennis.jpg" alt="">
二、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>
2.快捷键
di+table键?:display: inline;
db+table键:display: block;
dib+table键:display: inline-block;
三、源码:
d91_CSS_display_mode.htm
d92_CSS_display_mode_transform.html
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,后台回复“礼包”获取Java大数据学习视频礼
原文链接:https://www.cnblogs.com/ruigege0000/p/11355584.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash