display属性探索
2020-12-30 本文已影响0人
你好自己
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myDiv</title>
<link rel="stylesheet" type="text/css" href="mydiv.css"/>
</head>
<body>
<div class="container">
<span>行内元素1</span>
<span>行内元素2</span>
<span>行内元素3</span>
<span>行内元素4</span>
<span>行内元素5</span>
<div class="myDiv1">行内块状元素1</div>
<div class="myDiv2">行内块状元素2</div>
<div class="myDiv3">块状元素1</div>
<div class="myDiv4">块状元素2</div>
</div>
</body>
</html>
css代码
.container{
width: 600px;
height: 600px;
border: 1px solid green;
color: #000000;
}
span,.myDiv1,.myDiv2,.myDiv3,.myDiv4{
/* 此时span为inline; */
width: 200px;
height:100px;
border: 1px solid red;
}
浏览器加载如图:
截屏2020-12-30 上午8.53.21.png
1 通过浏览器打开,你会发现,在块级元素container 内,
行内元素的特点:
- 设置宽高无效
- 不自动换行
- 默认排列从左到右。
- 设置margin左右有效，上下无效
- 设置padding上下左右都有效
- 但会撑大空间
- 常见的标签为span b i sub sup做出平方效果
- 行内元素可通过 display: inline-block; 转换为 行内块级元素
块级元素的特点:
- 设置宽高有效
- 对margin、padding上下左右都有效
- 自动换行,一行1个,从上到下排列
2将行内元素转为行内块级元素,
css代码
span{
display: inline-block;
}
浏览器加载如图:
截屏2020-12-30 上午10.11.13.png
此时行内元素span 转为 行内块级元素
其特性如下:
- 设置宽高有效
- 不自动换行
3 将行内元素转为块级元素
span{
display: block;
}
浏览器加载如图:
块级.png
此时行内元素span也是块级元素起具有块级元素的特点
4以上是行内元素转为 行内块级元素 和 块级元素.
那是否可以将块级元素转为 行内元素或者 行内块级元素 转为 行内元素.
.myDiv1,.myDiv2{
display:inline;
}
浏览器加载如图:
块级1.png
5 在以上测试时发现 行内元素 span之间有诡异的3em的间隔,解决办法如下:
- 行内元素拼接起来,不要换行. 这也是行内元素的通常做法.
- 在js里拼接好字符串后再通过innerHtml方法显示出来
- 换行符号的宽度是由所在标签的字体大小有关，以上面的代码为例，span的font-size越大，块1与块2之间的空白就越宽，反之则越小,所以将字体设置为0即可
- 将margin-right: -3em; 这个比较麻烦 当行内元素多时.
