display属性:实现块级元素和行内元素的转换
display:block
display:inline
display:none
display:inline-block
行内元素的空隙与空隙的解决办法
内联元素有空隙是因为标签之间有空格和换行,解决办法有两种(1.手动挨着2.外面嵌套
一个父元素div,将父元素的字体大小设置为0,而需要设置的内联元素再重新设置字体
大小)
3种元素之间的区别
-
行内元素:
(1)设置高宽无效 (2)对margin仅左右有效,上下无效,padding上下左右都有效 -
块级元素:
(1)设置高宽有效(2)margin和padding对其上下左右都有效(3)自动换行 -
行内块元素
(1)设置高宽有效(2)不能自动换行,默认排列方式是从左到右,设置了浮动之后的元素就有行内块元素的性质
demo
<style>
*{margin:0;padding:0;}
.one,.two,.three,.four{border:1px black solid;width:200px;padding:40px;margin:0px auto;}
.one{background-color: #3c3c3c;font:700 20px;color:white;}
</style>
</head>
<body>
<div calss="container">
<div class="one">前端课程排列</div>
<div class="two">
<p>HTML+CSS基础课程</p>
<span>4545454已学</span>
</div>
<div class="three">
<p>HTML+CSS基础课程</p>
<span>5646546已学</span>
</div>
<div class="four">
<p>HTML+CSS基础课程</p>
<span>7454564已学</span>
</div>
</div>
</body>