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>
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
