作者：往事不可味nd | 来源：互联网 | 2018-03-01 10:22
HTML标记一般分为块标记和行内标记两种类型，它们也称块元素和行内元素。块元素每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。并且块级元素容器可以容纳多个嵌套的块级标签或者行内标签。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<
HTML标记一般分为块标记和行内标记两种类型，它们也称块元素和行内元素。
块元素
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。并且块级元素容器可以容纳多个嵌套的块级标签或者行内标签。常见的块元素有
~、
、
、
、、- 等，其中
标记是网页制作中最常用的块元素。
行内元素
行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构的样式。行内元素不能嵌套块级标签，只能嵌套其他的行内标签。常见的行内元素有、、、、、、、、、等，其中标记是最常用的行内元素。
1 2 3 4 5 6 7 8 我是一个p
9 我是一个span10 我是一个strong11 12
inline-block属性
再来看看inline-block值，字面意思是行内块级元素，从最开始的介绍得知行内元素的宽高只能靠自身的内容来支撑，这里先给span标签设置宽高
span {width: 200px;height: 100px;background-color: red;
}从浏览器的运行结果来看，给span设置的宽高并没有起到任何的作用，现在给span设置下display属性inline-block看看
span {width: 200px;height: 100px;background-color: red;display: inline-block;
}none属性
可以看到设置的宽高都起作用了，有了块级元素的假象，不过这里的span标签还是一个行内元素。有时候，我们需要暂时性的隐藏页面中的元素，这时就可以设置元素的display属性为none，例如需要隐藏页面中的p元素
p {display: none;
}需要注意的是，CSS中的visibility属性也可以控制页面元素的显示与否
p {visibility: hidden;
}通过浏览器的显示结果可以很容易得出下面的结论
display: none;的设置是直接把当前标签从页面中直接移除了，不影响页面的布局，而visibility: hidden这个设置只是表示元素在页面上不显示，但还是占用页面的空间。
以上就是HTML中块标记和行内标记的介绍的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号