html中inherit什么意思

html中inherit什么意思,第1张

inherit 指它将继承母体要素的可视性设置。

值 inherit 为缺省值。这使单元继承父单元的可见性。所以,如果某一段是隐藏的,则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如,段内的 EM 单元被指定为可见,这时如果该段被隐藏,则段内的所有其它内容都将消失,而唯有 EM 单元中的文本是可见的。

拓展资料:css inherit和auto的区别

inherit是继承父类的属性,一般用于字体、颜色、背景等

auto是按情况自适应,一般用于高度、宽度、外边距和内边距等关于长度的属性

现在一般常用的属性都支持inherit,用的不多,auto自适应长度用的比较多。如{ margin:0 auto}加上这个属性的元素只要定义了宽度就会相对于他的父元素自居中。

CSS 中控制横向文字间距的属性有两个,一个是字符与字符之间的间距 letter-spacing. 另一个是词与词之间的间距 word-spacing。二者可接受的属性值均为以下四种:

normal: 默认间距(letter-spacing 默认值为 0,word-spacing 默认值为 0.25em)

initial: 设置为默认间距

inherit: 继承当前元素父元素的属性值

或自定义值(以 px, pt, cm, em 等为单位的值,可为负值).

例子如下:

<!DOCTYPE html>

<html>

<head>

    <title>Example</title>

    <meta charset="utf-8"/>

    <style>

        #word_space_normal {

            word-spacing: normal

        }

        #word_space_inherit {

            word-spacing: inherit

        }

        #word_space_initial {

            word-spacing: initial

        }

        #word_space_custom {

            word-spacing: 20px

        }

        #word_space_negative {

            word-spacing: -10px

        }

        #word_space_chinese {

            word-spacing: -10px

        }

        #letter_space_normal {

            letter-spacing: normal

        }

        #letter_space_inherit {

            letter-spacing: inherit

        }

        #letter_space_initial {

            letter-spacing: initial

        }

        #letter_space_custom {

            letter-spacing: 5px

        }

        #letter_space_negative {

            letter-spacing: -3px

        }

        #letter_space_chinese {

            letter-spacing: -3px

        }

    </style>

</head>

<body>

    <div id="word_space_normal">

        A sentence with normal word spacing.

    </div>

    <div id="word_space_initial">

        A sentence with initial word spacing.

    </div>

    <div id="word_space_custom">

        A sentence with custom defined word spacing.

        <div id="word_space_inherit">

            A sentence with inherited word spacing.

        </div>

    </div>

    <div id="word_space_negative">

        A sentence with negative word spacing.

    </div>

    <div id="word_space_chinese">

        使用 word-spacing 属性的中文。

    </div>

    <hr/>

    <div id="letter_space_normal">

        A sentence with normal letter spacing.

    </div>

    <div id="letter_space_initial">

        A sentence with initial letter spacing.

    </div>

    <div id="letter_space_custom">

        A sentence with custom defined letter spacing.

        <div id="letter_space_inherit">

            A sentence with inherited letter spacing.

        </div>

    </div>

    <div id="letter_space_negative">

        A sentence with negative letter spacing.

    </div>

    <div id="letter_space_chinese">

        使用 letter-space 属性的中文。

    </div>

</body>

</html>

输出为:

可以观察到,word-spacing 属性的设置不影响字母与字母的间距,也不影响中文等词汇之间无须空格的语言的字间距,而 letter-spacing 属性的设置则会同时影响字符间距以及单词间距,且同时作用于所有语言。

行高 line-height:数值 | inherit | normal

字间距 letter-spacing: 数值 | inherit | normal

显示 display:

none: 不显示,使用的场景非常多

block: 把内联标签变成块级标签

inline: 把块级标签变成内联标签

inline-block:变为行间块元素

宽度 width: 长度 | 百分比 | auto

高度 height: 长度 | 百分比 | auto

清除 clear: none | left | right | both

外边距 margin: 上 右 下 左

内边距 padding: 上 右 下 左

定位 position: absolute | relative

超出 overflow: visible | hidden | scroll auto

浮动 float: left | right | none在页面布局的时候用的最多

fixed 一般用来写网页顶端的固定导航条,或者两侧的菜单。

absolute与relative 这两者一般配合使用,用于调整div之间的相对位置

opacity 0-1 表示透明度

颜色 color: 数值

大小 font-size: 数值

字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

样式 font-style: oblique(偏斜体) italic(斜体) normal(正常)

粗细 font-weight: bold(粗体) lighter(细体) normal(正常)

背景 background: transparent/透视背景*/

颜色 background-color: 数值

图片 background-image: url() | none

重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y

大小写 text-transform: capitalize | uppercase | lowercase | none

修饰 text-decoration: underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)

排列 text-align: justify | left | right | center

缩进 text-indent: 数值 | inherit

阴影 text-shadow:数值

边框样式 border-style: dotted(点线) dashed(虚线) soliddouble(双线) groove(槽线) ridge(脊状) inset(凹陷) outset

边框宽度 border-width:

边框颜色 border-color: top值 right值 bottom值 left值

类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

位置 list-style-position: outside | inside

图像 list-style-image: URL

简写 list-style:目录样式类型 | 目录样式位置 | url

margin-top:10px(上边界)

margin-right:10px(右边界)

margin-bottom:10px(下边界值)

margin-left:10px(左边界值)

margin-inside:

margin-outside:

padding-top:10px/ 上边框留空白 /

padding-right:10px/ 右边框留空白 /

padding-bottom:10px/ 下边框留空白 /

padding-left:10px/ 左边框留空白 /

vertical-align:sub/ 下标字 /

vertical-align:super/ 上标字 /

vertical-align:top/ 垂直向上对齐 /

vertical-align:bottom/ 垂直向下对齐 /

vertical-align:middle/ 垂直居中对齐 /

vertical-align:text-top/ 文字垂直向上对齐 /

vertical-align:text-bottom/ 文字垂直向下对齐 /

a / 所有超链接 /

a:link / 超链接文字格式 /

a:visited / 浏览过的链接文字格式 /

a:active / 按下链接的格式 /

a:hover / 鼠标转到链接 /

光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize

/ 也可以自定义 /

cursor: hand/ 链接手指 /

cursor: crosshair / 十字体 /

cursor: s-resize / 箭头朝下 /

cursor: move / 十字箭头, 朝右/

cursor: help / 加一问号 /

cursor: w-resize / 箭头朝左 /

cursor: n-resize / 箭头朝上 /

cursor: ne-resize / 箭头朝右上 /

cursor: nw-resize / 箭头朝左上 /

cursor: text / 文字型/

cursor: se-resize / 箭头斜右下 /

cursor: sw-resize / 箭头斜左下/

cursor: wait / 漏斗


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7433679.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-05
下一篇2023-04-05

发表评论

登录后才能评论

评论列表(0条)

    保存