CSS学习
辣爷
nothing
展开
-
CSS学习 | 《CSS揭秘》读书笔记——第二章
第二章 背景与边框1. 半透明边框使用rgba()和hsla()都可以实现半透明颜色。大部分使用在背景上,而在边框上使用会有一些复杂。默认情况下,背景会延伸到边框所在的区域下层。还好在背景与边框(第三版)中,我们可以通过background-clip属性来调整上述行为所带来的不便。这个属性的初始值是border-box,意味着背景会被元素的border box(边框的外沿框)裁减掉。如...原创 2019-11-13 15:45:36 · 213 阅读 · 0 评论 -
CSS学习 | 《CSS揭秘》读书笔记——第一章
第一章 引言web标准标准的制定过程:CSS规范通常是由CSS工作组的成员来编写的。人员结构如:88%来自W3C会员公司的成员(比如浏览器厂商、主流网站、研究机构、常规技术公司等);7%特邀专家;5%W3C工作人员;浏览器厂商并不是对标准唯唯诺诺,反之,他们比W3C有更多发言权。CSS工作组坚持透明原则,所有交流都对大众公开。每项规范从最初启动到最终成熟,都会经历以下阶段:编辑草案(...原创 2019-11-12 21:09:41 · 239 阅读 · 0 评论 -
CSS-Learning | 块级格式化上下文BFC的原理、生成方法和应用
块级格式化上下文Block formatting context (简称BFC),其中formatting context是指页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。除了BFC还有,inline formatting context(简称IFC)。BFC是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的B...原创 2019-04-26 22:20:03 · 352 阅读 · 0 评论 -
CSS-Learning | CSS中的网页排版技术与文本属性设置
一个简单的文档页面包括几个标题和一些段落,怎么排版才能提升页面可读性,并且美观呢?这里,介绍一些网页排版属性基本排版技术文本颜色浏览器默认会把绝大多数文本渲染成黑色(链接的颜色是“活力蓝”),白底黑字的对比度极高,但容易形成过分强调。通过color属性,我们可以把正文改成深蓝灰色,链接也调整一下。p { color: #3b4348;}a { color: #235ea7;}...原创 2019-04-15 15:47:34 · 314 阅读 · 0 评论 -
CSS特效 | Pure CSS Text Reveal From Smoke Animation Effect 文字随烟雾出现
最近在油管上subscribe了一个专门做css特效的频道跟着做了一下Pure CSS Text Reveal From Smoke Animation Effect这个特效,来分享一下里面涉及的css tips。话不多说,先上效果:烟雾的素材就是一个灰色的烟雾视频mp4,如下图所示: 代码如下,注释了相关的tips:// index.html<!DOCTYPE html&...原创 2019-07-21 18:44:27 · 503 阅读 · 1 评论 -
CSS-Learning | 弹性布局flexible Box
罗列一下弹性布局的属性,资料来源廖雪峰教程博客采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex 项目(flex item),简称"项目"。容器属性Flex-direction决定主轴的方向(即项目的排列方向)row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,...原创 2019-08-05 18:28:29 · 217 阅读 · 0 评论 -
CSS-Learning | CSS自定义滚动条样式
滚动条的CSS属性集是从Internet Explorer 5.5开始的一个专有风格hook,这让设计师创建浏览器的滚动条的自定义主题。目前,它暴露在使用Webkit渲染引擎(和Blink),厂商前缀为Webkit的浏览器。-webkit-scrollbar家族的属性由七种不同的伪元素组成的一个完整的滚动条UI元素:::-webkit-scrollbar,滚动条的背景。它通常是由其他元素覆盖...原创 2019-08-08 18:59:45 · 245 阅读 · 0 评论 -
移动端适配,自适应布局的各种方案与最佳实践
知识预备:1. 像素像素分为css像素和物理像素(设备像素)在css和js中写的px单位,都属于css像素;物理像素只和设备或者说硬件有关,同样尺寸的屏幕,设备的密度越高,物理像素越多。细节可参考:你真的了解css像素嘛?2. 视口广义的视口,是指浏览器显示内容的屏幕区域,狭义的视口包括了布局视口、视觉视口和理想视口在移动端中,理想视口或者说分辨率跟物理像素之间有什么关系呢?DP...原创 2019-08-16 19:18:37 · 1400 阅读 · 0 评论 -
CSS 实战 | CSS实现原地360度无限旋转
CSS实现div原地无限旋转直接上代码.logo { -webkit-animation: animal 4s infinite linear ; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center cente...原创 2019-08-26 15:12:56 · 6205 阅读 · 2 评论 -
CSS-Learning | 纯CSS画三角形
使用CSS画三角形有很多方法,以下将介绍两种常见的方法:使用边框法和使用CSS渐变。使用边框首先,我们创建一个带边框的div.triangle { border-width: 30px; height: 40px; width: 40px; border-color: red green blue brown; border-style: solid;}<div cl...原创 2019-04-22 13:44:39 · 154 阅读 · 0 评论 -
CSS-Learning | CSS中的定位模型:绝对定位、相对定位、固定定位和浮动(如何清除浮动)
定位模型CSS中有几种不同的定位模型,包括浮动、绝对定位、相对定位和固定定位。除非特别指定,否则所有元素盒子都会在常规文档流中生成,即positioin属性的默认值为static。常规文档流中元素盒子的位置,由元素在HTML中的位置决定。确定元素的包含块至关重要,定位模型不同,计算width、height、margin或padding值为百分比时,计算依据会发生变化。接下来,我们来看看不同定位...原创 2019-04-14 19:40:04 · 1825 阅读 · 0 评论 -
CSS-Learning | 使用border-radius创建圆形和胶囊形状(长圆形)
boder-radius属性使用border-radius属性来设置圆角半径时可以使用长度值,或者百分比值。在给它指定百分比值时,x轴和y轴分别相对于元素的宽度和高度来计算实际值。所以,我们可以把一个正方形的元素变成圆形,只要把圆角半径设置成**至少50%**就好。如果两个弧线相交,那么两个轴向就会分别缩小半径,直到圆弧不再相交。可以像以下代码中所示,画出圆形和椭圆形。<div ...原创 2019-04-17 14:18:05 · 5095 阅读 · 0 评论 -
CSS-Learning | CSS选择符的分类与使用
CSS选择符基本选择符基本选择符包括:类型选择符、后代选择符、ID选择符以及类选择符。类型选择符(元素选择符):用于选择特定类型的元素,比如段落,只要写出需要添加样式的元素名即可。p { color: black;}后代选择符:用于选择某个或某组元素的后代。(写法:在两个选择符中间添加空格)以下例子中,只有作为块引用后代的段落元素会被选中,从而缩进。blockquote ...原创 2019-04-13 20:55:37 · 776 阅读 · 0 评论 -
CSS-Learning | CSS选择符的层叠机制、继承机制与选择符的特殊性
CSS的层叠机制由于稍微复杂的样式表可能会存在两条甚至多条规则同时选择一个元素的情况,CSS通过一种叫做层叠机制来处理这种冲突。层叠机制的原理就是为规则赋予不同的重要程度,重要性级别从高到低如下所示:标注为!important的用户样式;标注为!important的作者样式;作者样式;用户样式;浏览器(或用户代码)的默认样式;在此基础上,规则再按【选择符的特殊性】排序。特殊性高...原创 2019-04-13 21:54:10 · 137 阅读 · 0 评论 -
CSS-Learning | HTML文档应用CSS样式的方法
HTML中使用CSS我们写好的CSS样式怎么应用到HTML文档中呢?以下罗列了几种方法:1.把样式放在style元素中,直接放到head部分如果样式不多,又希望能立刻应用它们,可以使用这种方法。<style> body { font-family: Avenir Next, SegeoUI, sans-serif; color: grey; }</sty...原创 2019-04-13 22:47:34 · 181 阅读 · 0 评论 -
CSS-Learning | CSS加载中如何提升web性能
web性能度量web性能的一个重要指标就是页面内容实际显示在屏幕上需要多少时间。这个指标也叫“渲染时间”。现代浏览器在屏幕上渲染内容前,至少需要HTML和CSS。所以尽快下载HTML和全部CSS极其重要。首先,先了解一下,在HTML文档中应用CSS样式的几种方式接下来这里罗列了能提升web性能的几项要点:1.减少HTTP请求在链接外部样式表时,保证链接文件数量最少至关重要。因为每个文件...原创 2019-04-13 22:46:14 · 128 阅读 · 0 评论 -
CSS-Learning | background-image属性如何设置背景图片以及相关背景图片语法
背景图片设置背景图片只需设置background-image属性,接受url()函数式表示法,可以使用相对路径,如url(img/cat.jpg)。浏览器此时会在保存当前样式表的目录的img子目标中寻找图片。如果路径以一个斜杠开头,如/img/cat.jpg,则浏览器会在相对于CSS文件所在域的顶级目录的img子目录中寻找图片。这里也可以使用绝对路径,把协议、域名、路径和文件名都写全。除了...原创 2019-04-17 13:02:24 · 2089 阅读 · 0 评论 -
CSS-Learning | CSS盒模型,块级元素和行内元素
盒模型盒模型是CSS的核心概念,描述了元素如何显示,以及元素之间如何相互作用、相互影响。页面中的所有元素都被看作一个矩形盒子,这个盒子包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。如下图所示: 盒模型内边距: 内容区周围的空间。给元素应用的背景会作用于元素内容和内边距。边框: 在内边距外侧增加一条框线,这条框线可以是实线、虚...原创 2019-04-14 15:12:04 · 746 阅读 · 0 评论 -
CSS-Learning | 外边距折叠机制与解决方案
外边距折叠什么是外边距折叠?简单来说,就是垂直方向上的两个外边距相遇时,会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那一个高度。可能出现外边距折叠的情况当两个元素垂直堆叠时,上方元素的下外边距会与下方元素的上外边距相折叠。 折叠前、后当一个元素嵌套着另一个元素的情况下,假设没有内边距或边框来分隔外边距,它们的上、下外边距也会折叠。 折叠前、后...原创 2019-04-14 18:30:30 · 258 阅读 · 0 评论 -
CSS-Learning | 边框border和border-radius属性设置边框半径:圆角
边框元素的边框 (border) 是围绕元素内容和内边距的一条或多条线,每个边框有 3 个方面:宽度、样式,以及颜色。可以使用border-width一次性设置所有边框的宽度,也可以使用border-top-width这样的方位属性设置某条边框的宽度。使用border-color设置所有边框的颜色,也可以使用border-left-color这样的方位属性设置某条边框的颜色。边框的样式可...原创 2019-04-17 13:47:24 · 3188 阅读 · 0 评论 -
CSS-Learning | background-color属性如何设置背景颜色以及选取颜色值、透明度方法
背景颜色CSS中设置背景颜色,可以通过两个属性:background-color属性和background属性。// background-color属性body { background-color: #bada55;}// background属性body { background: #bada55;}background是一个简写属性,通过它可以一次性设置与背景相...原创 2019-04-16 13:20:31 · 8515 阅读 · 0 评论