2. initial和unset在CSS中的含义 initial:将CSS属性重置为其默认值。这意味着,如果你将width设置为initial,那么它将采用浏览器或CSS规范为该属性定义的初始值,通常是auto。 unset:将CSS属性重置为其自然值。对于继承属性(如color、font-family等),unset关键字会导致元素从其父元素继承该属性的值。对于非继承属性(如...
height: initial; height: unset; 2. width (1)设置元素的宽度: width 属性 ① 适用区域 内容区: 默认情况下,它设置内容区域的宽度。 不包括: 在内容区 外面可以增加内边距、边框和外边距。 修改适用区域: 但是如果 box-sizing 设置为 border-box,它设置边框区域的宽度。 ② 适用元素 所有元素,除了以下的元...
不过margin-box没有应用场景,padding-box的应用场景渐弱,只有Firefox 50之前支持,后面的版本不再支持,现在可以设置的属性值是unset/initial/inherit/content-box/border-box。 content-box对应的是标准盒模型,width:100%作用在content层,也就是我们在开发时采用的默认模式。 border-box对应的是怪异盒模型,也叫做IE盒模...
事实上box-sizing的各个值对应了元素的四层结构,margin-box, border-box, padding-box, content-box,这四个值指元素宽度设置100%时的作用域.不过margin-box没有应用场景,padding-box的应用场景渐弱,只有Firefox 50之前支持,后面的版本不再支持,现在可以设置的属性值是unset, initial...
/* <percentage> value */ width: 75%; /* Keyword values */ width: max-content; width: min-content; width: fit-content; width: fit-content(20em); width: auto; width: stretch; /* Global values */ width: inherit; width: initial; width: revert; width: revert-layer; width: unset; ...
border-image-width: unset; 应用范围 border-image-slice属性可以应用在所有的元素上,除了border-collapse属性被设置为collapse的内部表格元素。 在线演示 这个demo使用下面的图像作为边框图像: 边框图像宽度和高度都是90像素,由9个小圆点组成。元素的border-image-slice属性设为30,这样所有的切片都是一个小圆点。下面...
values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1px; outline-width: 0.1em; /* Global values */ outline-width: inherit; outline-width: initial; outline-width: revert; outline-width: revert-layer; outline-width: unset; ...
; /* vertical | horizontal */ border-width: 2px 1.5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* Global keywords */ border-width: inherit; border-width: initial; border-width: unset;...
Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fit-content(20em); max-width: stretch; /* Global values */ max-width: inherit; max-width: initial; max-width: revert; max-width: revert-layer; max-width: unset...
/* <length> value */min-width:3.5em;/* <percentage> value */min-width:10%;/* Keyword values */min-width:max-content;min-width:min-content;min-width:fit-content;min-width:fill-available;/* Global values */min-width:inherit;min-width:initial;min-width:unset; ...