1.神奇的display属性
disply属性用于控制元素如何显示(内联/块级)
(1)当属性值为block时,会将元素以块级元素的方式显示
(2)当属性值为inline时,会将元素以内联元素的方式显示
(3)当属性值为inline-block时,会将元素以内联块级元素的方式显示,会同时具有这两个显示特性【给div设置自身宽高,就可以看出其也具有块级元素的特性了(因为,只有给块级元素设置宽高才有效果。对于给内联元素设置自身宽高是不生效的,没有作用,内联元素的大小,取决于内容的多少 即display: inline’, the width, height, margin-top, margin-bottom, (margin左右是有效,上下左右padding 是有效的噢!!)
and float properties have no effect.)】
(4)当属性值为none时,元素将会被隐藏
例如:
.box1{ display:inline;}
.box2{ display:block;}
<div class="box1">我是一个div块级元素,现在被当成内联元素显示了</div>
<span class="box2">我是一个span内联元素,现在被当成块级元素显示了</span>
大厂面试必考的题目:尤其是关于 display属性使用时的一个技巧性问题
两个span元素之间是有空隙的
但是我们不想要这个间隙 怎么消除呢?
从造成原理上分析:内联元素,主要是对文字进行一些修饰的,
因为文字和文字之间,肯定是有一些间隙的,不能两个文字都粘在一块,影响美观
所以说,内联元素天生在显示的时候,就有一定的间隙
那么这个间隙怎么来的呢,就是空格回车
我们去掉两个元素之间的回车和空格,间隙就没有了
但是,虽然这种方法能解决间隙问题,但是,一般不符合我们写代码格式化的习惯
我们使用另一个办法解决,设置 body {font-size: 0px;}但是文字消失了,因为,box3,box4会继承body的font-size: 0px;
我们在box3,box4 中重新设置一下就好了.box3 {font-size: 14px;} .box4 {font-size: 14px;}
小例子::挺重要的,看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display</title>
<style>
/* .box1 {
background: yellow;
display: inline;
}
.box2 {
background: green;
display: block;
} */
.box3 {
/* display: inline-block; */
border: 1px solid #000;
/* 直接键盘打出w200就会自动提示出现了 width: 200px;*/
width: 200px;
height: 100px;
font-size: 14px;
}
.box4 {
/* display: inline-block; */
/* display: none; */
border: 1px solid #000;
width: 200px;
height: 100px;
font-size: 14px;
}
/* 看到行内元素之间是有一个小间隙的
因为,两个span元素之间是有空隙的*/
/* 但是我们不想要这个间隙 怎么消除呢 ?使用 font-size: */
span {
background: #dd7370;
font-size: 14px;
}
body {
font-size: 0px;
/* 但是文字消失了,因为,box3,box4会继承body的font-size: 0px;
我们在box3,box4 中重新设置一下就好了 */
}
</style>
</head>
<body>
<!-- <div class="box1">华为云</div>
<span class="box2">华为云</span> -->
<div class="box3">华为云1号</div>
<div class="box4">华为云2号</div>
<!-- 两个span元素之间是有空隙的
但是我们不想要这个间隙 怎么消除呢?
从造成原理上分析:内联元素,主要是对文字进行一些修饰的,
因为文字和文字之间,肯定是有一些间隙的,不能两个文字都粘在一块,影响美观
所以说,内联元素天生在显示的时候,就有一定的间隙
那么这个间隙怎么来的呢,就是空格回车
我们去掉两个元素之间的回车和空格,间隙就没有了
但是,虽然这种方法能解决间隙问题,但是,一般不符合我们写代码格式化的习惯
我们使用另一个办法解决,设置 body {font-size: 0px;}但是文字消失了,因为,box3,box4会继承body的font-size: 0px;
我们在box3,box4 中重新设置一下就好了.box3 {font-size: 14px;} .box4 {font-size: 14px;}
-->
<span>span元素1</span>
<span>span元素2</span>
</body>
</html>