CSS
关注
分享
扫一扫
文章平均质量分 92
CSS
若年封尘
这个作者很懒，什么都没留下…
展开
-
2023前端大厂高频面试题之CSS篇(2)
页面导入样式表时，和@import的区别伪类和伪元素三栏布局，左右两栏固定，中间自适应两栏布局，左边固定，右边自适应清除浮动CSS的相对单位CSS外边距重叠CSS常用单位原创 2023-11-16 17:48:57 · 668 阅读 · 1 评论 -
2023大厂高频面试题之CSS篇
css的position属性取值css选择器优先级和权重box-sizing属性CSS 盒子模型CSS实现三角形CSS布局弹性布局display:flex实现一个垂直水平居中隐藏页面元素的方法style-componentsHTML脱离文档流的方法block，inline和inlinke-blocktransition与animation区别...原创 2022-05-18 21:42:57 · 1827 阅读 · 2 评论 -
CSS样式为什么不起作用？史上最全解决方法汇总
在我们写页面时，有时会发现自己写的css样式无法生效，导致这种现象的原因有很多，下面列举一些常见的原因希望可以帮到你，欢迎评论区补充。目录浏览器缓存问题细节问题样式表关联问题选择器问题编码格式问题样式层叠问题浏览器缓存问题如果你反复检查认为代码没有问题，那么可能是浏览器缓存的问题。在排查前先试一下清除浏览器缓存，重启浏览器或者换个浏览器等手段，无效后再进行进一步排查。有可能自己什么都没有做...原创 2020-03-28 14:30:12 · 23651 阅读 · 31 评论 -
CSS中的三种基本的定位机制
目录CSS 定位机制CSS position 属性总结CSS 定位属性(注：编辑器会根据文章标题自动生成目录)CSS 定位机制CSS 有三种基本的定位机制：普通流、浮动和绝对定位。一、普通流 除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置...转载 2020-03-21 23:11:44 · 1975 阅读 · 0 评论 -
按钮水平居中的实现方法
让按钮居中的方式主要有以下两种：一、首先将button变成块级元素，再给它设置margin:0 auto；即可。<button style="display:block;margin:0 auto">按钮水平居中</button> 二、给button父级元素设置text-align:center。<div style="text-align:center"&...原创 2019-11-03 16:00:24 · 9601 阅读 · 1 评论 -
css居中布局方法
1.水平居中最简单的办法：margin:0 auto;也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。2.文字的水平居中方法：text-align:center;3.文字的垂直居中方法：.center{ line-height: 200px;/*垂直居中关键*/ height: 200px; font-size: 3...原创 2019-10-17 22:07:59 · 483 阅读 · 1 评论 -
CSS3实现径向渐变
径向渐变的基础知识：径向渐变的概念：从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）。一、径向渐变的基本语法：background-image:-webkit-gradient(type,x1 y1,r1,x2 y2,r2,from(开始颜色值),to(结束颜色值),color-stop(偏移量小数,停靠颜色值),... );第一组参数type（类型）为 radial，因为是径向渐变...原创 2019-08-28 01:23:57 · 5452 阅读 · 0 评论 -
纯css3实现动画 1.平移动画
平移动画浏览器实现效果：平移动画实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>figure demo</title> <style type="text/css"> body,figure,fig...原创 2019-08-29 00:03:22 · 6663 阅读 · 0 评论 -
css3实现动画 2.旋转动画
旋转动画浏览器实现效果：旋转动画实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>figure demo</title> <style type="text/css"> body,figure,fig...原创 2019-08-29 00:10:19 · 754 阅读 · 1 评论 -
纯css3实现动画 3.扭曲动画
扭曲动画浏览器实现效果：扭曲动画实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>figure demo</title> <style type="text/css"> body,figure,fig...原创 2019-08-29 00:16:57 · 1161 阅读 · 1 评论 -
纯css3实现动画 4.缩放动画
缩放动画浏览器实现效果：缩放动画实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>figure demo</title> <style type="text/css"> body,figure,figc...原创 2019-08-29 00:31:19 · 3653 阅读 · 1 评论 -
CSS动画 animation与transition
一、区分容易混淆的几个属性和值先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix；tr...转载 2019-08-29 10:47:04 · 355 阅读 · 0 评论 -
CSS3属性选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素，下面举几个例子介绍一下css3选择器，有助于平时css样式的简化书写：代码举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3选择器</title> &...原创 2019-09-03 21:13:34 · 351 阅读 · 2 评论 -
css动画实现鼠标经过，图片放大效果
浏览器实现效果：自己在浏览器实现时当鼠标移上图片有放大效果代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片放大案例</title> <style type="text/css"> div{ ...原创 2019-09-03 22:28:20 · 13347 阅读 · 1 评论 -
HTML、CSS、JavaScript开发规范
尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。属性顺序HTML 属性应该按照特定的顺序出现以保证易读性。idclassnamedata-xxxsrc, for, type, hreftitle, altaria-xxx, roleIE 兼容模式优先使用最新版本的IE 和 Chrome 内核 <...原创 2019-09-23 11:28:19 · 281 阅读 · 0 评论 -
CSS定义超链接四个状态的正确顺序L-V-H-A
CSS定义超链接的先后排列顺序: L-V-H-A 。L-V-H-A是link、visited、hover、active的简写。 它们分别表示 ：L:link 超链接的默认样式V:visited 访问过的（已经看过的）链接样式H:hover 鼠标处于鼠标悬停状态的链接样式A:active 当鼠标左键按下时，被激活（就是鼠标按下去那一瞬间）的链接样式一般超链接4种状...原创 2019-09-26 00:41:19 · 3344 阅读 · 1 评论 -
CSS Sprite雪碧图实现登录界面
浏览器实现效果：代码实现：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><he...原创 2019-08-28 01:05:27 · 243 阅读 · 0 评论 -
css实现图片翘边阴影
css阴影：box-shadow 属性用于向框添加一个或多个阴影。语法：box-shadow: h-shadow v-shadow blur spread color inset;h-shadow 必需。水平阴影的位置。允许负值。v-shadow 必需。垂直阴影的位置。允许负值。blur 可选。模糊距离。spread 可选。阴影的尺寸。color 可选。阴影的颜色。请参阅 CSS ...原创 2019-08-27 15:56:52 · 1055 阅读 · 0 评论 -
CSS基础知识（自学日记）
w3cschool上对css的概述：CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一我个人对于css的理解：如果说HTML是一个裸体的人，那么CSS...原创 2019-04-01 15:18:39 · 324 阅读 · 0 评论 -
CSS盒模型之内边距padding
CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）。内边距呈现了元素的背景。内边距的边缘是边框（border）。边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置...原创 2019-03-31 22:03:55 · 526 阅读 · 0 评论 -
CSS盒模型之边框border
1. border-width不支持百分比： 是语义和使用场景决定的，边框不会因为设备大就按比例变大的，所以百分比单位就不和语义。类似的还有outline，box-shadow，text-shadow……2. border与三角等图形构建：显示混合图形： <!DOCTYPE html> <html> <head> <ti...原创 2019-03-31 14:40:23 · 398 阅读 · 0 评论 -
CSS盒模型之外边距margin
CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）。内边距呈现了元素的背景。内边距的边缘是边框（border）。边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置...原创 2019-03-31 18:14:47 · 472 阅读 · 0 评论 -
CSS深入理解之float
float 属性定义元素在哪个方向浮动。产生之初这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。让设置的标签产生浮动效果，就是脱离原来页面的标准输出流。HTML页面的标准文档流(默认布局)：从上到下，从左到右，遇到块级元素换行。如果想实现左...原创 2019-04-01 13:41:34 · 474 阅读 · 0 评论 -
CSS选择器优先级及写法
css的选择器有很多种，那么，自然而然的就会有优先级这一概念出现；下面就先来了解一下css的选择器有哪些：1.标签选择器(如：body,div,p,ul,li)2.类选择器(如：class=“head”,class=“head_logo”)3.id选择器(如：id=“name”,id=“name_txt”)4.全局选择器(如：*号)5.组合选择器(如：.head .head_logo,注...原创 2019-05-19 15:38:02 · 1296 阅读 · 0 评论 -
纯css制作3D旋转导航
用css实现3D旋转导航：代码：<!DOCTYPE html><html><head>> <title>制作3D旋转导航</title> <style> @import url("https://www.w3cplus.com/demo/css3/base.css"); @font-face { ...原创 2019-08-23 10:59:09 · 849 阅读 · 1 评论 -
css制作3D立体旋转效果
通过纯css制作出3D旋转效果，以展示中国部分知名公司为例：浏览器实现结果：6个名片都具有两面，一面图片，一面文字，当鼠标放在图片上时，就会3D旋转成文字的一面。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D变形制作视频展...原创 2019-08-24 12:29:29 · 1842 阅读 · 0 评论 -
CSS3 结构性伪类选择器—target（实现点击按钮显示内容）
:target 选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。单个url（单个target）处理：HTML代码： <p><a href="#ex">显示按钮</a></p> <div class="example" id="ex"> 单个target示例 </div&...原创 2019-08-17 10:34:36 · 2573 阅读 · 0 评论 -
a链接的状态及相关用法（去掉a链接下划线）
a链接的状态：a : 表示所有状态下的连接 如 a{background: orange;color: #fff;}a:link： 未访问链接 ,如 a:link {background: orange;color: #fff;}a:visited： 已访问链接 ,如 a:visited{background: orange;color: #fff;}a:active： ...原创 2019-08-17 11:30:01 · 6659 阅读 · 0 评论 -
css的属性
CSS符号属性：list-style-type:none; /不编号/list-style-type:decimal; /阿拉伯数字/list-style-type:lower-roman; /小写罗马数字/list-style-type:upper-roman; /大写罗马数字/list-style-type:lower-alpha; /小写英文字母/list-style-type:...原创 2019-08-22 21:52:07 · 236 阅读 · 1 评论 -
CSS3选择器 ::selection选择器
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。注意：1、IE9+、Opera、Google Chrome 以...原创 2019-08-18 11:58:02 · 553 阅读 · 0 评论 -
纯css做3D立方体
纯css做3D立方体：效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D立方体</title> <style type="text/css"> /*首先给html设置一个背景*/ html{...原创 2019-08-26 11:26:56 · 341 阅读 · 0 评论 -
css实现绚丽照片墙
实现结果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css照片墙</title> <style type="text/css"> body{ background: linear-gradi...原创 2019-08-26 20:55:26 · 750 阅读 · 0 评论 -
css实现图片曲线阴影
css阴影：box-shadow 属性用于向框添加一个或多个阴影。语法：box-shadow: h-shadow v-shadow blur spread color inset;h-shadow 必需。水平阴影的位置。允许负值。v-shadow 必需。垂直阴影的位置。允许负值。blur 可选。模糊距离。spread 可选。阴影的尺寸。color 可选。阴影的颜色。请参阅 CSS ...原创 2019-08-27 15:13:27 · 1180 阅读 · 0 评论 -
HTML、CSS基础知识及实用技巧（更新中~）
HTML基础知识：1、HTML是指 超文本标记语言（Hyper Text Markup Language）。2、Web 标准的制定者是 万维网联盟（W3C）。3、添加背景颜色 <body bgcolor="yellow">。4、产生粗体字的 HTML 标签:<b>;产生斜体字的 HTML 标签：<i>；产生超链接的HTML标签：<a href="h...原创 2019-04-03 23:00:47 · 670 阅读 · 1 评论