行内属性什么意思?

藏色散人
Lepaskan: 2020-07-02 10:43:30
asal
3341 orang telah melayarinya

行内属性指的是行内style属性,而style属性就是规定元素的行内样式,并且因为行内元素同样具有盒子模型,所以可以给行内元素设置不同的css属性,比如宽度、高度、内边距和外边距等。

行内属性什么意思?

style 属性规定元素的行内样式(inline style)

行内元素属性设置

行内元素同样具有盒子模型

行内元素同样具有盒子模型,那么就可以给行内元素设置不同的 css 属性,比如宽度、高度、内边距和外边距,那么行内元素是否需要设置这些属性呢?

行内元素设置宽度和高度

给行内元素设置宽度和高度是无效的

.span1 { height: 200px; width: 200px; } 行内元素设置宽度和高度
Salin selepas log masuk

此时我们通过观察页面以及盒子的渲染出来的模型,可以发现:

即使给行内元素设置了宽度和高度,行内元素所表现出来的具体的宽度和高度就是内容本身的宽度和高度,所以给行内元素设置宽和高是无效的

行内元素设置 padding 和 margin

将影响左右,但不影响上下

行内元素设置 padding 和 margin 上下具体值表现

行内元素设置边距上下属性
.span2 { padding-top: 20px; padding-bottom: 30px; margin-top: 40px; margin-bottom: 50px; }
Salin selepas log masuk

从上面的图我们可以发现,我们给行内元素设置了 padding-top、padding-bottom、margin-top、margin-bottom 属性,但是这些属性并没有发生具体的作用,在效果上看貌似是被撑开了,但是并没有对其他的元素造成影响。

行内元素设置 padding 和 margin 左右具体值表现

会发生效果

行内元素设置边距左右属性
.span3 { padding-left: 100px; padding-right: 200px; margin-left: 300px; margin-right: 400px; }
Salin selepas log masuk

从上图可以看出,如果我们给行内元素设置 padding-left,padding-right,margin-left,margin-right 属性 将会影响该行内元素的位置

更多相关知识,请访问PHP中文网

Atas ialah kandungan terperinci 行内属性什么意思?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!