css基础 display:block 行内标签转为块级标签
2018-02-11 09:54
543 查看
礼悟:
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
下面的内容来源于 itcast和itheima视频库 中视频教程附带的课堂笔记,在此处声明,为示感恩心。
CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
ide:visual studio 2017
browser:Chrome
os:win7
browser:Chrome
os:win7
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="给最苦 https://www.cnblogs.com/jizuiku https://github.com/GratefulHeartCoder"/> <title></title> <style> span{ width:100px; height:100px; /* 行内标签 转为 块级标签*/ display:block; } span:nth-child(1){ background-color:lightgreen; } span:nth-child(2){ background-color:aquamarine; } span:nth-child(3){ background-color:dodgerblue; } </style> </head> <body> <span> 博客园 </span> <span> 给最苦 </span> <span> 网页设计 </span> </body> </html>
效果
扩展
2018-02-11下面的内容来源于 itcast和itheima视频库 中视频教程附带的课堂笔记,在此处声明,为示感恩心。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="https://www.cnblogs.com/jizuiku"/> <title></title> </head> <body> <!-- 块级元素(block-level) <div> <h1...6> <p> <ul> <ol> <li>等 块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。 --> <!-- 行内元素(inline-level) <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等 行内元素的特点: (1)和相邻行内元素在一行上。 (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。 (3)默认宽度就是它本身内容的宽度。 (4)行内元素只能容纳文本或则其他行内元素。(a特殊) --> <!-- 行内块元素(inline-block) <img />、<input />、<td> 行内块元素的特点: (1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。 (2)默认宽度就是它本身内容的宽度。 (3)高度,行高、外边距以及内边距都可以控制。 --> </body> </html>
CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
相关文章推荐
- css基础 display:inline 块级标签->行内标签 简单示例
- html+css中标签 和display:block的使用
- css中display:block;的用法及适用标签详解
- css基础 display:inline-block 行内元素->行内块元素
- display:block; 块级元素。<a>,<span>标签设置宽度和高度
- 【CSS 基础】05 块级标签、行级标签、行内块级标签
- [CSS]详解display:inline | block |inline-block的区别
- DIV CSS display (block none inline)属性的用法教程
- CSS display: inline block inline-block的区别
- [CSS]详解display:inline | block |inline-block的区别
- 在css中用列表设置导航条时block在a标签中的作用
- css基础 后代选择器 给标记的后代中 指定的标签/class名称 添加样式 (后代多级的)
- css基础 设置div标签 宽度 边框线颜色样式 div中文本居中 div块在网页中居中 div中内容距边框线的距离
- css基础 并集选择器 多个标签用逗号隔开,使用相同的样式
- CSS表现属性Display:Inline-Block的深入理解
- CSS{display:inline-block}
- CSS中的display:inline-block
- 块级元素和行内元素以及display:block
- CSS中样式 display 属性 inline,block及inline-block
- CSS:让IE6/IE7支持display:inline-block