CSS
关注
分享
扫一扫
文章平均质量分 77
YF-SOD
LDSBAH，NAB!
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css变量（--）、grid布局应用（两栏、三栏、圣杯布局）
css变量（--）、grid布局应用（两栏、三栏、圣杯布局）、gird详解原创 2022-10-21 17:43:58 · 709 阅读 · 0 评论 -
@media和不同适配单位（关键字not、only、and、,、媒体类型、媒体特性、2种应用方式）和（em、rem、vw|vh）、移动端适配、css单位
目录@media关键字notonlyand,媒体类型媒体特性应用方式link应用css应用不同适配单位emremvw|vh@media用于为不同的媒体类型/设备应用不同的样式。媒体查询可用于检查许多事情，例如：视口的宽度和高度 设备的宽度和高度 方向（手机或平板电脑处于横屏还是竖屏模式？） 分辨率关键字not不满足媒体特性时生效，对媒体类型和第一个and不生效（相当于非！，将条件取反的同时，将and变为或）。注意：使原创 2021-09-29 08:09:54 · 3141 阅读 · 0 评论 -
background、border属性详解(background-attachment|size|position|clip、border-image|image-slice|outset等)
目录backgroundbackground-colorbackground-urlbackground-repeatbackground-attachmentbackground-positionbackground-originbackground-sizebackground-clipbackground-blend-modebackground属性的相关实例borderborder-widthborder-styleborder-col..原创 2021-09-23 22:57:42 · 1920 阅读 · 0 评论 -
CSS中@规则
@规则一个at-rule是一个CSS语句，以at符号开头,'@' (U+0040 COMMERCIAL AT),后跟一个标识符，并包括直到下一个分号的所有内容,';' (U+003B SEMICOLON),或下一个CSS块，以先到者为准。下面是一些 @规则, 由它们的标示符指定, 每种规则都有不同的语法:@charset定义样式表使用的字符集.@import告诉 CSS 引擎引入一个外部样式表.@namespace告诉 CSS 引擎必须考虑XML命名空间。嵌套@规则, 是...原创 2021-09-21 13:33:51 · 447 阅读 · 0 评论 -
HTML、CSS冷知识点
HTMLp标签里面不能写div标签，不然解析时会变成兄弟关系。 标签之间的回车在显示时会有8px的文字分割符，去掉的话会使代码阅读性很差，我们可以通过设置字体大小0，使间隔消除。 html上最上面的一行代码<!DOCTYPE html>代表标准渲染模式，去掉后以怪异/混杂渲染模式（用于向后兼容之前的版本）。通过document.compatMode可以查看是哪种渲染模式，返回'CSS1Compat'为标准模式，'BackCompat'为怪异模式。CSS定义line-height时一原创 2021-09-21 13:30:53 · 272 阅读 · 0 评论 -
单行/多行文本换行打点省略、清除浮动、文字代替图片
1.单行文本换行打点省略{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}2.清除浮动::after{ content: ''; display: block; clear: both; }原创 2021-09-21 13:20:38 · 423 阅读 · 0 评论 -
归纳HTML中上下左右居中对齐5个方式6个方法（postion2个方式、display：flex、grid、table-cell3个方式和flex、grid、table-cell属性详解）
目录HTML文本显示效果方式1方式2（2种）方式3display：flex属性详解方式4display：grid属性详解方式5display:table-cell、vertical-align:middle属性详解HTML文本<div class="parent"> <div class="child"></div></div>显示效果方式1设置position：absolut..原创 2021-09-19 15:29:13 · 24459 阅读 · 0 评论 -
CSS中vertical-align和text-align属性详解（使用场景、举例、注意点）、display：table-cell使用详解（基础介绍和使用例子）。
目录vertical-align注意点text-aligndisplay：table-cell使用详解基础介绍使用例子vertical-align元素之间垂直方向对齐属性。下面以inline-block元素和inline元素为例：当文字与带有inline-block属性的元素连接时，会以底对齐的形式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8..原创 2021-09-19 12:11:08 · 1292 阅读 · 0 评论 -
grid布局介绍（容器、项目、网格线、单元格、容器和项目属性template-columns|rows相关函数和相关关键字\gap\areas\flow\content\justify\align）
目录grid布局介绍grid布局相关概念介绍容器和项目行和列单元格网格线display:grid与display:inline-grid区别容器的属性grid-template-columns、grid-template-rows属性grid-template-columns|rows的相关函数repeat()minmax()grid-template-columns|rows的相关关键字auto-fill 关键字fr 关键字auto 关.原创 2021-06-29 11:33:57 · 1496 阅读 · 0 评论 -
flex布局（display:flex详解，容器的属性详解（主轴排列方式和对齐方式、换行、副轴和多根副轴对齐方向）、子元素属性详解（排列顺序、压缩放大计算方式、独立对齐、margin改变））
目录flex布局介绍display:flex与display:inline-flex区别容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content子元素（flex item）属性orderflex-growflex-shrinkflex-basisflexalign-selfmarginflex布局介绍flex布局是flexible..原创 2021-05-27 01:29:14 · 14764 阅读 · 0 评论 -
CSS3 transiton、transform属性详细介绍（为什么设置transition属性没有生效、translate、rotate、scale、skew详解、transform-orgin）
目录transitiontransition用法transition属性为什么没有生效1.直接在CSS中写多个属性改变和在js中直接使用添加类名的方法改变属性。2.设置了display等于none。transform移动translate（2D）旋转rotate（2D）移动translate、旋转rotate详解（3D中的详解）缩放scale倾斜 skewmatrix()函数变形原点transform-origin用法：transform-origi.原创 2021-05-14 11:59:05 · 3955 阅读 · 0 评论 -
CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图
目录transform-style: preserve-3dperspectiveperspective-originrotatetranslate纯CSS3动画正方体贴图小项目链接和GIF图片transform-style: preserve-3d属性规定如何在 3D 空间中呈现被嵌套的元素，有flat和preserve-3d两种参数，默认为flat表示子元素将不保留3d位置（注意只有子元素会实现3d效果），preserve-3d相反（理解为设置后元素之间的覆盖关系将不会根原创 2021-05-06 09:36:17 · 939 阅读 · 0 评论 -
CSS中的选择器分类、连接方法、权重256进制、权重进制实际测试和权重计算问题等详细总结（CSS选择器每一位的权重都是无限大的，不是256进制，可以理解为单独的5位数字）
目录选择器知识类型详细介绍CSS选择器权重知识CSS选择器连接方法各选择器的权重（括号中代表权重）伪元素选择器（>infinity）！important（infinity）行间样式选择器（1000）id选择器（100）class（类）选择器（10）属性选择器（10）伪类选择器（10）其它伪类选择器具体介绍标签选择器（1）伪元素选择器 （1）（权重不为1，大于！impotant）其它伪元素选择器介绍通配符选择器（0）CSS权重进位制测.原创 2018-05-28 20:40:04 · 1756 阅读 · 0 评论 -
属性选择器、类选择器、伪元素选择器的具体介绍（nth-of-type、nth-child、:not、:link、:visited、:active、::selection、::placeholder等）
目录属性选择器(权重10)[class~='className'][class|='name'][class^='surName'][class$='lastName'][class*='name']伪类选择器（权重10）div:nth-of-type(2)div:nth-last-of-type(2)div:only-of-typediv:first-of-typediv:last-of-typediv:nth-child(2)div:nth-las原创 2021-04-27 19:13:56 · 732 阅读 · 0 评论 -
如何利用@规则将小图标导入外部字体。
阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库步骤登陆注册上面网站，将想要使用的图标加入收藏夹，点击购物车再点击下载代码，如下图所示当然也可以点击下载素材，下载素材是通过图片的形式下载，不能把其当做字体设置。然后打开解压的下载文件，打开后缀名为html的文件，会介绍三种使用方法为分别是通过Unicode、Font class和Symbol引用，我们这里介绍第一种如图：把第一二步代码拷贝按顺序复制到CSS中即可，接着如图把下面5个文件拷贝到CSS文件的当前目录即原创 2021-03-25 22:27:11 · 283 阅读 · 0 评论 -
position属性与z-index属性详解，如何比较z-index值确定覆盖关系，为何z-index属性不生效。
目录position属性含义absoluterelativefixedz-index含义比较规则注意position属性含义static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。absolute设置后处在原本出生位置，定位是相对设置了absolute、relative或fixed的上级元素进行定位，当所有的父级都无这些属性时，相对整个页面设置，不是相对body，因为body4面原创 2021-03-18 11:53:51 · 1941 阅读 · 0 评论 -
CSS中的margin塌陷和margin合并BUG以及BFC的常见应用
目录margin塌陷BUG表现形式运行结果margin塌陷BUG解决方法margin合并BUG表现形式运行结果margin塌陷BUG解决方法BFC的常见其它应用margin塌陷BUG表现形式例如下图，正常情况下，.content设置了margin-left,margin-top会使它相对父集偏移，即红色方块应该会出生在黑色大正方体的右下方，而实际情况却只出生在了右上方，即margin-top属性没有生效的，并且当我们把margin-top属性加大后，当它大于.原创 2021-03-16 21:02:00 · 772 阅读 · 1 评论