一, 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>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
先看看默认的
- 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="">
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
二, 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 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
2. 快捷键
di+table 键:display: inline;
db+table 键: display: block;
dib+table 键: display: inline-block;
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/88ea9dc1b263