CSS核心使用

CSS核心使用

box-sizing

定义计算一个元素的总高度和总宽度.

属性值

  • content-box 默认值,width= 内容宽度,height=内容的高度
  • border-box 宽度和高度包含内容,内边距和边框 width=border+padding+内容宽度, height=border+padding+内容高度
css 复制代码
.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轴偏移量 [模糊半径] [扩散半径] 阴影颜色

html 复制代码
box-shadow: 5px 5px 5px grey

text-shadow

为文字添加阴影

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

html 复制代码
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 默认值 从左到右,从上到下
相关推荐
xiaopengbc2 分钟前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君7 分钟前
React中台系统如何嵌入到业务系统中
前端
Slice_cy8 分钟前
不定高虚拟列表
前端
前端AK君17 分钟前
React组件库如何在vue项目中使用
前端
Moonbit27 分钟前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud30 分钟前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构
li357440 分钟前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
菜市口的跳脚长颌44 分钟前
Web3 基础
前端
快乐是Happy44 分钟前
分享一个非常实用的防止重复提交操作
前端·javascript
王蛋1111 小时前
前端工作问题或知识记录
前端·npm·node.js