Open wang1dot0 opened 4 years ago
wang1dot0
commented
4 years ago 如果半径太大，则每个圆角都弯曲成最大半径。会把最短的两边变为半圆形。 border-radius: 30px / 10px; 表示横向弯曲30px，纵向弯曲10px。 border-image-source: border-image-slice: border-image-width: 数字值是border-width的倍数, auto值使用border-image-slice和border-width结果。 border-image-outset: 数字值是border-width的倍数 border-image-repeat: [ stretch | repeat | round | space ] {1, 2} border-image: source | slice | /width | /outset | repeat
wang1dot0
commented
4 years ago 与border区别
默认值invert： 对轮廓可见部分中的所有像素进行“颜色转换”。 轮廓在行内元素有多次换行时有可能会合并，所以，不一定是矩形。
wang1dot0
commented
4 years ago 默认为0
与内边距一样，百分数是相对于父元素的内容区宽度计算。
但是，定位元素、弹性布局中的元素和栅格布局中的元素，其上下外边距百分数是相对格式化上下文的高度计算。
外边距折叠
相邻的两个上下外边距会折叠为其中一个最大的外边距。根据CSS规范，折叠时，小的被折叠的外边距根本不存在了，被重置为0。
负外边距
wang1dot0
commented
4 years ago 默认值border-box， 默认延伸到边框外边界。背景始终绘制到边框可见部分的背后。
默认位置相对元素内边距的外边界。
一般不超过两个，一个指定横向位置，一个指定纵向位置。 如果只指定一个，那么另一个假定center。如果为right right 则忽略。
background-position: right 33% top 30px;
前后顺序无所谓，但是不能省略关键字。
默认值 padding-box
space 会根据需要覆盖一个轴或者两个轴的位置。透过space排列的背景图间隙，可以看到元素的背景色或父辈元素的背景。 round 会缩放图像（自动调整宽高），并且不覆盖background-position的值。 怪异现象： 为了放下整个图像，会调整图像的尺寸，但是并不移动图像，让图像紧靠着背景区域的边界。因此，为了保证重复时不剪裁背景图，源图像只能放在角落。放在别的地方会剪裁。
[scroll | fixed | local]
[length | percentage | auto]{1,2} | cover | contain 默认值auto 参数为两个值时，第一个为横向值，第二个为纵向值。 百分数： 相对于背景定位区域计算的，即background-origin定义的区域。 不能为负数 auto值与置换元素的height|width的auto值类似。
始终相对于background-origin计算。所以，contain也会出现剪切的情况。
默认值为repeat，记得禁止。 0
这些值的顺序没有严格要求，不过，有三个限制：
wang1dot0
commented
4 years ago 特点是没有固定尺寸，如果background-size为auto，渐变的尺寸是100%。 默认情况下，渐变尺寸铺满整个背景定位区域。 默认方向是to bottom 即 180deg， 而 0deg 等价于 to top。
box-sizing
横向格式化
七个属性：
margin-left,border-left,padding-left,width,margin-right,border-right,padding-right. 默认盒模型下，块级元素的宽度等于父元素的内容区宽度 其中只有margin-left,width和margin-right可以设置auto。如果其中一个设置为auto, 另外两个为固定值，那么auto的值要满足父元素的宽度。 如果三个均为固定值（过约束），且不满足父元素的宽度，那么,margin-right会被强制为auto。margin-right和margin-left均设置为auto，width固定。 那么，元素在父元素中居中显示。width设置为auto, 另一个外边距固定。那么，auto的那个外边距为0。auto。那么，width占满父元素，外边距为0。跟默认情况类似。负外边距
依然满足，块级元素的七个宽度属性相加等于父元素的宽度。 倘若元素的尺寸出现了过约束，右外边距就要被重置为满足所有算式所需的任何值。 如果左外边距为负值，且绝对值足够大。段落会从父元素溢出，且还从浏览器窗口的左边溢出了。
百分数
width,margin和padding都可设置为百分数。但是，border不适用。置换元素
块级置换元素的处理，与前面类似。例外之处： width为auto时，置换元素的width等于内容自身的宽度。 如果设置了width，没有设置height，则图片会同比例缩放。
纵向格式化
元素的内容决定了元素的默认高度。 七个属性的值加在一起必须等于块级框的容纳块的高度。 如果
margin-top与margin-bottom都设置为auto，则自动计算为0。百分数高度
相对于框体的容纳块的高度而言的。 如果容纳块的高度没有明确声明，则百分数高度被重置为auto。
自动调整高度
如果height：auto。容纳块的高度刚好容纳里面的内容。 框体的高度等于第一个子元素的上边框外侧到最后一个元素的下边框外侧 而框体如果设置了padding/border，则包含margin
折叠纵向外边距
相邻的纵向外边距会折叠。 负外边距也会折叠，如两个相邻的外边距都为负值，浏览器取绝对值较大的一个。然后把外边距加起来。
列表项目
前面有记号，数字或小圆点，可以通过
list-style-position属性调整其位置在它的外部或者内部。 不管如何调整列表的样式，记号与内容区边界之间的距离始终不变。行内元素
常见的span或者a等非置换元素，以及置换元素：图像
匿名文本： 不再任何行内元素的字符串
字体框： 由字体定义
内容区： 内容区可以是各字符的字体框连在一起构成的方框。
行距： font-size 与 line-height 之差。 只有非置换元素有行距
行内框： 内容区加行距后得到的方框。行内框等于line-height。对置换元素，行内框高度等于内容区的高度
行框：过一行中各行内框最高点和最低点的方框。
行内框在一行中纵向对齐方式由vertical-align决定。
box-decoration-break: slice | clone