首页 > web前端 > css教程 > 正文

CSS的显示模式如何使用

php中世界最好的语言
发布: 2018-03-13 10:33:50
原创
1904 人浏览过

这次给大家带来CSS的显示模式如何使用,使用CSS的显示模式的注意事项有哪些,下面就是实战案例,一起来看一下。

一. 标签补充  div 和s pan

1.什么是div?

作用: 一般用于配合css完成网页的基本布局

2.什么是span?

作用: 一般用于配合css修改网页中的一些局部信息

3.div和span有什么区别?

3.1.div会单独的占领一行,而span不会单独占领一行

3.2.div是一个容器级的标签, 而span是一个文本级的标签

4.容器级的标签和文本级的标签的区别?

容器级的标签中可以嵌套其它所有的标签
文本级的标签中只能嵌套文字/图片/超链接

容器级的标签

div h ul ol dl li dt dd ...
登录后复制
登录后复制

文本级的标签

span p buis strong em ins del ...
登录后复制

注意点:

哪些标签是文本级的哪些标签是容器级的, 我们不用刻意去记忆, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套

二. 元素的显示模式

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素

1.什么是块级元素, 什么是行内元素?

块级元素会独占一行
行内元素不会独占一行

容器级的标签

div h ul ol dl li dt dd ...
登录后复制
登录后复制

文本级的标签

span p buis stong em ins del ...
登录后复制

块级元素

p div h ul ol dl li dt dd
登录后复制

行内元素   (所有的文本元素中除了p,都是行内元素)

span buis strong em ins del

2.块级元素和行内元素的区别?

2.1块级元素
独占一行
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示

2.2行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的

2.3行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素 (如:img标签)

三 CSS元素显示模式转换

1.如何转换CSS元素的显示模式?

设置元素的display属性

2.display取值

block 块级
inline 行内
inline-block 行内块级

3.快捷键

di display: inline;
db display: block;
dib display: inline-block;

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

iOS webView怎样加载HTMLString

关于正则表达式的几个小练习

以上是CSS的显示模式如何使用的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!