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 默认值 从左到右,从上到下
相关推荐
中微子2 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef062 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子3 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则4 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele4 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4534 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友5 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir5 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴5 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子5 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js