CSS基础进阶
文章平均质量分 85
这里记录了所有与CSS和CSS3相关的文章
余光、
一旦走出舒适区,你内心的痛点才是促使你前行的动力
2022年重新出发
展开
-
CSS3复习1-阴影-2D转换
闲话不多说了,准备复习一篇css3的基础知识,如何熟练的运用css3,这需要一个代码量的积累,但是基础一定要牢固,我们共勉~一、阴影、图片、圆角1、CSS3 圆角边框-box-radiusborder-radius:20px;/border-radius:20px 20px 20px 20px;is equivalent to:border-top-left-...原创 2018-08-21 19:38:07 · 330 阅读 · 0 评论 -
CSS3复习2-选择器
一、属性选择器E[att ^ =“val”] {…} 选择匹配元素E, 且E元素定义了属性att, 其属性值以val开头的任何字符串 div[class^="aa"]{以aa开头的 background: red; } E[att $=“val”]{…}选择匹配元素E, 且E元素定义了属性att, 其属性值以val结尾的任何字...原创 2018-08-21 20:48:34 · 328 阅读 · 0 评论 -
CSS3复习3-形状变换-过渡动画-animation
一、transform 可以实现元素的形状、角度、位置等的变化。1、transform: rotate(45deg);旋转45度,deg代表度数rotateX()//X轴旋转rotateY()//Y轴旋转rotatez()rotate3d(x, y, z, angle) x, y, z2、scale(); 以x/y为轴进行缩放 transfo...原创 2018-08-22 17:30:12 · 1612 阅读 · 0 评论 -
【建议收藏】万字整理,一篇文章帮你掌握 Css 选择器
【建议收藏】万字整理,一篇文章帮你掌握 Css 选择器简介直观的 css 选择器,可以美化我们的代码,提高可读性,甚至对浏览器的 Css 解析也有帮助。本篇文章的灵感来自于CSS Diner——一个有趣的 css 选择器小游戏,借助下面的例子相信你一定能掌握 css 选择器的妙用,加油~全篇文章共22个例子,分别使用了标签选择器classid伪元素伪类属性篇幅较长,建议收藏阅读指南先贴出选择器字典,帮助大家回忆基本的选择器含义阅读示例阅读代码,并完成题目(仅思考选择器部原创 2021-09-06 19:20:43 · 3718 阅读 · 24 评论 -
CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶:网格布局(Grid)及其基本属性网格布局(Grid)是最强大的 CSS 布局方案。起初我也认为 flex 布局就可以完成绝大部分布局场景,但谁不希望用更直观、更简洁的方式来布局自己的网页呢,于是 Grid 就是我们的下一站,他与 flex 布局互相弥补,并不会互相取代一、前言上图这样的布局,就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的原创 2021-05-16 17:56:25 · 3403 阅读 · 9 评论 -
CSS之关于弹性盒子 你了解哪些(flex基本属性详解)
CSS基础:Flex基本属性这篇文章我写的很纠结,因为flex布局作为“新”特性,写它的文章没有1w篇也有9999篇了,所以尽量为代码添加实例将flex布局介绍给大家,希望帮助大家和自己提高布局,一个很泛的词,在CSS早期,很多经典的布局都是依靠position+float+display属性。组合使用时稍有不慎就会导致棘手的问题。于是Flex诞生了,flex容器的主要特征是能够修改其子项的宽度或高度,以在不同的屏幕尺寸上以最佳方式填充可用空间。篇幅较长,点个收藏慢慢看?一、Flex是什么?原创 2021-03-03 18:44:40 · 23688 阅读 · 17 评论 -
CSS基础:CSS的上下文之层叠上下文
CSS的上下文之层叠上下文看到层叠,大家一定会联想到定位元素会是的元素之间发生“遮挡”,而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分。本文就来聊一聊css中的层叠上下文到底是如何给元素规定叠加顺序的。一、什么是层叠上下文?层叠上下文,英文称作”stacking context”. 我们假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素原创 2021-02-28 13:35:46 · 16978 阅读 · 9 评论 -
CSS基础:CSS的上下文之BFC
CSS的上下文之BFC看到这个名词,可能会有些陌生,但其实 上下文 = 区域,如果这么理解的话就会有行级上下文、块级上下文、flex上下文等等有一定排列规则的区域,我们今天只聊一聊 块级格式化上下文(BFC)一、什么是BFC?BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文(列举常见的方式):根元素(<html原创 2021-02-25 18:24:07 · 13362 阅读 · 0 评论 -
CSS基础:浅谈position
浅谈position定位(position)允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置—— MDN一、文档流什么是文档流?"文档流"是在对布局进行任何更改之前,在页面上显示"块"和"内联"元素的方式。通常是从上至下,从左到右的形式。这个"流"本质上是一系列的事物,它们都在你的布局中一起工作,并且互相了解。 一旦某部分脱离了"流",它就会独立地工作还记得我们提到了盒模型(块级元素和行级元素),这些单个的元素是如何组原创 2021-02-23 18:40:51 · 30282 阅读 · 12 评论 -
CSS基础:简述CSS盒模型
盒模型问题:简述 CSS 盒模型一、块级盒子(Block box) 和 内联盒子(Inline box)在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为,我们这里不细分析如果转换他们的行为,仅做了解。1.1 块级(block)盒子会表现出以下行为:盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样原创 2021-02-22 18:51:23 · 17197 阅读 · 5 评论 -
CSS基础:谈谈选择器的权重和优先级
你必须懂的css样式权重和优先级尝试给这篇文章前置一个问题;选择器的权重与优先级有什么关系?一、什么是权重?先来看下面这样两段代码,大家分析class="c"的标签内文字的颜色是?<style>.class-a .b .c { color: red;}.class-a .c { color: blue;}</style><div class="class-a" id="id-a"> <div class="b">原创 2021-02-21 16:24:14 · 17526 阅读 · 11 评论 -
值得了解的css代码规范
Css规范CSS是一个前端的基本功,但是每个人写代码的习惯不同,这不利于团队协作开发,所以一套自己认可,他人认可的CSS规范是必不可少的。希望对大家能有所帮助大家可以根据自己的习惯进行微调,但大方向不应该改变。1.缩进✅使用四个空格来代替制表符 (tab) 缩进。.element { position: absolute; top: 10px; left: 1...原创 2019-12-27 15:14:16 · 400 阅读 · 0 评论 -
纯CSS实现弹幕效果
纯CSS实现弹幕效果动画相关的属性和方法已经本部分的开头简单提过了,我们来看一下本次要实现的效果——弹幕~当你在阅读、看视频的时候经常会遇见一段文件或者一张表情从页面划过,要实现一个完整的功能很复杂,但是我们仅仅是看上去和它一样即可~先放一下实现出来的效果图有轨弹幕看标题就可以知道,我们要实现的的在固定行上移动的弹幕(再自己的轨道上移动)。一、简单画一个背景板,三个轨道CSS:....原创 2019-12-02 13:44:00 · 19947 阅读 · 1 评论 -
纯CSS画旋转的太极图
纯CSS画太极图看了CSS开发者大会各位大佬的分享,万物皆可CSS不再是随口说说的我的有趣的CSS仓库也提供了在线预览有趣的CSS传送门,求star!!!旋转的太极-在线预览先上图布局思路一、 画出两个长方形(宽是高的 二分之一即可)组成一个正方形,我们称为“大圆”CSS:.box { display: flex; margin: 0 auto; wi...原创 2019-11-29 17:07:47 · 801 阅读 · 0 评论 -
img图片之间的间隙、inline-block元素之间的间隙
inline-block常见问题场景img图片与图片之间会有莫名的空隙同一行的元素之间会有空隙inline-block的诞生原因在CSS中:块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到行排满,对inline元素设置width,height属性无效...原创 2019-11-08 11:33:56 · 790 阅读 · 0 评论 -
最全CSS效果总结(持续更新)
有趣的CSS和实用样式CSS可以配合标签完成许多酷炫、神奇的效果,如果深入的研究,甚至可以成为前端开发进阶的一个主要方向。所以我们从基础开始,逐渐去了解接触一些有趣的CSS效果(如果对您有帮助,不妨点下star~^~)有趣的CSS一个顶部带有三角形的文本容器选择器妙用伪元素选择器::first-letter(块级元素第一行的第一个字母) 首字母大写::not(设置一组样式最...原创 2019-11-07 10:41:29 · 769 阅读 · 0 评论 -
line-height的使用方式
line-heightline-height 这个属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。一、line-height 属性被指定为以下任何一个:/* Keyword value */line-height: normal; 取决于用户端。桌面...原创 2019-10-12 10:44:09 · 8011 阅读 · 0 评论 -
CSS复习3-盒模型详解
一、盒模型1.元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素:块状元素:块状元素都自带换行效果&amp;amp;lt; div&amp;amp;gt;、&amp;amp;lt; p&amp;amp;gt;、&amp;amp;lt; h1&amp;amp;gt;…&amp;amp;lt; h6&am原创 2018-08-20 09:15:27 · 413 阅读 · 0 评论 -
css复习4-布局-定位
CSS 定位 (Positioning)CSS 外边距合并CSS 相对定位CSS 定位 (Positioning) 属性允许你对元素进行定位。CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或...原创 2018-08-20 10:27:06 · 372 阅读 · 0 评论 -
CSS复习2-文字段落相关
今天复习css最基础的知识之二,很多人对html+css一笔带过,代码能看懂,但是真正运用的时候就会感觉到不流畅,博主我对自己的基础也不是很自信,所有复习一下,我们共勉~!1、文字排版–字号、颜色可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):body{font-size:12px;color:#666}2、文字排版–粗体我们...原创 2018-08-17 20:34:54 · 419 阅读 · 0 评论 -
css清除默认样式(工具)
之前面试的时候,面试老哥问了一个问题,说了一次名词,我也记不住是什么了,听他的解释好像是我们在引入css样式时,需要清楚的一些默认样式,这里我在网上查了一些,平时都是用到哪个就清除哪个,我打算以后让此放在工具中,下次再写网站时直接引入这个工具文件就好了~,我们共勉!html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt,...原创 2018-09-11 15:09:56 · 1987 阅读 · 0 评论 -
移动端初始化css样式文件 reset.css
最近比较忙,各种复习。所以没更新太多实质性内容,下面是我最近接触vue项目是需要提前准备好的移动端css文件,reset.css文件,大家可以看一下,其实就是全面的初始化文件,适合大部分的场景。@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5...原创 2018-09-28 21:15:50 · 3698 阅读 · 0 评论 -
CSS => CSS的前世今生浅谈
作者 | 夏之安然在2019年的今天,我们能在网上看到炫酷的动画加载,精彩绝伦的交互效果,以及从 PC 端到移动端的响应式交互,大家觉得习以为常。可你不知道的是,在 20 多年前,网页仅仅提供了文档展示能力,没有装饰的它就像一张黑白报纸那样简陋。你是否会问:网页是如何变成像今天这样精美的?这就归功于 CSS 了。 CSS 的诞生 20 世纪 90 年...转载 2019-08-28 16:27:29 · 456 阅读 · 1 评论 -
css-利用transform使悬浮图片移动
正在仿写阴阳师的官网首页,发现它涉及到了这个功能,所以记录一下这是W3C中的一个例子,实际运用起来,千变万化。 旋转 div 元素:div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-...原创 2018-08-16 22:19:49 · 2890 阅读 · 0 评论