01行内元素
显示特点
1.占一行显示(很霸道-一行一个) 2.直接设置其宽高、行高、上下内边距(padding) 3.宽度默认是父级宽度100%,高度默认由内容撑开
代表标签
div p h系列 ul li dl dt dd form header nav footer...
代码演示
html结构
<body>
<div ></div>
<p></p>
<h1></h1>
</body>
css简单样式 为了显示的更清楚,辅助性的设置了大小和背景颜色
body{
width: 100px;
}
div{
/* width: 100px; */
height: 100px;
background-color: blue;
}
p{
/* width: 200px; */
height: 100px;
background-color: rgb(85, 85, 180);
}
h1{
/* width: 300px; */
height: 100px;
background-color: #4f7eb1;
}
如图1
可以清楚的看到
1.块级为元素独占一行,且相互间自带间隙(margin)
2.宽度默认是父级的100%
高度默认为内容撑开如下展示 html结构
<div>
npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! network Socket timeout npm ERR!
network This is a problem related to network connectivity. npm ERR!
network In most cases you are behind a proxy or have bad network settings.
npm ERR! network npm ERR! network
</div>
<p>npm ERR! code ERR_SOCKET_TIMEOUT npm ERR! network Socket timeout
</p>
<h1>12345</h1>
css样式
body {
width: 300px;
}
div {
background-color: blue;
}
p {
background-color: rgb(85, 85, 180);
}
h1 {
/* 抵消h1标签自带的字体加粗和放大-->正常显示 */
font-weight: normal;
font-size: 16px;
background-color: #4f7eb1;
}
如图2
02行内块元素
显示特点
1.一行显示多个,相互间自带间隙(margin) 2.直接设置其宽高、行高、上下内边距(padding)等
代表标签
input textarea button select
特殊的标签img
img标签属于行内元素,但是通常在Chrome调试工具中显示的是inline-bolock,所以一般当做行内块元素来看待.
代码演示
html
<img src="./img.png" alt="">
<button>button</button>
<textarea name="" id="" cols="30" rows="10"></textarea>
如图3
可以看到一行多个显示,且相互间自带间隙;
下面在html结构的基础上进行宽高设置看是否生效
css
img{
width: 100px;
height: 100px;
padding-bottom: 30px;
}
button{
padding-top: 30px;
}
图4:
img的宽高和下内边距都生效
03行内元素
行内元素又称内联元素
显示特点
1.默认情况下,一行显示多个,相互间没有间隙. 2.不能直接设置其宽高、行高、上下内边距(padding)等 3.默认情况下，宽度和高度都由内容撑开
代表标签
a span b u i s strong ins em del...
代码演示
html结构
<span>我是行内span</span>
<strong>我是行内strong自带加粗功能</strong>
css样式
span{
width: 200px;
height: 200px;
background-color: blue;
}
如图4:
可以看到
1.宽高有内容撑开
2.给span设置宽高没有生效
让span(行内元素)宽高设置生效有2种方法: 1.转块级元素 特点:不仅仅宽高生效,且独占一行 如图5
span{
/* 1.设置为块级元素 */
display: block;
width: 200px;
height: 200px;
background-color: blue;
}
2.转行内块元素
特点:宽高生效,仍在一行显示
/*方法2:设置为行内块 */
display: inline-block;
如图6
行内元素怎么先选择转块级元素还是行内块元素
转块级元素
简单来说,就是在已经做了布局的情况下,行内元素当前只需要宽高或者其他上下内边距等生效,但是要独占一行时,考虑转块级
转行内块元素
在已经做了布局的情况下,行内元素行内元素当前只需要宽高或者其他上下内边距等生效,但是要一行显示多个元素时候,选择转行内块.
总而言之,最主要的是让行内元素宽高等生效,再考虑是否一行显示;间隙那些不用考虑因为可以依靠margin:0等属性值进行控制
