CSS
关注
分享
扫一扫
CSS
Misnice
这个作者很懒，什么都没留下…
展开
-
CSS 常见选择器
选择类名为 container 的所有元素。选择所有 p 标签，并将文字颜色设为蓝色。选择 ID 为 header 的元素。选择所有位于 div 内的 p 标签。选择所有指定类型的 HTML 元素。选择 div 的直接子元素 p。原创 2024-10-22 12:00:22 · 517 阅读 · 0 评论 -
css隐藏元素滚动条
【代码】css隐藏元素滚动条。原创 2024-10-21 10:20:26 · 396 阅读 · 0 评论 -
flex布局中子元素内容超出时，子元素本身出现滚动条实现方法
flex布局中子元素宽度平均分配，并且当子元素内容超出时，子元素本身出现滚动条原创 2024-07-02 11:33:04 · 1151 阅读 · 0 评论 -
react项目如何引入字体文件
项目中如何引入字体文件原创 2024-04-25 10:22:48 · 757 阅读 · 0 评论 -
gap属性控制网格行与列之间的间隙
gap 属性是用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式。适用于Flex布局、Grid布局、多列布局。原创 2024-03-08 20:29:31 · 311 阅读 · 0 评论 -
css 背景图片居中显示
【代码】css 背景图片居中显示。原创 2024-03-08 17:20:12 · 356 阅读 · 0 评论 -
css单行多出显示省略号
实现这个效果的元素的width属性需要有个固定的值width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;原创 2021-10-31 20:59:05 · 203 阅读 · 0 评论 -
解决span标签之间的空隙问题
在html中，如果两个span之间换行书写的话，那么他们在页面上展现的时候往往会有空隙如：<div> <span>第一个标签文字</span> <span>第二个标签文字</span></div>解决方案：1.将两个span标签写在同一行<div> <span>第一个标签文字</span><span>第二个标签文字</span></原创 2021-10-22 14:15:36 · 2440 阅读 · 0 评论 -
CSS函数cale()的使用
calc(calculate的简写)是一个函数，用来指定元素的长度或者宽度，是css3新增的功能，通过计算出来的值就是元素的长度或者宽度HTML:<div class="box">盒子<div>CSS:.box { width:90%; width: -moz-calc(100% - (10px + 20px) * 2); width: -webkit-calc(100% - (10px + 20px) * 2); width: c转载 2021-02-09 11:41:42 · 5866 阅读 · 0 评论 -
flex布局常用属性
弹性盒（Flexible Box）是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(父级元素)和弹性子元素(子级元素)组成。弹性容器通过将父级元素设置 display 属性的值为 flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。先简单写个栗子：<!DOCTYPE html>原创 2020-09-16 10:25:58 · 2023 阅读 · 1 评论 -
CSS实现三角形带阴影效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS实现带阴影效果的三角形</title> <style> .box { position: relative; width: 600px;原创 2020-07-27 10:26:35 · 1289 阅读 · 0 评论 -
前端开发css禁止选中文本
.node{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ ...原创 2020-04-22 11:43:24 · 300 阅读 · 0 评论 -
input常用属性
<input type="text" name="groupName" id="groupName" value="" autocomplete="off" readonly="readonly" placeholder="组名称">autocomplete 属性规定表单或输入字段是否有自动输入功能。当自动输入打开时,浏览器会将缓存变为选择框可以自动输入,将其值设为off可关闭...原创 2019-08-30 10:09:49 · 852 阅读 · 0 评论 -
css 定位元素上下左右居中
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title></title> <style> *{margin:0;padding:0;} .box{ width:300px;he...原创 2020-02-26 12:09:25 · 909 阅读 · 1 评论 -
清除浮动的常用方法
1.在最后一个浮动标签后，新加一个标签，将其样式设置为 clear：both；2.在父级元素添加样式 overflow:hidden; 此方法会将多出的内容裁切掉，无法显示要溢出的元素3.使用before和after双伪元素清除浮动<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2020-01-22 15:43:05 · 281 阅读 · 0 评论 -
animate.css的使用介绍
1.下载animate.css文件2.在html中引入animate.css文件3.在网站里找到想要的效果，然后将class写在标签里就可以了，网站里可以看到每个效果的class原创 2020-01-06 10:30:31 · 266 阅读 · 0 评论 -
css将背景设置为透明色
background-color:transparent；原创 2019-11-15 19:39:21 · 1088 阅读 · 0 评论 -
css常用样式
*{margin:0;padding:0;}li{list-style: none;}a{text-decoration:none;cursor:pointer;}i{font-style:normal;}b{font-weight:normal;}原创 2019-09-09 15:39:07 · 164 阅读 · 0 评论