CSS核心使用

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;
}
1
2
3
4
5
6
7
8
9

box-shdow

给元素设置阴影
值依次是 x轴偏移量 y轴偏移量 [模糊半径] [扩散半径] 阴影颜色

box-shadow: 5px 5px 5px grey
1

text-shadow

为文字添加阴影
值依次是 x轴偏移量 y轴偏移量 [模糊半径] 阴影颜色

text-shadow: text-shadow: 5px 5px 5px black;
1

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 默认值 从左到右,从上到下