【CSS3】
关注
分享
扫一扫
文章平均质量分 51
CSS的一些基本知识
王同学要努力
24届毕业生 计科专业
无论身处何方，陷于何地，都要向下扎根，向上开花，不负生活，不负自己！
展开
-
【CSS】解决图片和盒子底部产生的缝隙问题
【CSS】解决图片和盒子底部产生的缝隙问题好久没写CSS了，一般都是用的框架（CVCV），项目中遇到的一些问题记录一下问题如下：解决办法：设置以下属性：vertical-align: top/bottom/middle;原创 2021-10-24 16:10:06 · 1202 阅读 · 1 评论 -
重置样式表
重置样式表官网地址：https://clarle.github.io/yui3/yui/docs/cssreset//*YUI 3.18.1 (build f7e7bcb)Copyright 2014 Yahoo! Inc. All rights reserved.Licensed under the BSD License.http://yuilibrary.com/license/*/html{color:#000;background:#FFF}body,div,dl,dt,dd,原创 2021-10-23 17:33:28 · 212 阅读 · 2 评论 -
呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！
JS知识点总结，超详细，建议收藏一、语法和变量（一）、前端三层（二）、JS的书写位置（三）、输出语句（四）、变量声明提升变量的声明提升：你可以提前使用一个稍后才声明的变量，而不会引发异常在执行所有代码前，JS有预解析阶段，会预读所有变量的定义二、基本数据类型（一）、JavaScript中两大类数据类型（二）、typeof运算符typeof运算符可以检测值或者变量的类型...原创 2021-10-14 09:25:59 · 42464 阅读 · 71 评论 -
保姆级教程 CSS 知识点梳理大全，超详细！！！
CSS入门，看这一篇就够了，超详细！！！一、前端三层二、CSS的书写位置(一)、内嵌式内嵌式，顾名思义，内嵌在.html文件中在<head></head>标签中，书写 <style></style>标签对，里面书写CSS语句。(二)、外链式可以将CSS单独存为.css文件，然后用link标签引入它外链式的优点：多个HTML文件，可以共用一个CSS样式表文件(三)、 导入式导入式是最不常见的样式表导入方法,使用导原创 2021-10-08 09:30:00 · 16493 阅读 · 60 评论 -
两个或者多个图片上下之间有空隙
两个或者多个图片上下之间有空隙问题：两个或者多个图片上下之间有空隙？方法一：设置以下属性img { outline-width:0px; vertical-align:top; }方法二：多个标签写在一行，不可有空格或者回车...原创 2021-09-30 15:36:14 · 740 阅读 · 0 评论 -
css鼠标hover的时候变成小手型
css鼠标hover的时候变成小手型a：hover{cursor:pointer}原创 2021-08-26 07:21:50 · 2000 阅读 · 6 评论 -
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
十款表白小特效 用代码表白 一个比一个浪漫 赶紧收藏起来吧！！！文章简介最近看了一街坊视频，问路人“你眼中的程序员是怎样的?”然后一堆关键词就出来了“直男、宅、不懂浪漫、秃头、掉发、油头、戴眼镜、瘦、没得休息、枯燥乏味、不修边幅、做事有逻辑、学霸、认真、憨厚老实、可爱 哈哈哈哈哈哈”。 说程序员是直男，不可否认，大多数程序员都挺直，因为我们没有那么多弯弯绕绕。有心思兜圈子，不如回去写几行代码。早年雷军说“我喜欢写代码，代码的世界很简单”程序员，格子衫，不浪漫，直男，人傻钱多……一点都不懂得原创 2021-08-13 14:05:12 · 574172 阅读 · 915 评论 -
我用 CSS 告诉你，我每天是怎么度过的~
我用 CSS 告诉你，我每天是怎么度过的~代码如下* { padding: 0; margin: 0;}html,body { height: 100%;}body { background-color: rgb(81, 43, 80); display: flex; justify-content: center; align-items: center;}.main-container { width: 30原创 2021-08-02 11:48:14 · 299 阅读 · 4 评论 -
CSS画心形的三种方法，超级简单
CSS画心形的三种方法，超级简单一、一颗div一颗心用一个div画出一个心，核心的方法就是使用伪元素首先，我们在页面上先写出一个div使用CSS，将这个div变为一个橘红色的正方形：接着我们利用元素的两个伪元素:before和:after，画出一个蓝色的圆和一个黄色的圆，并且将它们的圆心分别定位在正方形的上边和右边。再来，将刚刚实现的两个圆变成和正方形一样的颜色最后，将元素div旋转45度，我们要的心形就实现了！就是这么简单全部代码如下，拿去跟女朋友表白吧<!DOCT原创 2021-07-30 08:19:37 · 12621 阅读 · 21 评论 -
CSS：实现文本超出显示省略效果（可指定几行显示）
CSS：实现文本超出显示省略效果（可指定几行显示）代码如下原创 2021-07-29 10:54:19 · 399 阅读 · 3 评论 -
CSS：设置字母间距、中文汉字间距
CSS：设置字母间距、中文汉字间距一、 letter-spacing：设置汉字间字间距或者英文单词中每个字母的间距 .box{ letter-spacing: 10px; /* 取正值：字符之间的距离变大；取负值：字符之间的距离变小 */ } <div class="box"> 忳郁邑余侘傺兮,吾独穷困乎此时也,宁溘死以流亡兮，余不忍为此态也。 </div>二、 word-spacing:设置英文每个单词之间的距离，对中文文字之原创 2021-07-16 18:11:20 · 5352 阅读 · 0 评论 -
CSS：去除input和button边框以及选中时边框默认样式
CSS：去除input和button边框以及选中时边框默认样式<input type="text"> input{ border: 0; // 去除未选中状态边框 outline: none; // 去掉外边的蓝色边框 background-color: rgba(0, 0, 0, 0);// 透明背景 }Button 按钮的点击时候出现蓝色边框的问题button{ outline:none; }...原创 2021-07-16 17:46:45 · 2326 阅读 · 0 评论 -
解决margin-top塌陷问题的六种方法
解决margin-top塌陷问题的六种方法什么是margin-top塌陷？margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。怎么解决margin-top塌陷？对于margin-top的塌陷问题，可以从以下几点去解决，亲测有效：1.给父元素增加边框为了不影响原先的图转载 2021-07-13 10:23:10 · 2220 阅读 · 1 评论 -
CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角、盒阴影、字阴影人生没有白走的路，每一步都算数。一、圆角border-radius:; 取值px % border-radius: 50%; 画一个圆二、盒阴影box-shadow:水平方向偏移的位置 垂直方向偏移的位置 模糊度 阴影的尺寸 颜色 位置； 必须 必须 可选 可选 可选 可选 正负原创 2021-03-16 22:52:30 · 248 阅读 · 1 评论 -
浅谈Rem 及其转换原理
浅谈Rem 及其转换原理今天有小伙伴问了我Rem的转换原理，那我就写篇博客记录一下吧！rem 是 CSS3 新增的相对长度单位，是指相对于根元素 html 的 font-size 计算值 的大小。默认根元素的 font-size 都是 16px 的。如果想要设置 12px 的字体大小也就 是 12px/16px = 0.75rem。由于 px 是相对固定单位，字号大小直接被定死，无法随着浏览器进行缩 放。rem 直接相对于根元素 html，避开层级关系，移动端新型浏览器对其支持原创 2021-03-15 22:24:00 · 1208 阅读 · 0 评论 -
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）一、什么是雪碧图？雪碧图（CSS Sprite）又叫CSS精灵图，是一种网页图片应用处理方式，他允许你将一个页面设计到 所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求，客户端显示一张图片都会向服务器发送请求，所以图片请求越多，造成延迟的可能性就越大，当页面有许多字体图标时，推荐使用CSS Sprite 。想必大家都用过雪碧图吧，话不多说，看看雪碧图是啥玩意儿：看看金立官网的雪碧图：二、那原创 2021-03-15 21:59:06 · 11678 阅读 · 2 评论 -
浅谈CSS3中的弹性布局
浅谈CSS3中的弹性布局现在的努力，只是为了实现小时候吹过的牛逼一、什么是弹性布局？Flex是Flexible Box的缩写，意为"弹性布局"，他为盒模型提供了最大的灵活性。它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案—Flex布局，可以简便、完整、响应式地实现各种页面布局。他主要是用于移动端布局，对一个容器中的元素进行排列，对齐和分配空白空间。二、基本概念采用Flex布局的元素，称为Flex容器（flex conta原创 2021-03-13 17:37:44 · 570 阅读 · 0 评论 -
iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法一、打开阿里巴巴矢量图官网阿里巴巴矢量图官网界面如下：二、选择登录：可以使用GitHub账号登录，用其他账号也可以这里我选择用GitHub账号登录三、搜索自己想要的图标：这里我输入的是购物车，显示结果如下：四、找到自己想要的图标，点击加入库五、点击购物车图标六、创建项目，当然也可以不创建，怎么方便怎么来嘛七、这里选择Unicode，点击下载本地八、将下载好的字体图标的压缩包解压，放到CSS文件夹中九、在HTML中引入iconfo原创 2021-03-12 17:01:57 · 3067 阅读 · 6 评论 -
今天来总结一下CSS中有哪些定位
今天来总结一下CSS中有哪些定位1、固定定位：fixed元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。2、相对定位：relative如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。3、绝对定位absolute绝原创 2021-03-08 14:16:31 · 240 阅读 · 0 评论 -
CSS练习题
CSS练习题人们都说抖音记录美好生活，我说博客记录美好生活！随手练练CSS1、margin——控制网页元素的位置，页面效果如下：代码如下：<!doctype html><html><head><meta charset="utf-8"><title>控制网页元素的位置</title><link href="style/2-7.css" rel="stylesheet" type="text/css">原创 2021-03-08 13:56:41 · 654 阅读 · 0 评论 -
今天来谈谈CSS有哪些布局
今天来谈谈CSS有哪些布局六种布局方式总结:圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网格布局。1、圣杯布局是指布局从上到下分为header、container、 footer, 然后container部分定为三栏布局。这种布局方式同样分为header、container、 footer。 圣杯布局的缺陷在于center 是在container 的padding中的，因此宽度小的时候会出现混乱。2、双飞翼布局给center部分包裹了一一个main 通过设置margin主动地把页面撑原创 2021-03-07 23:06:37 · 307 阅读 · 0 评论 -
今天来谈谈内容溢出和文字溢出的问题
今天来谈谈内容溢出和文字溢出问题1、内容溢出overflow：hidden|auto|scroll;overflow：hidden;表示溢出部分隐藏（自动找高，自动找到原位置）overflow：auto;自动,当内容溢出显示滚动条，当内容不溢出就没有滚动条overflow：scroll;溢不溢出都显示滚动条2、一行文字溢出省略号显示：一行文字溢出我们在小米官网最常见了，不信看下图，个人觉得还挺重要的：1）在同一行显示：white-space:nowrap;2)溢出部分隐藏：原创 2021-03-06 22:13:09 · 452 阅读 · 0 评论 -
详解用backgroundImage解决图片轮播切换
详解用backgroundImage解决图片轮播切换css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配 使用样例如下：单dom节点实现轮播利用backgroundImage可以添加多张图片，以及位置偏移实现轮播效果backgroundImage,图片轮播创建一个div；并用backgroundImage给div附图片利用backgroundPosition调节位置利用css3 transition调节过渡即可替代简单的图片切换/*** 播放原创 2021-02-25 15:39:17 · 1261 阅读 · 0 评论 -
CSS骚操作之表单验证功能的实现代码
CSS骚操作之表单验证功能的实现代码效果图如下：原理：表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证…）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验证的元素；于是就可以随便搞啦，上面的效果图只是做一些简单的效果，更多效果大家就发挥自己的想象力咯！html部分：布局很简单，input跟button是兄弟节点的关系，required属性是必填的意思，也就是输入的内容必须要验证通过，代码如下：原创 2021-01-19 20:03:29 · 394 阅读 · 0 评论 -
CSS基本知识—浮动
CSS基本知识—浮动1、传统网页布局的三种方式网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置.CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：1、普通流（标准流）2、浮动3、定位2、标准流（普通流/文档流）所谓的标准流: 就是标签按照规定好默认方式排列。块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元原创 2021-01-09 20:48:12 · 358 阅读 · 0 评论 -
深入理解CSS中的line-height的使用
深入理解CSS中的line-height的使用什么是line-height(行高)？line-height 是指两行文字基线之间的距离。什么是基线？基线、底线、顶线、中线注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。不同字体的基线不尽相同。什么是行内框盒子模型？我们通过下面这段代码进行讲解<p>这是一行普通的文字，这里有个<em>em</em>标签</p>在这段代码中包含了 4 中盒子：co原创 2021-01-09 13:20:02 · 2397 阅读 · 2 评论 -
CSS基本知识之盒子模型
CSS基本知识之盒子模型首先要知道什么是盒子模型？所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容1. 盒子模型看透网页的本质：网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子 Box 。利用 CSS 设置好盒子样式，然后摆放到相应位置。往盒子里面装内容.网页布局的核心本质： 就是利用 CSS 摆盒子。2、盒子模型（Box M原创 2021-01-07 18:09:41 · 561 阅读 · 0 评论 -
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器、元素显示模式、背景、特性一、复合选择器在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素（标签）复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等二、后代选择器 (重要）后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面原创 2021-01-05 17:12:06 · 377 阅读 · 0 评论 -
CSS 引入方式
CSS 的三种样式表按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：1、行内样式表（行内式）内部样式表（嵌入式）外部样式表（链接式）内部样式表内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 ...原创 2021-01-04 21:27:17 · 285 阅读 · 0 评论 -
CSS基本知识之常用的选择器分类
一、CSS基本知识：1、CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。2、CSS 是也是一种标记语言3、CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。4、CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。5、CSS 最大价值: 由 HT原创 2020-12-27 16:46:07 · 1420 阅读 · 0 评论