关于学习前端时,遇到的一些很容易被忽略的知识点。笔记什么,一切都是方便自己。
常见块级元素:div p form ul ol li 等;
常见的行内元素:span strong em;
区别
- 块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行。
<div className="test1">这是测试DIV!</div>
<p className="test2">这是测试P!</p>
<span className="test3">这是测试SPAN!</span>
<strong className="test4">这是测试STRONG!</strong>
- 块级元素可以设置width和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行。
.test1 {
background-color: deepskyblue;
height: 40px;
}
.test2 {
background-color: red;
width: 600px;
}
.test3 {
background-color: greenyellow;
height: 40px;
width: 600px;
}
- 块级元素可以设置margin和padding属性,行内元素水平方向的padding、margin如padding-left、margin-right可以产生边距效果,但是竖直方向的margin-top、padding-bottom不会产生边距效果(水平方向有效,垂直方向无效)。
.test2 {
background-color: deepskyblue;
height: 40px;
margin: 35px;
padding: 30px;
}
.test3 {
background-color: greenyellow;
height: 40px;
width: 600px;
margin: 35px;
padding: 30px;
}
PS:给内联元素设置背景与内边距时,背景可以向元素上下延伸,视觉效果就是与前面的行重叠,但是行高没有改变,因此该行内元素的内容范围是增大了,不过只是表象,对周围元素无任何影响。(对于为什么会出现这种现象,容我私下想想。-_-|||)
- 其他:
块状元素:总是从新行开始,宽度默认是容器的100%,可以容纳内联元素和其他块状元素。
内联元素:和相邻行内元素在一行上,宽度默认是它本身内容的宽度,只能容纳文本或者其他内联元素。
块级元素和行内元素的相关属性:display
display是CSS的定位属性,它规定元素应该生成的框的类型。一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
常用的值:
none:此元素不会被显示;
block:此元素将显示为块级元素,此元素前后会带有换行符;
inline:默认,此元素会被显示为内联元素,此元素前后没有换行符;
inline-block:行内块元素。
等等。。。
总结:block(块级),inline(内联)和inline-block(行内块)
- display: block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。 - display: inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。 - display: inline
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
参考文章: