css
文章平均质量分 91
css基础知识记录
chen__cheng
1.1的n次方
展开
-
纯CSS绘制图形的三种方法
绘制图形第一种方式:使用裁剪可视区的方式显示clip-path该属性使用裁剪方式创建元素的可显示区域,区域内的显示,区域外的不显示。比如:构建一个三角形 <div class="mybox"></div> <style> .mybox { width: 100px; height: 100px; background-color: yellow; clip-path: polygon(0% 0%,1原创 2021-08-17 14:54:22 · 4074 阅读 · 0 评论 -
LESS函数总结
LESS函数总结3.1 String函数系列3.1.1 escape(@string)编码3.1.2 e(@string)转义3.1.3 %(string,arguments...)格式化字符串3.1.4 Replace替换3.2 list函数系列3.2.1 length函数3.2.2 extract函数3.3 Math函数系列3.3.1 ceil3.3.2 floor3.3.3 percentage3.3.4 round3.3.5 sqrt(number)3.3.6 abs(number)3.3.7 po原创 2021-05-20 20:19:28 · 3455 阅读 · 0 评论 -
LESS语言特性总结
LESS语言特性总结2.1变量2.1.1 变量语法2.1.2 变量的作用域2.1.3 字符串插值2.1.4 选择器插值2.1.5 媒体查询定义变量的方式2.1.6 变量之间相互使用2.2 混合2.2.1 继承属性2.2.2 带参数混合2.2.3 隐藏属性继承2.2.4 默认值混合2.2.5 @arguments参数2.2.6 !important2.2.7 扩展运算符`...`2.2.8 模式匹配2.2.9 条件混合2.3 嵌套语法2.3.1 &的用法2.3.1.1 重复引用父选择器2.3.1.2原创 2021-05-20 10:34:39 · 671 阅读 · 0 评论 -
直接使用less.js编译less文件与IDE配置LESS环境实现自动编辑LESS文件生成css文件总结
直接使用less.js编译less文件与IDE配置LESS环境实现自动编辑LESS文件生成css文件总结1.less简介1.1 为什么使用less1.2 什么是less1.3 使用less1.3.1 直接使用less.js编译1.3.2 配置less环境使用编译之后的css文件1.3.2 在VScode中配置less环境1.3.3 在Webstorm中配置less环境1.less简介1.1 为什么使用lesscss是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念,且难以扩展和维护,而LE原创 2021-05-19 13:20:20 · 1070 阅读 · 0 评论 -
CSS3媒体查询总结
CSS3媒体查询总结1. 使用媒体设备2. 设备方向3. 常用特性4. 查询条件媒体查询能在不同条件下使用不同的样式,使页面在不同终端设备下达到不同的渲染效果。从而实现响应式布局的效果。媒体类型说明all所有媒体类型(默认)screen用于电脑屏幕、平板电脑、智能手机等print打印设备speech应用于屏幕阅读器等发声设备注:tty tv projection handheld braille embossed aural 设备类型已经被废弃1原创 2021-05-17 10:09:03 · 192 阅读 · 0 评论 -
viewport概念
viewport概念1. viewport概念1.1 PPK对关于三个viewport的理论1.2 查看viewport尺寸1.3 利用meta标签对viewport进行控制1.4 设置viewport为`ideal viewport`中几种方式1.5 initial-scale缩放方式以及默认值1.6 解决JS延迟问题1. viewport概念移动设备上的viewport就是**设备的屏幕上能用来显示网页内容的区域。**viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域大,也可能小。原创 2021-05-16 20:23:55 · 1098 阅读 · 0 评论 -
CSS像素和物理像素
1. CSS像素什么是CSS像素?CSS像素又称为逻辑像素,虚拟像素,也称为直觉像素。CSS像素所使用的单位是px。是一个相对单位。为什么会有CSS像素产生呢?屏幕显示是由一个一个不连续的点组成,最小组成单位为物理像素。而在现实生活中,人肉眼看到的是一系列连续的图形,因此采用CSS像素来进行衡量。而CSS像素是如何计算的呢?CSS像素是个相对单位,1px等于几个物理像素。但是仍然存在一定的问题相同尺寸设备,不同屏幕密度假设按照1px = 2pt进行显示,有一个盒子大小为6px/3px原创 2021-05-16 15:50:28 · 1883 阅读 · 0 评论 -
CSS3帧动画总结
CSS3帧动画总结1. 关键帧1.1 定义多个帧动画1.1.1 相同动画时间1.1.2 不同动画时间2. 重复动画3. 动画方向4. 动画延迟5. 动画速率5.1 平滑动画5.2 步进动画6. 播放状态7. 填充模式8. 组合写法帧动画通过定义一段动画中的关键点、关键状态来创建动画。transition虽然也有对帧的控制,但是控制粒度往往比较大,其主要是对一个变化过程,比如:宽度/背景变化过程中,设置变化时间/速度以及在哪开始变化。虽然里面也有类似于帧的transition-timing-functio原创 2021-05-15 11:44:30 · 954 阅读 · 0 评论 -
CSS3过渡延迟总结
CSS3过渡延迟总结1. 元素状态2. 过渡实现2.1 设置哪些属性应用过渡效果2.2 js过渡完成事件监听API2.3 设置过渡时间2.4 控制过渡效果的速度2.4.1 平滑过渡2.4.2 步进过渡2.5 设置过渡延迟时间2.6 过渡组合写法一般情况下CSS属性的变化是瞬时变化的,但是CSS过渡可以控制变化效果,让变化平滑发生。但是并不是所有的CSS属性都有过渡效果,具有过渡效果的CSS属性有:支持动画的CSS属性一般具有中间值的属性有过渡效果,比如:宽度,因为宽度属性值是数值类型,元素宽度从100原创 2021-05-12 21:34:39 · 2814 阅读 · 3 评论 -
CSS3变形透视动画总结
CSS3变形透视动画总结1. 总览2. 移动元素2.1 平面移动2.2 Z轴方向移动2.3 XYZ轴同时控制3. 缩放元素3.1 元素变形原点4. 旋转元素5. 倾斜元素6. 透视6.1 什么是透视?6.2 CSS3实现透视6.3 3d透视6.4 透视方位7. 隐藏元素背面1. 总览使用transform规则可以控制元素的变形透视动画操作,包括控制移动、旋转、倾斜、3D转换等。属性值属性值说明none定义不进行转换。translate(x,y)定义 2D 转换。t原创 2021-05-09 20:23:09 · 1151 阅读 · 0 评论 -
CSS栅格系统总结
CSS栅格系统总结11.1 声明网格项目11.2 栅格线绘制11.2.1 默认栅格线绘制设定11.2.2 栅格线绘制11.2.3 组合写法11.3 间距设定11.4 元素定位11.4.1 通过栅格线编号11.4.2 通过命名栅格线的方式11.4.2.1 固定命名栅格线11.4.2.2 重复命名栅格线11.4.3 通过偏移量的方式11.4.4 简写方式11.4.5 采用区域的方式11.5 区域定位11.5.1 区域占位11.6 栅格流动11.7 对齐管理11.7 网格项目对齐方式栅格系统可以看作由网格做成,原创 2021-05-05 19:20:40 · 840 阅读 · 0 评论 -
CSS弹性布局总结
CSS弹性布局1. 弹性盒子声明2. 弹性盒子规则2.1 弹性元素布局方式2.2 弹性元素溢出处理2.3 flex-direction和flex-wrap的组合写法2.4 主轴和交叉轴2.5 主轴对齐方式2.6 交叉轴对齐方式3. 弹性元素规则3.1 弹性元素在交叉轴上的排列方式3.2 主轴上可用空间分配3.3 主轴上不足空间时元素缩放3.4 主轴的基准尺寸定义3.5 flex-组合写法3.6 控制弹性元素位置4. 弹性文本5. 定位属性应用于弹性元素6. 自动空间传统的响应式布局方式,通过positi原创 2021-04-29 16:58:18 · 920 阅读 · 0 评论 -
CSS元素定位总结
CSS元素定位总结1. relative相对定位2. absolute绝对定位3. 定位元素尺寸问题4. 纵向重叠5. 固定定位6. 粘性定位为什么需要定位?当需要对某些元素设定在特殊的位置的时候,则需要进行定位操作。定位操作比较灵活,可以使得元素的位置在页面任何地方进行显示。但是定位在页面布局中也不是权宜之计,原因:当两个元素在同一文档流中中的时候,增加一个元素的高度/宽度,另一个元素会随着文档流自动增加/减少。浮动也是如此,会随着父元素的位置变化而变化。但是如果使用定位来布局两个元素,当一个元素高度/原创 2021-04-24 18:36:16 · 621 阅读 · 0 评论 -
CSS float浮动布局
CSS float浮动布局1. 清除浮动2. 浮动边界3. 浮动转换4. 形状浮动 控制环绕模式5. 改变元素的显示区域属性值选项说明left向左浮动right向右浮动none不浮动float是最开始出现的一种布局方式,主要解决:文本在图像周围环绕,也即应用于图像。但是在css中,任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何种元素。元素一般是处于普通流中,也即块级元素独占一行,从上往下依次显示布局。行级元素可以在一行显示多个,按照顺序进行显原创 2021-04-24 10:49:16 · 1948 阅读 · 0 评论 -
CSS数据组合方式总结
CSS数据组合方式总结1. 表格1.1表格绘制1.2 表格标题1.3 表格边框合并1.4 边框间距1.5 单元格隐藏2. 列表2.1 列表符号2.2 列表符号位置2.3 列表样式复合写法1. 表格表格可以非常快速的部署数据。表格不能设置外边距。1.1表格绘制table标签绘制表格<table border="1"> <caption>This is a caption</caption> <thead> <tr&g原创 2021-04-22 17:34:42 · 431 阅读 · 0 评论 -
CSS背景属性总结
1. 背景颜色 1. background-color 2. 默认值是transparent(透明)2. 背景图片语法background-image: none | url(url);(不加引号)可以定义多个背景图片,多个背景图片定义会发生图片的重叠,background-image: url(/images/2.PNG),url("/images/4.jpg");但是可以通过backgound-的其他属性进行设置background-image: url(/images/原创 2021-04-21 09:13:40 · 1699 阅读 · 0 评论 -
CSS盒子模型以及相关属性总结
CSS盒子模型以及相关属性总结1. 外边距2. 内边距3. 边框3.1边框样式3.2 圆角边框4. 轮廓线5. display元素显示类型5.1 外部显示类型\5.2 内部显示类型6. visibility控制元素显示隐藏7. 元素尺寸设置7.1 min&max-7.2 fill-available自动撑满可用空间7.3 fit-content根据元素内容适应尺寸大小7.4 min-content/max-content1. 外边距声明定义外边距margin简写声明次序:上、右、下、左原创 2021-04-18 09:13:48 · 1364 阅读 · 0 评论 -
外边距重叠
外边距重叠1.什么是外边距塌陷问题2.外边距重叠(外边距塌陷)3.外边距重叠出现条件4.外边距计算5.出现场景1.相邻关系2.父子关系6.解决外边距重叠1.什么是外边距塌陷问题查看以下场景:<div></div><div></div><style>div:nth-child(1) { width: 100px; height: 100px; background-color: #909090; marg原创 2021-04-17 17:37:06 · 657 阅读 · 0 评论 -
BFC
BFC1.三种定位方案1.普通流2.浮动3.绝对定位2.什么是BFC3.触发BFC条件4.BFC作用5.总结1.三种定位方案1.普通流元素按照其在HTML中的先后位置至上而下布局行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行所有元素默认都是普通流定位2.浮动元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移。在当前流上进行左右浮动,且当前元素所在的行被其他元素也使用。3.绝对定位元素整体脱离普通流,因此绝对定位元素不会对其兄弟元原创 2021-04-17 15:58:00 · 251 阅读 · 0 评论 -
CSS文本控制总结
CSS文本控制总结1. 字体属性1.1 字体系列1.2 字体大小1.3 字体粗细1.4 文字样式(斜体)1.5 字体颜色1.6 行高(行间距)1.7 文字复合写法2. 文本样式2.1 大小写转换2.2 文本线条2.3 文本阴影2.4 文本空白处理2.5 文本溢出处理3 段落控制3.1 文本对齐3.2 文本缩进3.3 字符间隔3.4 文本排版模式1. 字体属性字体属性定义字体系列、大小、粗细和文本样式(粗细等)1.1 字体系列font-family用法:p { font-family:原创 2021-04-16 11:17:33 · 669 阅读 · 0 评论 -
CSS三大特性
CSS三大特性1.层叠性2.继承性3.优先级1.层叠性样式冲突,遵守就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠2.继承性子标签会继承父标签的某些样式子元素可以继承父元素的样式(字体、颜色属性)、(text-,font-,line-这些元素开头,以及color)行高的继承性行高可以跟单位也可以不跟单位如果子元素没有设置行高,则会继承父元素的行高例子:body { font:12px/1.5;}此时子元素的行高:当前子元素的文字大小原创 2021-04-13 09:52:32 · 109 阅读 · 0 评论 -
导入css样式表方式总结
导入css样式表方式总结1 内联样式表2 嵌入式样式表3 外部样式表4 导入方式导入外部样式表5 链接方式和在style标签中的导入方式差别6 四种引入方式优先级1 内联样式表可以放在页面各个地方,但是一般放在head标签中不推荐使用,会造成页面体积很大的情况的产生,从而导致页面不能及时加载出来的情况而如果采取外部样式导入的方式,则其可以异步加载的方式呈现。<style> a { color: red; }</style>2原创 2021-04-13 08:36:15 · 929 阅读 · 0 评论 -
css选择器总结
css选择器总结1. 选择器(选择符)的作用2. 选择器分类2.1 基础选择器2.2 复合选择器1.结构选择器2.属性选择器3.伪类选择器4.争对表单的伪类选择5.针对于文本的伪类选择器1. 选择器(选择符)的作用将不同的标签选择出来2. 选择器分类2.1 基础选择器标签选择器 不能差异化设置,只能全部选择类选择器.class {}多类名 一个标签指定多个类名场景相同样式放在一起进行设置id选择器#id {}Id属性唯一,为某一标签设定特定的属性原创 2021-04-12 15:55:45 · 685 阅读 · 0 评论