9
css显示模式（行内元素，块元素，行内块元素）
source link: https://blog.51cto.com/u_15555037/5327977
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
css显示模式（行内元素，块元素，行内块元素）
原创不同元素之间可以通过变换实现不同的功能。
1.块元素
1.1.性质：
/*1.自己独占一行。*/
/*2.高，宽，外边距和内边距可控*/
/*3.宽默认为父级的100%就是父类元素的宽*/
/*4.可以看作一个盒子，里面可以装块元素和行内元素*/
/*常见的块元素：*/
<p>,<h1>~~<h6>,
<div>,<ul>,<ol>,<li>等。
/*注：<p>和<h>中无法放<div>等元素*/
2.行内元素
2.1.性质：
/*1.一行上放多个元素。*/
/*2.高，宽直接设置无效*/
/*3.宽默认本身文字宽度*/
/*4.只能容纳文本或其他行内元素*/
/*常见的行内元素：*/
<a>,<em>,<span>,<i>等
/*注：<a>中无法再放链接，<a>里可以放块元素*/
3.行内块元素
3.1.性质：
/*1.特点：既有行内元素的特点也有块元素的特点。*/
/*2.和相邻的行内元素在一行上，但他们会有空白间隙（宽高），
一行可以显示多个*/
/*3.默认宽高为本身内容的宽高*/
/*高度，行高，内外边距都可以控制*/
/*常见的行内块元素：*/
<img>,<input>,<td>等
4.display改变元素显示模式
4.1：我们可以通过display属性来设定我们想要的元素有何种方式显示。
4.2.示例：
.s2{
display: inline-block;//让s2这个盒子变成行内块元素
}
.s2 a {
background: rgba(53, 50, 50, 0.8);
font-weight: 700;
display: block;//让链接变成块元素拥有宽高
width: 250px;
height: 80px;
text-decoration: none;
line-height:40px ;
text-align: center;
}
<div class="s2">
<a rel="nofollow" href="#">1</a>
<a rel="nofollow" href="#">2</a>
<a rel="nofollow" href="#">3</a>
<a rel="nofollow" href="#">4</a>
</div>
效果：
- 赞
- 收藏
- 评论
- 分享
- 举报
上一篇：java异常处理
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK