css中的display属性(行内元素和块级元素)

Doyle

我们常用的display属性值有:

inline
block
inline-block
none

把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留。

我们最关心的还是display:inline、display:block和display:inline-block的区别:

inline特性
内联对象inline给它设置属性height和width是没有用的,致使它变宽变大的
原因是:
它实际宽度为:内部元素的宽+2*(padding+border+margin)
inline对象不单独占一行。

block特性
而块对象block是可以设置宽高的,但是它的实际宽高是:width+2*(padding+border+margin)
block元素单独占一行。

然而,当我们即需要div有宽高,又不希望它独占一行怎么办?

inline-block特性
这个时候我们就需要使用inline-block了:
因为inline-block既具有block的宽高特性又具有inline的同行元素特性。

行内元素特点

1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

块级元素特点

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。

元素分类(关于这点我还有些问题,暂且放上来,慢慢修改,非常欢迎纠正)

HTML中的标签元素大体被分为三种不同类型:块状元素,内联元素和内联块状元素

常见的块状元素有:

<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,
<address>,<blockquote>,<form>

常见的内联元素有:

<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,
<img>,<input>,<select>,<textarea>,<button>

有类特殊的元素:如img|input|select|textarea|button|label等,他们被称为可置换元素(Replaced element)。他们区别一般inline元素(相对而言,称non-replaced element)是:这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。

margin在块级元素下,他的性能可以完全体现,上下左右任你设定。

margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。

阅读 4.8k

Doyle
linuxer vimer

前端, angular, vue

844 声望
16 粉丝
0 条评论

前端, angular, vue

844 声望
16 粉丝
文章目录
宣传栏