CSS
关注
分享
扫一扫
文章平均质量分 70
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
猫老板的豆
旁观自己 善待朝夕
展开
-
Grid 布局
Grid布局是一种用于网页布局的CSS技术，它允许开发者定义一个元素内部的行和列，并在这些网格中放置子元素。这是一个强大的布局方式，可以看作是二维布局，也是唯一的二维布局方案。原创 2024-04-25 20:19:13 · 2921 阅读 · 0 评论 -
CSS 预处理器
Sass和Less都使用符号来定义变量。Stylus则既可以使用符号，也可以使用符号来定义变量。原创 2024-04-17 18:27:07 · 1220 阅读 · 0 评论 -
CSS3 新特性
CSS3中引入了许多令人兴奋的新特性，这些特性使得开发者能够创建更丰富、更动态和更响应式的网页。原创 2024-04-17 16:38:40 · 1285 阅读 · 0 评论 -
CSS 伪元素和伪类的用法和区别
在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。伪元素通常用双冒号来表示 （在实际使用中，一些旧的伪元素如:before和:after仍然被广泛接受）::before和::after：用于在选定元素的内容之前和之后插入内容通常与content属性一起使用，可以插入文本、图像或其他内容。它们不占用DOM节点，使得CSS能够解决一部分JavaScript的问题，同时避免增加无意义的页面元素。原创 2024-04-17 15:05:53 · 579 阅读 · 0 评论 -
CSS transition和animation的用法和区别
Transition和Animation在CSS中都是用于实现元素状态变化的效果，但它们在用法和特性上存在明显的区别。原创 2024-04-17 14:24:58 · 513 阅读 · 0 评论 -
CSS选择器和优先级权重
对于选择器的优先级标签选择器、伪元素选择器：1类选择器、属性选择器、伪类选择器：10id 选择器：100内联样式：1000选择器格式优先级权重id选择器#id100类选择器.class10属性选择器a[ref=“eee”]10伪类选择器div:last-child10标签选择器div1伪元素选择器div:after1相邻兄弟选择器h1+p0子选择器ul>li0后代选择器ul li0原创 2023-08-31 18:18:11 · 384 阅读 · 0 评论 -
CSS中可继承与不可继承属性
CSS属性的继承是CSS的一项非常强大的功能。这些属性的继承可以让你的CSS代码更加简洁、易于管理，同时也可以大大提高网站的性能。在设置CSS样式时，你可以根据需要选择继承或不继承属性，以便更好地控制页面样式。属性可以被子元素继承，它可以将元素隐藏起来，但不会改变网页的布局。等列表属性也可以被子元素继承，用于设置无序列表和有序列表的样式。等属性是字体样式的属性，都可以被子元素继承。等属性也是可以被子元素继承的属性。等一些其他的属性也是可继承属性。等表格属性也是可继承属性。规定元素应该生成的框的类型。原创 2023-08-29 15:47:11 · 2004 阅读 · 0 评论 -
em 和 rem 的区别
em 和 rem 都是，在使用时由浏览器转换为像素值，具体取决于你的设计中的字体大小设置。如果你使用值 1em 或 1rem，它可以被浏览器解析成 从16px 到 160px 或其他任意值。原创 2023-08-24 14:55:10 · 337 阅读 · 0 评论 -
一行代码 网页变灰
想必大家都感受到了，很多网站、APP 在昨天都变灰了。先来感受一下变灰后的效果。让网页变为黑白配色，是个常见的诉求。而且往往是突如其来的诉求，是无法预知的。当发生这样的需求时，我们需要迅速完成变更发布。这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？这一行代码是个CSS代码：为了使整个网页生效，你可以把它放在 标签的样式里。直接写到 html 文件内，例如：也可以用内联样式，只要没用 important CSS 语法，内联样式优先级最高：为了更好的兼容性，你可以补一个带原创 2022-12-07 16:03:39 · 5021 阅读 · 0 评论 -
html {font-size: 62.5%}
一般的，各大主流浏览器的font-size默认值为 16px，此时 1rem = 16px（所以 12px = 0.75rem）；把 html 设置成 font-size: 62.5%，此时 1rem = 16px*62.5% = 10px（所以 12px = 1.2rem）；（1：10的比例更好换算）html{ font-size: 62.5%; }注：rem 是 css3 中新增加的一个单位属性，是相对长度单位。相对于根元素(即html元素) font-size计算值的倍数...原创 2022-03-01 17:37:29 · 774 阅读 · 0 评论 -
link和@import的区别
外部引入 CSS 有2种方式，link和@import。就结论而言，link@import。原创 2021-09-01 11:50:02 · 189 阅读 · 0 评论 -
CSS3 box-sizing属性
简介box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度。// box-sizing 有三种属性box-sizing: content-box|border-box|inherit;content-box ( 默认值 - 标准盒模型 )宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。width = 内容的宽度原创 2021-07-27 10:36:38 · 362 阅读 · 0 评论 -
浏览器的重绘与重排
⚡️浏览器渲染过程：浏览器采用流式布局模型（Flow Based Layout）浏览器渲染过程中的步骤4（几何属性发生变化）当 DOM 的变化影响了元素的几何属性（宽和高）， 比如改变边框宽度或给段落增加文字，导致行数增加 ，浏览器，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构建渲染树。这个过程称为 “重排”。⚡️触发重排的情况Layout 属性值（强制刷新队列）浏览器渲染过程中的步骤5（几何属性无变化）当渲染树中的元素外观（如：颜色）发生改变，，这个过程称为原创 2020-06-03 16:11:36 · 677 阅读 · 0 评论 -
css优化滚动条样式
::-webkit-scrollbar-track-piece { -webkit-border-radius: 0}::-webkit-scrollbar { width: 5px; height: 10px}::-webkit-scrollbar-thumb { height: 50px; background-color: #b8b8b8; -webkit-border-radius: 6px; outline-offset: -2px; filter: alp原创 2020-12-04 17:57:22 · 272 阅读 · 0 评论 -
css换行几种方式
1. 强制不换行div{ white-space:nowrap;}2. 自动换行div{ word-wrap: break-word; word-break: normal;}3. 强制英文单词断行div{ word-break:break-all;}原创 2020-12-03 17:19:32 · 2627 阅读 · 0 评论 -
CSS样式重置 reset.css
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}caption,th {text-align:left;font-weigh原创 2020-08-06 09:32:25 · 279 阅读 · 0 评论 -
实现三栏布局的8种方式
三栏布局：两侧宽度固定，中间宽度自适应的公共样式：* { padding: 0; margin: 0; height: 100%;}.left { width: 200px; background-color: aqua;}.right { width: 200px; background-color: burlywood;}.main { background-color: chartreuse;}1. 浮.原创 2020-06-12 13:19:47 · 3211 阅读 · 3 评论 -
3分钟理解BFC
块级格式化上下文，是用于布局块级盒子的一块渲染区域。MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。原创 2020-05-28 15:13:32 · 773 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型包含2种：W3C标准盒子模型（默认值）IE怪异盒子模型 （原创 2020-05-28 12:18:18 · 404 阅读 · 0 评论 -
移动端PSD设计稿与CSS的rem适配设置问题
注：7.2是指PSD设计稿宽度为（720/100） 如果PSD上测出字体大小或间距宽高为30px，则css上直接输出 0.3rem （30/100）//设置全局字体var n = function() { var n = document.documentElement.clientWidth; if(n > 414) { n = 414 }原创 2017-10-24 10:35:13 · 2511 阅读 · 0 评论 -
css居中常见方法总结
块级元素居中 html代码部分<div class="parent"> <div class="child">child</div></div>行内元素居中 html代码部分<div class="parent"> <span class="child">child</span></div>水平居中01. 行内元素 text-align: center;.parent {原创 2020-05-15 10:57:27 · 737 阅读 · 1 评论 -
CSS中position属性详解
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动(float)、绝对定位(absoulte)和固定定位(fixed)。属性是否脱离文档流滚动影响定位原点static否跟随滚动无relative否跟随滚动元素本身在文档流中的位置absoulte是跟随祖先容器滚动最近的已定位祖先元素或<html>根元素(受根元素边距影响)fixed是不跟随滚动浏览器视口（viewport）的左上角。原创 2020-05-13 11:16:53 · 873 阅读 · 0 评论 -
CSS禁用页面内容选中和复制操作
禁用页面内容选中和复制操作*{ -webkit-user-select:none; -moz-user-select: none; -ms-user-select: none; user-select:none;/*禁用页面内容选中和复制操作*/ -webkit-touch-callout:none;/*禁用长按页面时的弹出菜单(i原创 2017-08-07 11:54:09 · 1365 阅读 · 0 评论 -
20个很有很有很有用的CSS技巧
1.placeholder的颜色值设置input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}2.双飞翼布局<style type="text/css"> .box-main,.box-left,.box-right{float:left;he原创 2017-09-26 14:35:02 · 8385 阅读 · 0 评论 -
ellipsis文本溢出省略
/*单行文本溢出*/ .ellipsis{ white-space:nowrap ; text-overflow:ellipsis; overflow:hidden} /*多行文本溢出*/ .ellipsis{ display: -webkit-box!important; overflow: hidden; text-overflow:原创 2017-10-27 16:39:13 · 534 阅读 · 0 评论 -
jQuery封装animate.css
animate.css是一个有趣的，跨浏览器的css3动画库。一、首先引入animate css文件<link rel="stylesheet" href="animate.css">二、给指定的元素加上指定的动画样式名<div id="box" class="animated bounce"></div>这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第原创 2018-01-02 15:26:50 · 569 阅读 · 0 评论 -
H5页面在 ios 端滑动不流畅的问题
IOS系统的惯性滑动效果非常6，但是当我们对div加overflow-y:auto;后是不会出这个效果的，滑动的时候会感觉很生涩。怎么办？方案一：body {-webkit-overflow-scrolling: touch;}在滚动容器内加-webkit-overflow-scrolling: touch 但这个方案有一个问题，在页面内具有多个overflow：auto的原创 2017-09-29 15:44:08 · 4404 阅读 · 1 评论 -
Sticky footer布局
Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。图示说明当内容较少时，正常的文档流效果如下图 在正常的文档流中，页面内容较少时，页脚部分不...原创 2018-03-29 21:31:29 · 278 阅读 · 0 评论 -
flex平分布局
&lt;ul class="flex"&gt; &lt;li class="flex_item"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt; &lt;li class=&a原创 2018-05-28 15:51:04 · 12212 阅读 · 1 评论 -
flex布局
容器轴包括：外层的和内层的和可以说 flex 布局的全部特性都构建在这两个概念上flex 布局涉及到 12 个 CSS 属性（不含），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。原创 2019-03-26 14:00:16 · 760 阅读 · 0 评论 -
纯css三角形 带边框
HTML：<p class="tooltip">定义：连接设备的用户数<br>当前：正在连接设备的用户数<br>今日：到最近整点时间连接设备的用户数<br>昨日：昨天24小时内所有连接设备的用户数<br>最高：在历史记录中，展示连接设备用户数<br>最高值及发生日期</p>CSS：.tooltip{position:absolute;bottom:-148px;right:0;background-原创 2017-08-04 15:27:56 · 5816 阅读 · 0 评论