本质全称为层叠样式表（cascading style sheets）。属于修饰HTML文件的语言。如果把HTML比作成word文档的基本内容，CSS就
原创
2022-10-26 11:19:58
13阅读
CSS（Cascading Style Sheet）对HTML做补充，做效果。现在使用的为最新的CSS3.
层叠（Cascading）
层叠三大规则：（优先级依次递减）
样式表来源
选择器优先级
源码位置
1、样式表来源重要次序排序
用户代理样式（浏览器默认样式）
用户样式表 很少有
作者样式表 developer写的
作者样式表中的 ！important
用户样式表中的 ！importa
原创
2023-09-10 21:37:35
113阅读
1. 权重概念： 权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。 权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。 2.css权重的理解： 每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”； css通过css选择器的权重占比，来计算css
转载
2024-04-26 09:19:48
21阅读
最近工作中做了几件事情都与页面元素定位相关，所以这里将工作中遇到的问题以及解决方法记录在博客里，以便日后查阅。叠压有一个任务是做一个列表组件，列表中的每一行都要向上叠压上一行的底边，注意，是叠压，不是接壤。问题分析：利用相对定位（position:relative）来制造相对于行（row）的偏移量，使行内元素向上偏移，并叠压上一行的行内元素的底边。既然是相对定位，那就不能让每一行的定位基准点基于上
原创
2017-12-17 01:00:54
6298阅读
steps()函数为CSS动画提供了一种步进的方式，使得动画可以在离散的步骤之间变化，这在许多动画场景中都非常有用。通过合理地使用steps()函数，你可以创建出更加有趣和吸引人的动画效果。
原创
2024-07-09 10:53:11
62阅读
keyframes。
原创
2024-07-09 10:53:00
122阅读
一、背景CSS有三大特性：层叠性、继承性、优先级。而我们在给CSS定义样式的时候，经常出现两个及以上的规则应用在同一元素上，单该元素最终在浏览器呈现的效果是应用的哪个规则呢？这就要考虑优先级的问题了。CSS优先级是由CSS权重来作为衡量标准的，权重的计算有一套计算公式，有如下规范：使用一个4位数的字串来表示级别，从左到右，左边的做大，往右依次递减，且数位之间没有进制，级别之间不可逾越。没有进制的意
转载
2024-04-08 20:02:13
61阅读
position属性建立元素布局所用的定位机制，默认值static，称作静态位置。任何元素都可以定位，CSS中的定位通常指absolute定位、fixed定位和relative定位，除了static定位外的其他定位都可以使用top, right, bottom, left设置偏移距离，可以是正值和负 ...
转载
2021-09-30 13:50:00
111阅读
2评论
float float属性定义元素的浮动方向，任何元素都可以设置浮动，浮动元素会生成一个块级框，无论本身是什么类型的元素。默认值 不进行浮动，属性值 元素向左浮动，属性值 元素向右浮动， 继承。 浮动元素的特性： See the Pen float by wmui (@wmui) on CodePe ...
转载
2021-09-30 13:50:00
135阅读
1. 基线、底线、顶线
2. 行距、行高
3. 内容区
4. 行内框
5. 行框
元素对行高的影响
扩展阅读
1. 基线、底线、顶线
行高指的是文本行的基线间的距离。
基线并不是汉字的下
转载
精选
2012-06-22 11:48:44
1477阅读
display属性规定元素生成框的类型，默认值inline。 属性值有很多，但常用且支持度较好的就那么几个。 block block元素当不设置宽度时，宽度为父元素的宽度，独占一行，支持设置宽高、外边距、内边距。不支持CSS的 属性 标签： inline inline元素宽度由内容撑开，不独占一行， ...
转载
2021-09-30 13:54:00
199阅读
2评论
css文档流文档流，文档流，流就是它最大的特点：自适应。那什么是文档流呢？顾名思义就是：像水流一样，倒入一个容器时，会自动充满容器。而css文档流的特性就是如此。文档流有俩个比较重要的概念元素：inline元素、block元素，与之相对应的标签就是span、div。（还有一个是 inline-block 是前面俩个的结合）那这俩个元素的区别在哪？ inline元素默认是水平排列。而block元素默
转载
2021-01-06 15:51:54
420阅读
示例效果 See the Pen transition by wmui (@wmui) on CodePen. 属性介绍 transition property transition property定义应用过渡效果的CSS属性名称，默认值 ，表示所有属性都获得过渡效果；属性值 表示没有属性获得过渡 ...
转载
2021-09-30 13:57:00
358阅读
CSS是一种棘手的语言。我们没有错误提示或调试器或Console.Log，我们的直觉是我们拥有的最好的工具。如何能够通过深入理解来避免或解决我们遇到的问题呢？
翻译
2023-04-23 00:12:58
441阅读
CSS之BFC理解BFC的介绍BFC是一种规则，就像孙悟空三打白骨精里面孙悟空划了一个圈让师父和师弟在圈里，这样子白骨精
原创
2022-11-17 00:18:00
87阅读
10-1.html<html><head><title>div 标记范例</title><style type="text/css"><!--div{ font-size:18px;  
转载
2009-08-02 14:26:38
1004阅读
color 设置文本的颜色，默认有继承性。属性值可以是颜色名、十六进制颜色值、rgb值，inherit关键字。 direction 设置文本的书写方向，默认值ltr，有继承性。属性值rtl，文本方向从右向左。 继承。 结果： Hello world. Hello world. 个人理解，rtl就是把 ...
转载
2021-09-30 13:54:00
265阅读
2评论
一、前言Flexbox 是一个 CSS3 的盒子模型 ( box model )，顾名思义它就是一个灵活的盒子 ( Flexible Box )，为什麽最近这个属性才红起来呢？最主要也是因为 CSS3 的规范终于普及 ( 或 IE 终于败亡 )，加上行动装置的发展促成了响应式布局兴起，自适应长宽弹性相当大的 Flexbox 就趁势而起了。第一步要来看 Flexbox 的盒子模型，根据 W3C 文章
转载
2017-06-05 11:16:20
582阅读
关注并将「趣谈前端」设为星标每天按时推送技术干货/优秀开源/技术思维1. css 布局方式1.1 css 2.1 CSS2.1定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与...
转载
2022-01-11 16:13:14
248阅读
1.什么是web标准？ web标准不是某一个标准，而是由w3c和其它标准化组织制定的一系列标准的集合。 包含我们所熟悉的HTML、XHTML、Javascript以及CSS等。2.web标准的目的？ 在于创建一个统一的用于web表现层的技术标准， 以便于通过不同浏览器或终端设备向最终用户展示信息内容3.采用web标准的好处 ①提高页面浏览
原创
2015-06-01 16:40:57
196阅读
