box-sizing
定义计算一个元素的总高度和总宽度.
属性值
- content-box 默认值,width= 内容宽度,height=内容的高度
- border-box 宽度和高度包含内容,内边距和边框 width=border+padding+内容宽度, height=border+padding+内容高度
.box{
width: 500px;
height: 180px;
border: 3px dotted grey;
border-radius: 8px;
padding: 15px 20px;
/*width: 100%;*/
box-sizing: border-box;
}
box-shdow
给元素设置阴影
值依次是 x轴偏移量 y轴偏移量 [模糊半径] [扩散半径] 阴影颜色
box-shadow: 5px 5px 5px grey
text-shadow
为文字添加阴影
值依次是 x轴偏移量 y轴偏移量 [模糊半径] 阴影颜色
text-shadow: text-shadow: 5px 5px 5px black;
position
用于指定一个元素在页面中的定位方式
值
- static 默认值正常布局,此时top.right,bottom,left,z-index无效
- relative 相对定位,属性值为relative(相对定位) 的元素在不设置top、right、bottom、left这些属性时，其自身在文档中的定位效果与static并无区别，但加上top、right、bottom、left这些属性后，便会相对于自身在常规流中的位置进行定位
- absolute 绝对定位,与relative（相对定位）之间的区别是：relative（相对定位）并没有脱离文档流，而absolute（绝对定位）脱离了文档流；relative（相对定位）相对于自身在常规流中的位置进行偏移定位，而absolute（绝对定位）相对于离自身最近的定位祖先元素的位置进行偏移定位
- fixed 固定定位,absolute（绝对定位）相对于定位祖先元素进行偏移定位，而fixed（固定定位）相对于窗口进行偏移定位；absolute（绝对定位）的定位祖先元素可以是相对定位的元素，而fixed（固定定位）的定位祖先元素只能是窗口
- sticky 粘性定位,类似relative和fixed的结合，当元素设置position属性为sticky时，如果top、right、bottom、left四个属性都不设置具体值，sticky（粘性定位）不会生效，其表现效果与static一致3。
当在top、right、bottom、left四个属性中至少设置一个具体值时，元素具备两种状态 — 类似relative（相对定位状态）和类似fixed（固定定位状态）。以top:10px为例 ：当元素相对于窗口顶部的距离大于10px时，元素处于类似relative（相对定位状态），一旦元素相对于窗口顶部的距离小于或等于10px时，元素立马切换到类似fixed（固定定位状态)
writing-mode
定义文本水平或垂直排列
值
- vertical-rl 内容方向从上到下从右到左
- vertical-lr 内容方向从上到下从左到右
- horizontal-tb 默认值 从左到右,从上到下
