![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
顺其惺忪
爱好:划水摸鱼
展开
-
CSS3基础(三)
缩放 scaleX(x):将元素在水平方向上进行缩放 scaleY(y):垂直方向 scale(x;y) 缩放单位采用数字,>1放大,<1缩小 倾斜 skewX(x):将元素在水平方向上进行倾斜 skewY(y):垂直方向 skew(x;y) 参数是角度deg 3D旋转 rotateX(角度) rotateY(角度) rotate(角度) 左手法则确定3d旋转的方向性,大拇指方向为正方向 3D变形透...原创 2021-07-30 21:40:01 · 60 阅读 · 0 评论 -
CSS3基础(二)
CSS3渐变样式 线性渐变 background: linear-gradient (方向,颜色1,颜色2...); 指定方向 to right / 30deg(30°) 默认为上1下2 径向渐变 background: radial-gradient(位置,类型,颜色1,颜色2); 例如:radial-grandient(at 20% 50%,red,blue); 重复渐变 background-image: repeating - 线性渐变或径向渐变 渐原创 2021-07-30 21:34:45 · 58 阅读 · 0 评论 -
CSS3基础(一)
CSS新增选择器 属性选择器 [attr ^= "val"]以val开始 [attr $= "val"]以val结束 [attr *="val"]包含val 层级选择器 子级选择器 A>B 可以只针对下一级标签,避免后代选择器的盲目扩展 兄弟选择器 A+B 只限于后一个标签 同辈选择器 A~B 包含后面所有的指定标签(A~*为全部标签) 伪选择器 伪选择器内部原创 2021-07-30 21:28:21 · 46 阅读 · 0 评论 -
CSS布局
常见布局方式和布局技巧表格布局优点:结构自适应缺点:维护不便,性能差,不支持搜索引擎DIV+CSS布局特点:符合W3C标准,结构和外观分离,便于开发维护,支持搜索引擎水平对齐布局注意事项:普通块元素水平对齐,必须设置宽度,加上margin:10px auto;绝对定位块元素水平对齐,left和right要保持相同垂直对齐布局注意事项:普通块元素垂直居中 display: table-cell;vertical-align:middle;定位块元素垂直居中,原创 2021-07-27 08:29:19 · 64 阅读 · 0 评论 -
CSS基础(三)
定位布局 position默认值 static相对定位 relative 参考点:元素自己原来位置 偏移设置:top,left,right,bottom 实际应用:微调位置,和绝对定位配合,作为绝对定位的参考基准点绝对定位 absolute(脱离文档标准流,宽度收缩,需要指定宽度) 偏移设置:同上 参考点:距离最近的具有定位特性的祖父元素,如果没有则以body为基准固定定位 fixed(脱标) ...原创 2021-07-21 21:04:03 · 62 阅读 · 0 评论 -
CSS基础(二)
CSS盒子模型应用 基本构成: padding 内边距(盒子有指定宽高,撑大盒子导致盒子实际占据的空间大于盒子的理论宽高) border 边框(导致盒子实际占据的空间大于盒子的理论宽高) border:1px solid #fff; margin 外边距(设置宽度时不会影响,不设置会影响) content 内容 padding,border-width,margin: 上 右 下 左; 上 左右 下; .原创 2021-07-20 21:14:10 · 45 阅读 · 0 评论 -
CSS基础(一)
含义与概述(特性) CSS:层叠样式表(Cascading Style Sheet) 特性: 内容和表现分离 使页面布局灵活 减少代码量,加快加载网页速度 利于SEO 语法 基本语法结构 选择器{ 样式声明1; 样式声明2; ....} 样式表类型 行内样式 使用style属性引入CSS样式 <标签名 style="样式声明1..原创 2021-07-19 20:45:35 · 49 阅读 · 0 评论