css
关注
分享
扫一扫
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
Serena_tz
write less，do better️️️
展开
-
手机APP开发中遇到的一些问题
APP下载引导页H5开发，layer弹出层的应用，前端引导页使用插件js，谷歌浏览器如何开启暗黑模式，uni-app富文本图片存在间距的问题原创 2023-02-21 15:13:24 · 229 阅读 · 0 评论 -
CSS 单位（相对长度、绝对长度）
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。rem与em的区别：在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。...转载 2022-07-04 10:28:40 · 210 阅读 · 0 评论 -
css3中使用calc()函数
定义与用法函数用于动态计算长度值。需要注意的是，支持版本：转载 2022-07-04 10:18:02 · 389 阅读 · 0 评论 -
CSS选择器一览表
CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/ 。CSS3选择最新选择器规范： https://www.w3.org/TR/selectors 。1 基本选择器/通配符选择器/ * { margin: 0; padding: 0; border: none; }/元素选择器/ body { background: #eee; }/类选择器/ .list { list-style: square;原创 2021-05-01 13:05:15 · 318 阅读 · 2 评论 -
CSS3媒体查询
1 css3媒体查询css3媒体查询是响应式方案核心。2 媒体类型类型说明all所有媒体（默认值）screen彩色屏幕print打印预览projection手持设备tv电视braille盲文触觉设备embossed盲文打印机speech“听觉”类似的媒体设备tty不适用像素的设备3 媒体属性width （可加max min前缀）height （可加max min前缀）device-w转载 2021-04-30 14:52:37 · 438 阅读 · 2 评论 -
CSS全尺寸背景图像
现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。具体要求如下：用图像填充整个页面（无空白）根据需要缩放图像在页面上居中图像不引发滚动条下面的例子显示了如何实现它：使用 <html> 元素（<html> 元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：html { background: url(img_man.jpg) no-repeat center fixed; back转载 2021-03-16 08:49:45 · 249 阅读 · 0 评论 -
CSS使用自己定义的字体
在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件。提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：@font-face { font-family: myFirstFont; src: url(sansation_light.woff);}div { font-family: myFirstF转载 2021-03-16 08:49:35 · 539 阅读 · 0 评论 -
CSS 变量 var() 函数
var() 函数用于插入 CSS 变量的值。CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。var() 函数的语法var() 函数的语法如下：var(name, value)值描述name必需。变量名（以两条破折号开头）。value可选。回退值（在未找到变量时使用）。转载 2021-03-16 08:49:23 · 5137 阅读 · 0 评论 -
CSS媒体查询
媒体查询语法媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。@media not|only mediatype and (expressions) { CSS-Code;}如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all转载 2021-03-16 08:49:03 · 390 阅读 · 0 评论 -
CSS粘性布局
粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。ul { position: -webkit-sticky; /* Safari */ position: sticky; top: 0;}注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见上面的例子）。您还必须指定 top、right、转载 2021-03-15 15:33:25 · 420 阅读 · 0 评论 -
CSS文本转换
text-transform 属性用于指定文本中的大写和小写字母。它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：p.uppercase { text-transform: uppercase;}p.lowercase { text-transform: lowercase;}p.capitalize { text-transform: capitalize;}...转载 2021-03-15 11:15:47 · 407 阅读 · 0 评论 -
CSS 轮廓
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。CSS 拥有如下轮廓属性：outline-styleoutline-coloroutline-widthoutline-offsetoutline注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。CSS 轮廓样式outline-style 属性指定轮廓的样式，并可设置如下值：dotted - 定义点状的轮廓。dashed转载 2021-03-15 10:51:11 · 377 阅读 · 0 评论 -
CSS 边框样式
border-style 属性指定要显示的边框类型。允许以下值：dotted - 定义点线边框dashed - 定义虚线边框solid - 定义实线边框double - 定义双边框groove - 定义 3D 坡口边框。效果取决于 border-color 值ridge - 定义 3D 脊线边框。效果取决于 border-color 值inset - 定义 3D inset 边框。效果取决于 border-color 值outset - 定义 3D outset 边框。效果取决于 bord转载 2021-03-15 10:36:51 · 970 阅读 · 0 评论 -
CSS 背景属性
属性描述background在一条声明中设置所有背景属性的简写属性。background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。background-clip规定背景的绘制区域。background-color设置元素的背景色。background-image设置元素的背景图像。background-origin规定在何处放置背景图像。background-position设置背景图像的开始位置。ba...转载 2021-03-15 10:33:39 · 105 阅读 · 0 评论 -
CSS图片模态窗口
我们将结合 CSS 和 JavaScript 来一起渲染图片。首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：源代码：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS图片模态窗口</title> <style>转载 2021-02-25 10:53:27 · 478 阅读 · 0 评论 -
CSS 计数器
CSS 计数器通过一个变量来设置，根据规则递增变量。CSS 计数器使用到以下几个属性：counter-reset - 创建或者重置计数器counter-increment - 递增变量content - 插入生成的内容counter() 或 counters() 函数 - 将计数器的值添加到元素实例实例代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>转载 2021-02-25 09:49:49 · 456 阅读 · 0 评论 -
CSS设置图像的透明度
IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。CSS样式：img{ opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */}img:hover{ opacity:1.0;转载 2021-02-25 09:18:53 · 699 阅读 · 0 评论 -
CSS列表项标记浏览器兼容性解决方案
同样在所有的浏览器，下面的例子会显示的图像标记：实例：ul{ list-style-type: none; padding: 0px; margin: 0px;}ul li{ background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }例子解释：ul:设转载 2021-02-25 08:46:22 · 188 阅读 · 0 评论 -
CSS定位（position））之sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bo转载 2021-02-25 08:46:00 · 2492 阅读 · 0 评论 -
垂直居中 - 使用 line-height
单行文本我们设置垂直居中，可以使用line-height的高度和height的高度一致。实例：.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center;} /* 如果文本有多行，添加以下代码: */.center p { line-height: 1.5; display: inline-block; vertical-a原创 2021-02-25 08:45:35 · 743 阅读 · 0 评论 -
HTML+CSS写网站的Logo部分
网站logo，一般放在h1标签里，背景图片为Logo, 但是考虑到seo，网站名称也要写上。网站logo一般只放一个图片，文字部分是不会被显示的，为了隐藏logo中的文字，只给浏览器看但不显示在页面，加样式：text-indent:-9999px。可以参考以下html+css代码：HTML部分：<h1> <a href="https://blog.youkuaiyun.com" alt="优快云 Logo" title="优快云首页"> 优快云 <原创 2021-02-05 09:51:51 · 3585 阅读 · 0 评论 -
CSS让行内元素撑满整个视口
绝对定位之后，top: 0; bottom: 0; left: 0; right: 0;根据盒模型，宽高就是自动的，会让元素撑满position:absolute;top: 0;bottom: 0;left: 0; right: 0;原创 2021-02-05 09:36:45 · 372 阅读 · 0 评论 -
CSS移动端的固定定位，解决IE6固定定位失效的问题（将滚动条给body）
<style>html{width:100%;overflow:hidden;}body{width:100%;overflow:auto;}</style>原创 2021-02-05 09:32:59 · 234 阅读 · 2 评论 -
CSS禁用系统的滚动条（服务于移动端）
<style>html,body{width:100%;overflow:hidden;}</style>原创 2021-02-05 09:31:43 · 172 阅读 · 2 评论 -
CSS常用英语词汇大全
Aabsolute ['æbsəlu:t] 绝对的，完全的active ['æktiv] 活动的，激活的，< a >标记的一个伪类align [ə’lain] 对齐alpha ['ælfə] 透明度，半透明anchor ['æŋkə] 锚记< a >标记是这个单词的缩写area原创 2021-01-05 16:53:48 · 3327 阅读 · 0 评论 -
CSS利用盒模型实现固定定位的效果（小技巧）
（用JS会比较容易，盒模型也可以实现）**布局的公式：**left + margin-left + width + margin-right + right = 视口的宽度1）right如果写死，视口的宽度会变，其他的也会相应调整left自动，窗口变大，left就会自动调整，right永远是写死的那个大小2）right=50%，将right的值设为视口宽度的50%无论你的视口多宽多窄，元素永远在中间，也就是50%如果想让left的值增大，可以让margin-left或margin-right缩小原创 2021-01-05 16:31:36 · 272 阅读 · 0 评论 -
CSS让图片垂直水平居中的方案
父级:{text-align:center;}父级:after:{content:"";display:inline-block;height:100%;vertical-align:middle;}img:{vertical-align:middle;}原创 2021-01-05 16:27:52 · 95 阅读 · 0 评论 -
CSS处理高度塌陷和父子元素外边距重叠的问题
1.高度塌陷2.子父元素外边距重叠：当子元素设置外边距的时候。父元素没有设置外边距。那么子元素设置的按个外边距。会使得两个元素一起移动。解决方法：隔开字符元素即可。也就是在要设置外边距的元素的前面添加一个哥哥元素。使得子元素的外边距，被哥哥元素挡住了，而没有伸出去。这样就避免了重叠问题。3.同时解决以上两个问题为出现高度塌陷和子父元素重叠问题的父元素添加class =“cleaerfix”；然后通过伪类选择器.clearfix:after,.clearfix:before{/在元素的前面添加一个原创 2021-01-05 16:21:09 · 374 阅读 · 0 评论 -
CSS让块元素在div水平居中，并且垂直居中的方法
方法一 ：使用弹性盒。//给父元素设置这三条属性：display : flex; justify-content : center; //水平方向居中align-items : center; //垂直方向居中方法二：使用定位，适用于大小确定的元素，也就是有宽高的元素。//给父元素设置属性：position: relative;给子元素设置这些属性：position: absolute; margin: auto;top: 0;bottom: 0; //垂原创 2021-01-05 16:09:35 · 323 阅读 · 0 评论 -
web前端项目开发重置样式reset.css
前端项目开发重置样式，包括清空浏览器的默认样式、设置网页主体的背景颜色、外间距、内间距、行高、字体大小、字体家族、页面布局、背景颜色样式、颜色、设置超链接的样式、字体大小、文本处理与对齐方式、行高、鼠标样式、告诉部分浏览器不要给图片添加边框、将超出宽度的文字截字并用省略号表示、浮动公共样式、清除浮动公共样式、显示方式与定位、定位的绝对居中、弹性盒的绝对居中、外间距和内间距公共样式，之后可能还会进行修改和补充。CSS代码如下：/*!* reset - v1.1.0 - 9/21/2020 https:原创 2020-09-21 20:12:03 · 1120 阅读 · 0 评论 -
用canvas画一个简易的机器猫头像
用canvas画一个机器猫的头像，原图如下：代码实现效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作业2</title> <原创 2020-09-21 16:41:47 · 926 阅读 · 0 评论 -
用HTML5+CSS3画一个简易的机器猫头像
布局使用了绝对定位、相对定位以及浮动，鼻子使用了背景图像渐变的效果， 笑脸的嘴巴使用椭圆的下边框实现，胡须部分的细节处理得还是不够好。原创 2020-09-16 00:34:43 · 2018 阅读 · 5 评论