<input>
box-shadow元素阴影,五个值:X 轴偏移量
、Y 轴偏移量
、模糊半径
、扩散半径
、颜色
box-shadow: 10px 5px 5px 2px black;
object-fit<img>
、 <video>
的内容布局缩放方式,常用于图片的缩放 。属性值同background-position
cover:等比缩放填满区域,图片可能显示不全contain:等比缩放完全显示,区域可能覆盖不全clip-path裁剪元素,被裁剪部分隐藏 。支持多种裁剪方法 , 支持路径数据pathclip-path: circle(50%)
direction设置文本、表列水平排列的方向 。ltr 从左到右, rtl 从右到左all将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值,或继承值 。.class{ all: unset; }
filter对元素进行多种滤镜:灰度、模糊、亮度、饱和度、色调、反色等filter: blur(5px);
模糊filter: grayscale(100%);
纪念日黑白灰度mask遮罩/蒙版,用来给元素实现各种遮罩、裁剪效果-webkit-mask: url('/res/qq-128.png');
会被隐式继承的样式文字类的样式大多支持默认继承 。
属性描述文字相关属性color字体颜色font字体font
相关的样式,包括font-family、font-size、font-weight、font-style等text-indent文本缩进,块级元素继承line-height行高text-align水平行内元素居中word-spacing字间距属性,以及letter-spacing
text-shadow文字阴影text-transform控制文本的大小写其他visibility元素可见性,可以隐藏元素而不影响布局cursor光标样式
a元素、h1-h6标题元素不能隐式继承字体样式,是因为他们有浏览器内置的默认样式,需要显示设置继承 。02、如何居中对齐?2.1、水平居中(4)
![常用CSS样式属性](http://img.zhejianglong.com/231019/104932HD-6.png)
文章插图
方法描述/示例行内内容:
text-align:center
text-align: center 可以让行内内容水平居中,常用于行内元素、文字的水平居中块元素:margin: 0 auto;
边距填充让块元素水平居中对齐,设置左右外边距自动分配position
定位+位置计算=居中 绝对定位absolute
:需要计算自身宽度left: 50%; margin-left: -100px;
相对定位relative
+ 变换移动:left: 50%; transform: translateX(-50%);
flex布局的 justify-content 水平居中让flex
容器内的元素水平居中:justify-content: center;
注意:变换函数translateX(50%)
的参数50%
是相对于自身尺寸,而不是父元素 , 这里和其他百分比%
的计算不同!
/* 水平居中:块元素左右margin均分 */p {width: max-content; margin: 0 auto;}/* 水平居中:绝对定位 */.hcenter {width: 100px;position: absolute;left: 50%;margin-left: -50px;}/* 水平居中齐:flex布局,居中排列flex项 */.fhcenter {display: flex;justify-content: center;justify-content: space-around; /* 两端对齐 */}
2.2、垂直居中(4)![常用CSS样式属性](http://img.zhejianglong.com/231019/1049322095-7.png)
文章插图
方法描述/示例单行内容:
line-height = 行高
设置行高等于元素高度,一般用于单行的文本内容、行内元素 。flex
布局的 align-items 垂直居中 让flex
容器内的元素垂直居中 align-items: center;
在flex
布局模式下 , 子元素用margin
也可以居中:margin: auto 0;
vertical-align : middle 互相居中vertical-align
属性可用于指定行内元素(inline)、表格的单元格(table-cell)的垂直对齐方式 。常用于图片、表格、文本、表单的互相居中对齐,?注意是互相对齐,不是基于父元素 。- 直接使用vertical-align: middle;
,可以让行内元素相互居中对齐 。- 配合line-height
使用 , 让子元素基于父元素垂直居中- 配合display: table-cell;
使用,让任何元素都可以垂直居中,包括块元素- 利用伪元素::before
让行内元素居中position
定位+位置计算=居中基本使用和上面水平居中的定位技术类似,相对定位,然后计算top
距离- position: relative; top:calc(50% - 10px);
,需计算元素具体高度 。- position: relative; top: 50%; transform: translateY(-50%);
/* 垂直对齐:flex布局,居中排列flex项 */.fvcenter{height: 100px; background-color: antiquewhite;display: flex;align-items: center;}/* 垂直对齐:vertical-align 结合行高 line-height */.vcenter{background-color: antiquewhite;height: 100px;line-height: 100px;}.vcenter *{vertical-align: middle;}/* 垂直对齐:vertical-align 结合行高 table-cell 布局 */.vcenter{background-color: antiquewhite;height: 100px;display: table-cell;vertical-align: middle;}.vcenter *{vertical-align: middle;}/* 垂直居中:给行内元素添加伪元素,让伪元素垂直居中 */.vmid::before{content: "";display: inline-block;height: 100%;vertical-align: middle;}
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 现代 CSS 指南 -- at-rule 规则扫盲
- CSS基础知识筑基
- CSS 动画一站式指南
- SpringBoot 常用注解的原理和使用
- 弹性分布式数据集 RDD及常用算子
- 为什么CSS中的calc函数可能会不生效?
- pytorch、paddlepaddle等环境搭建 深度学习环境搭建常用网址、conda/pip命令行整理
- day03-CSS
- ES集群检查常用命令
- CSS 渐变锯齿消失术