CSS教程

CSS_10——display属性(简单记录)

本文主要是介绍CSS_10——display属性(简单记录),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1. display属性

决定一个元素的显示角色

display:block

display.inline

display:none

visibility

(1)display:inline;转换为行内元素

(2)display:block;转换为块状元素

(3)display:inline-block;转换为行内块状元素

1.1 行内元素

  行内元素最常使用的就是span,其他的只在特定功能下使用,修饰字体标签,还有这两个标签可以直接做出平方的效果,而不需要类似移动属性的帮助,很实用。

  行内元素特征:(1)设置宽高无效

         (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间,行内元素尺寸 由内含的内容决定,盒模型中 padding, border 与块级元素并无差异,都是标准的盒模型,但是 margin 却只有水平方向的值,垂直方向并没有起作用。行内元素的水平方向的padding-left,padding-right,margin- left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都 不会产生边距效果。padding设置上下左右都有效,即会撑大空间但是不会产生边距效果。

         (3)不会自动进行换行

1.2 块状元素

  块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。

  块状元素特征:(1)能够识别宽高

         (2)margin和padding的上下左右均对其有效

         (3)可以自动换行

         (4)多个块状元素标签写在一起,默认排列方式为从上至下

1.3 行内块状元素

  行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。

  行内块状元素特征:(1)不自动换行

           (2)能够识别宽高

           (3)默认排列方式为从左到右

  在HTML5中,程序员可以自定义标签,在任意定义标签中,加入display:block;即可,当然也可以是行内或行内块状。

2. 拓展

流程图

image-20210821162911245

css一共有五层,优先级从高到低:

image-20210821162947447

3. 参考

HTML行内元素、块状元素、行内块状元素的区别

这篇关于CSS_10——display属性(简单记录)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!