浙江龙网

  1. 首页 > 生活百科 > >

常用CSS样式属性( 三 )

生活百科

<input>box-shadow元素阴影，五个值：X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径、颜色box-shadow: 10px 5px 5px 2px black;object-fit<img> 、 <video>的内容布局缩放方式，常用于图片的缩放 。属性值同background-positioncover：等比缩放填满区域，图片可能显示不全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-spacingtext-shadow文字阴影text-transform控制文本的大小写其他visibility元素可见性，可以隐藏元素而不影响布局cursor光标样式

a元素、h1-h6标题元素不能隐式继承字体样式，是因为他们有浏览器内置的默认样式，需要显示设置继承 。
02、如何居中对齐？2.1、水平居中（4）
常用CSS样式属性

文章插图
方法描述/示例行内内容：text-align:centertext-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样式属性

文章插图
方法描述/示例单行内容：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;}

推荐阅读


上一篇：在CentOS7下安装Oracle11教程

下一篇：Ubuntu 下安装 redis 并且设置远程登陆和密码