css
关注
分享
扫一扫
文章平均质量分 79
css
乖女子@@@
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
笔记-css
【代码】笔记-css。原创 2023-02-03 11:05:15 · 326 阅读 · 0 评论
-
踩坑-calc混合单位计算
【代码】踩坑-calc混合单位计算。原创 2025-11-13 15:52:58 · 258 阅读 · 0 评论 -
css-BFC
1.FC(Formatting Content)格式上下文（1）定义：指的是页面中的一块渲染区域,它决定了其子元素如何定位，以及与其他元素的相互关系和作用；2.BFC(Block Formatting Content)（1）定义：块级格式上下文，一个独立的块级渲染区域（2）触发BFC的方式 根元素,body就是一个BFC 设置浮动 设置定位(absolute,fixed) 弹性布局 overflow:hidden/auto/scroll原创 2021-03-28 18:52:18 · 207 阅读 · 0 评论 -
css--居中问题
1.水平居中[1]行内/行内块元素： 父盒子设置text-align:center; [2]块级元素： margin:auto; 前提：盒子必须设置了宽度； [3]定位+平移 若是设置定位(块级元素margin:auto不起作用) postion:absolute; left:50% transform:translate(-50%) 注：定位百分比相对于父元素，平移百分比相对于自身； [4]定位+margin 若是设置定位(块级元素ma原创 2021-03-26 21:31:42 · 385 阅读 · 0 评论 -
css_定位
的**具有定位(相对、固定、绝对)**的祖先元素(若是所有祖先都没有定位，则以浏览器为标准)不设置偏移量—>默认的left，top是padding的值；设置偏移量—>会忽略父元素的padding；绝对定位的边偏移是相对于它祖先元素来说的。来控制盒子的前后次序(z轴)相对定位的边偏移是相对于元素。粘性定位(css3新增定位).........原创 2022-07-15 16:35:56 · 183 阅读 · 0 评论 -
css-浮动(清除浮动)
清除浮动1.为什么需要清除浮动？原因：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子2.清除浮动的本质清除浮动的本质清除浮动盒子造成的影响(即不会撑开父盒子)若是父盒子本身存在高度，则不需要清除浮动； 清除浮动后，父级就会根据浮动的子盒子自动检测高度，不会影响后面的标准流了；3.注意点：浮动只会影响其后面的标准流并不会影响其前面的标准流；4.语法// 清除浮动造成的影响选择器{ clear原创 2021-04-18 10:34:44 · 116 阅读 · 0 评论 -
css_元素的显示与隐藏
display隐藏元素时-该元素被隐藏，不占据位置；隐藏元素时-子元素被一起隐藏，且不可以通过display:block;将子元素显示；元素隐藏时-对该元素设置的事件将不起做用；visibility隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；隐藏元素时-子元素被一起隐藏，但可以通过visibility:visibilie;将子元素显示；元素隐藏时-对该元素设置的事件将不起做用；opacity隐藏元素时-该元素被隐藏，但是仍然保留元素的位置；原创 2022-09-28 10:00:45 · 803 阅读 · 0 评论 -
css3新增_css3新特性
定义：white-space这个css的样式，用来设置element元素对内容中的空格的处理方式属性值normal(默认)合并空格，多个相邻空格合并成一个空格；在源码中的换行作为空格处理，只会根据容器的大小进行自动换行；nowrap合并空格，多个相邻空格合并成一个空格；在源码中的换行作为空格处理，容器边界不会换行；经常与经常和overflow,text-overflow一起使用(作为多余文本显示省略号)pre不合并空格，有几个展示几个空格；遇到 \n 会换行；原创 2022-09-28 17:58:08 · 802 阅读 · 0 评论 -
css单位-vh/vw
视口单位(Viewport units)1.什么是视口？在pc端，视口指的是浏览器的可视区域； 在移动端，它涉及3个视口： Layout Viewport（布局视口）， Visual Viewport（视觉视口）， Ideal Viewport（理想视口） 2.视口单位中的“视口”：在pc端，指的是浏览器的可视区域； 在移动端，指的就是Viewport中的Layout Viewport(布局视口) 即window.innerWidth/window.innerHeight大小转载 2021-09-03 18:00:17 · 2045 阅读 · 0 评论 -
css3新增单位-rem(移动端进行页面适配)⭐️
并且当我们使用vant等插件的时候，里面的数据都是使用px的，我们没有办法转化(postcss-pxtorem是基于vant的插件，可以将所有带px的单位–包括vant组件内的自动转化为rem单位)------------------>需要在移动端进行页面适配。----所以我们要使用postcss-pxtorem插件将带px的转化为带rem单位的数据；-----postcss-pxtorem使用的设计稿是vant的设计稿宽度为375px;----但是我们自己的设计稿若不是375px时就须要进行手动转化；原创 2022-10-11 10:09:05 · 1328 阅读 · 0 评论 -
css3新增_新增选择器
上述代码发现设置样式不起作用，原因是.box input:nth-child(2)是寻找类名为box的元素里面 第二个元素且该元素为input元素的元素，但是box元素里面第二个元素为a标签，所以设置失败，样式不起作用。上述代码发现样式设置成功了，原因是.box input:nth-of-type(2)是先将类名为box的元素里面的input标签元素找出来进行排序，发现共有3个，给第二个设置样式就设置成功了。结构伪类选择器是根据文档结构来选择元素，常用于根据 父级元素来选择子元素。原创 2022-10-11 11:20:18 · 515 阅读 · 0 评论 -
css3新增-网格Grid布局
定义网格的行结构 和 列结构grid-template-columns：定义网格的列结构和每列的宽度；grid-template-rows：定义网格的行结构和每行的宽度；其强大之处在于它的属性值是非常灵活的这两个属性的语法完全相同，只是方向不同，在此使用columns进行展示。原创 2025-09-12 14:30:12 · 1035 阅读 · 0 评论 -
css3新增-弹性盒子布局
1.简介[1]弹性盒子是css3新增的盒子模型；[2]作用：就是用于解决一个盒子内多个子盒子的排列及其分布问题；[3]特点：不需要解决父元素塌陷问题)； 不需要计算间距； 父盒子大小改变子盒子能够弹性适应；[4]弹性盒子的组成部分子盒子； 主轴(默认x轴)； 次轴(默认y轴)；[5]启用弹性布局父盒子 display:flex; display:inline-flex; （1）主轴的排列以及分布：justify-content: flex-start;原创 2021-03-28 18:36:36 · 664 阅读 · 0 评论 -
01-CSS基础选择器
CSS基础选择器注意：HTML中使用的注释是<!---->CSS中使用的注释是/**/1、标签选择器1）样式标签名 {样式属性1：属性值1；样式属性2：属性值2；样式属性3：属性值3；}注：若写在head标签内要加<style></style>标签2）定义：标签选择器是将HTML标签作为选择器，为相同的HTML标签设定相同的样式；3）优点：能快速为页面中的相同标签统一样式；4）缺点：不能设置差异化样式；5）举例：<!DOCTYPE原创 2020-07-29 23:20:55 · 261 阅读 · 0 评论 -
02-CSS复合选择器之后代选择器
复合选择器1、后代选择器（包含选择器)1）作用：用来选择元素或者元素组的子孙后代–更准确更精细的来选择；2）形式：规则左边的选择器一端包括两个或多个用空格分隔的选择器父级 子集 {属性1：属性值1；属性2：属性值2；}其中父类选择器也可以使用标签选择器、类选择器、id的选择器等基础选择器，子类相似3)举例说明现在我们有三个内部标签和三个外部标签—想将3个内部标签变为红色HTML代码和图片如下<body> <div> <a href原创 2020-08-01 10:35:11 · 461 阅读 · 0 评论 -
03-CSS复合选择器
子元素选择器1、复习：后代选择器~|—用空格分隔；~|–将标签的所有后代都选出来；2、子元素选择器1）作用：只能选择某元素的子元素（儿子）的元素2）样式：使用大于号；3）举例现在我们想将儿子变为红色；<body> <div> <strong>儿子</strong> <strong>儿子</strong> <strong>儿子</strong>原创 2020-08-01 11:37:33 · 270 阅读 · 0 评论 -
04-CSS的三种显示模式
1、块级元素1）<div></div>、<h></h>、<p></p> <ul></ul>都是典型的块级元素；2)特点(默写)[1]比较霸道，自己独占一行；[2]宽度、高度以及内外边距都可以控制[3]若不给宽度–默认为父级标签的款度；[4]是一个容器盒子，里面还可以放别行级或者块级的元素；注：p标签 、h标签、dt标签文字标签元素尽量不要放别的块级元素，尤其是div;2、行内元素1）<s原创 2020-08-01 21:14:39 · 532 阅读 · 0 评论 -
逻辑(css3)_强制不换行
此时四个文本均左对齐， 垂直排列样式也比较好看，但是出现一个缺点： 某些手机屏幕上会。如上图做一个跑马灯数据，时间、地点、姓名、提示文本字数都不是固定的。个人想法是给四个文本均设置宽度，不然会出现。原创 2023-10-31 18:41:43 · 1069 阅读 · 0 评论 -
笔记(css3)-动画
它分为2D转换 或 3D转换，一般与动画结合使用。没有设置初始状态，则初始状态为添加动画元素的初始状态。问题：上图在展开和收缩的时候想做一个过渡动画，但是发现设置了不起作用；transform是一个复合属性，可以同时设置平移、旋转、缩放。现在想做一个效果就是 “开”在水平方向居中且一直旋转，实现如下。但是结果却与预期不同，原因是因为在帧动画中。总结：内容撑开的盒子没有办法做宽高的过渡动画。需要值得注意的是，变换的执行顺序是。,做成一个呼吸效果的动画，->-> 添加动画效果，实现如下。这个属性一直在被重新；原创 2023-01-29 16:32:23 · 856 阅读 · 0 评论 -
逻辑(css)-三角形制作
1.css制作三角形原理1.其实css若是宽高都为0，设置border为不同的颜色，就可以制作不同的三角形了；代码如下 <style> div { width: 0; height: 0; border-width: 100px; border-style: solid; border-color: yellowgreen yellow green greenyellow;原创 2021-03-23 19:21:11 · 858 阅读 · 0 评论 -
逻辑(css)-简单跑马灯制作
【代码】逻辑(css)-简单跑马灯制作。原创 2023-08-23 16:39:10 · 230 阅读 · 0 评论 -
逻辑(css)-背景网格制作(linear-gradient)
进行展示，本来是想用UI切的图片设置背景图，但是由于文字数量不固定，图片会有缩放情况造成渲染效果与预期不符，于是使用css的。如上图所示，希望文本能够。原创 2023-07-13 17:53:00 · 1340 阅读 · 0 评论 -
踩坑_vertical-align
原价为19.9”文本的基线小于默认基线("x色块"的基线)，因此父元素的基线为“x”色块的基线；”文本的基线大于默认基线("x色块"的基线),因此父元素的基线为“我是啦啦啦…父元素内默认的透明色块就如上图的“x色块”，默认为字体和行高为16px\1-1.2，父元素的基线就是“x色块”的基线。父元素(div)没有设置padding，那么子元素(del)上方的间距是哪里来的呢？基线位置偏移：当有元素的基线位置大于当前“x色块”的基线位置时，父元素的基线就以。以上是基于一行文本的顶线、中线、基线、底线。原创 2023-07-20 18:37:06 · 619 阅读 · 0 评论 -
踩坑(css3+h5)_背景图适配 =＞ rem布局 + background-size属性
图片并不能撑开盒子，要想显示背景图片，需要图片设置宽高或有足够的内容撑开盒子的前提下。[1] 当元素没有设置background-size属性，或是设置background-size:auto auto时，会按照图片默认的宽高进行展示图片宽高 大于 元素宽高 -> 超出元素宽高的图片会被截断(不显示)图片宽高 小于等于 元素宽高 -> 正常展示(展示位置以及是否平铺需要看background-position以及background-repeat)原创 2023-02-08 17:51:07 · 1728 阅读 · 0 评论