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 默认值 从左到右,从上到下
相关推荐
gnip1 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫2 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel3 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼3 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手7 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法7 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku7 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode7 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu7 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu7 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript