CSS学习
关注
分享
扫一扫
qq_16714671
这个作者很懒，什么都没留下…
展开
-
CSS画三角形
原理：1、div 的高宽设置为0 width: 0;height: 0;2、div设置边框，边框颜色透明色，边框大小代表三角形大小 border: 100px solid transparent;3、想要那个方向的三角形就设置那个方向三角形颜色 border-left-color: pink;左三角形与上三角形制作css 样式<!DOCTYPE html><html lang="en"><head> <meta charset.原创 2022-01-21 17:54:31 · 650 阅读 · 0 评论 -
文字溢出自动显示省略号
注意点：省略号的css代码为：text-overflow: ellipsis; 这行代码经常不起作用，是因为其必须满足两个条件：1、宽度必须设置；2、同时设置white-space: nowrap(不换行); 和overflow: hidden（超出部分隐藏）。因此，完整css代码：div { width: 150px; height: 80px; background-color: pink; margi原创 2022-01-18 10:37:27 · 357 阅读 · 0 评论 -
box-sizing: border-box；盒子包含内外边距及边框
正常盒子模型高宽都包含了内外边距及边框的值。盒子最终的大小的高包括：边框、外边距、内边距、高度。高度与内外边距及边框分表计算盒子最终的大小的宽包括：边框、外边距、内边距、高度。宽度与内外边距及边框分表计算设置box-sizing: border-box;后，盒子最终的大小的宽高height的大小，盒子最终的大小的宽 width的大小。原始盒子模型：加入box-sizing: border-box;属性后...原创 2022-01-10 17:33:59 · 1205 阅读 · 0 评论 -
为什么要清除浮动？
浮动的属性虽然方便使用，但是在使用这种属性时，也存在着一种弊端，那就是当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)高度塌陷效果如下：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content原创 2022-01-10 17:23:19 · 76 阅读 · 0 评论 -
文字阴影text-shadow
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 代码：<!DOCTYPE html><html lang="en"><head> <原创 2022-01-10 17:09:38 · 152 阅读 · 0 评论 -
div添加阴影（盒子阴影）box-shadow各参数含义
box-shadow: h-shadowv-shadowblurspread color;五个参数含义：h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离，实际是模糊程度 spread 可选。阴影的大小 color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 代码：<!DOCTYPE html><html lang="en">...原创 2022-01-10 17:02:53 · 6916 阅读 · 0 评论 -
利用border-radius制作圆形、圆角矩形、半圆
设置div的宽高、利用border-radius属性制作。圆形图案：div 的宽高必须相同，border-radius的值是div宽度和高度的一半圆角矩形图案：border-radius的值是div高度的一半半形图案：div 的宽是高的一半，border-top-left-radius与border-bottom-left-radius的值是div高度的一半代码：<!DOCTYPE html><html lang="en"><head>原创 2022-01-10 16:53:10 · 5261 阅读 · 0 评论 -
圆角边框,border-radius
border-radius: 10px; border-radius的值越大，其边框的弯度越大。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=.原创 2022-01-10 16:44:13 · 111 阅读 · 0 评论 -
CSS 多个选择器优先级，叠加选择器权重，important
一、单选择器优先级多个单选择器优先级：权重越大，其优先级越高，优先生效。!important表示权重最大，有!important修饰的永远优先生效。!important>style>ID选择器>类选择器>元素选择>继承及*选择器权重表如下：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2022-01-10 09:25:04 · 1608 阅读 · 1 评论 -
CSS层叠性（pink学习）
相同选择器，后面属性会覆盖前面属性。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge原创 2022-01-07 17:08:12 · 103 阅读 · 0 评论 -
背景色透明写法rgba(0, 0, 0, .1)
rgba(0, 0, 0, .1) 最后一位表示权重，权重越大，越不透明代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl原创 2022-01-07 17:04:51 · 1342 阅读 · 0 评论 -
背景固定background-attachment: fixed；
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title原创 2022-01-07 17:01:12 · 103 阅读 · 0 评论 -
单行文字垂直居中
垂直居中line-height要设置和height一样高代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con原创 2022-01-07 16:58:06 · 292 阅读 · 0 评论 -
利用块元素转换做侧边栏（block）
思路：将行内标签<a>设置为块元素，display:block 即可实现换行。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-原创 2022-01-07 16:55:11 · 95 阅读 · 0 评论 -
focus伪类选择器
input输入框选中时触发代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2022-01-07 16:50:02 · 81 阅读 · 0 评论 -
line-height 行间的距离
line-height 表示行间距大小。测量方式为：最上行顶端到下行顶端的距离代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com原创 2022-01-07 15:21:16 · 591 阅读 · 0 评论 -
首行缩进2字符，CSS文本外观之文本缩进
text-indent属性text-indent: 20px; --缩进20pxtext-indent: 2em; --2em 则是缩进当前元素 2个文字大小的距离代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale原创 2022-01-07 15:08:54 · 671 阅读 · 0 评论