CSS
前端imber
这个作者很懒,什么都没留下…
展开
-
CSS基础知识
title: CSS3基础知识 order: 2 基础知识点 C3计算属性? 说一下选择器权重? 定位都有哪些属性?说一下fixed和sticky? 说一下阴影值和渐变? 阴影常常把前两个值设为0(x偏移量和y偏移量),第三个值为模糊半径(可选参数,一般不写),第四个值为阴影大小,第五个为颜色,第六个值(可选参数)设为inset就是内部阴影。 box-shadow: 0px 0px (2px) 2px red (inset); 渐变分为线性渐变和径向渐变 线性:background-image: .原创 2021-12-02 14:14:22 · 364 阅读 · 1 评论 -
CSS圣杯布局和双飞翼布局
圣杯布局: 参考 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>圣杯布局练习</title> <style> * { box-s原创 2021-08-16 11:14:43 · 58 阅读 · 0 评论 -
BFC
行内块inline-block: 拥有行内元素的熟悉,可以设置宽高,如果没有内容,就是小空格 BFC: 什么是BFC:块级格式化上下文,独立的渲染区域,规定内部Block-level Box如何布局,并且这个区域与外部豪不关联 创建BFC: float的值不是none。 position的值不是static或者relative。 display的值是inline-block、table-cell、flex、table-caption或者inline-flex overflow的值不是visible原创 2021-08-11 09:13:46 · 211 阅读 · 0 评论 -
CSS文本溢出省略&识别换行符
单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap;/*让文字在一行显示*/ 多行: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; 识别换行符\n: white-space: pre-wrap; 单词换行: word-break: break-all;/*一般不用*/ /*默认是kee原创 2021-08-10 15:48:14 · 303 阅读 · 0 评论 -
CSS三角形&梯形&圆&0.5px线
三角形: .san{ border-top:0 solid transparent; border-bottom:50px solid pink; border-right:50px solid transparent; border-left:50px solid transparent; } 梯形: .ti{ height: 20px; width: 60px; border-top:0 solid transparent; border原创 2021-08-09 22:12:59 · 332 阅读 · 0 评论 -
CSS精灵图&二倍图&背景图填充
精灵图/雪碧图/sprite: 把小图片放到一张稍大的图片里,减小服务器压力,页面加载速度更快。 以右上角开始、向下为-y值,向右为-x值,用ps调 核心代码 background: url("./imgs/sprite.png") no-repeat -325px -140px; /* background-position: -325px -140px; */ 二倍图: 解决移动端图片方法变模糊问题 图片为100*100,盒子50*50 登录页的背景图充满整个页面: <!原创 2021-08-09 21:33:12 · 809 阅读 · 0 评论 -
CSS定位
相对定位: position:relative 不脱离文档流,不会高度塌陷 相对于自身定位 绝对定位: position:absolute 脱离文档流,可以自绝父相完成布局,如居中 离最近的有定位的祖先元素定位,否则会相对于根元素定位,所以,要在父级设置相对定位 固定定位: positon:fixed 脱离文档流,相对于浏览器可视窗口定位,用于广告,点击到顶部等 粘滞定位: position:sticky 不考虑兼容性是很好用个定位,如设置某个盒子top:0,则滑动到顶部,就固定了 z-in原创 2021-08-09 09:10:17 · 205 阅读 · 0 评论 -
CSS居中
HTTP常用状态码及其含义总结 总结 1开头() 2开头(成功) 200:服务器成功处理请求 3开头(重定向) 304:未修改,请求网页未修改,不会返回网页内容 4开头(客户端请求错误) 400:错误请求,服务器不理解请求语法 403:禁止,服务器拒绝请求 404:未找到,服务器找不到请求的网页 5开头(服务端错误) ...原创 2021-08-06 12:39:41 · 221 阅读 · 0 评论 -
样式初始化
normalize.css和reset.css区别: normalize平和更好,保留浏览器的原来样式并且做到每个浏览显示一致 reset暴力重置,默认样式都重置了 样式初始化: .clearfix::before, .clearfix::after { display: table; content: ''; clear: both; } #root, .main, body, html { width: 100%; height: 100%; } /*(1原创 2021-08-04 11:25:56 · 626 阅读 · 0 评论 -
伪类和伪元素
伪元素: 伪元素选择符: 不存在于DOM文档,创建新元素。 可以用单冒号,也可以双冒号,如:before===::before 常用例子:节点前后添加东西、清除浮动、改变选中文本颜色 伪类: 伪类选择符: 存在于DOM文档,但无法标记 用于向某些选择器添加特殊效果 用伪类有时候可以少写类 ...原创 2021-08-04 10:09:49 · 495 阅读 · 0 评论 -
CSS选择器
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录一、css选择器 一、css选择器 代码如下(示例): 子代选择器 父 > 子 选择下一个兄弟 前一个 + 下一个 选择下边所有兄弟 兄 ~ 弟 属性选择器 [属性名] [属性名=属性值] [属性名^=属性值] 选择属性值以指定值开头的元素 [属性名$=属性值] 选择属性值以指定值结尾的元素 [属性名*=属性值] 选择属性值中含有某值的元素 伪类选择器 :first-child :la原创 2021-08-02 10:29:58 · 234 阅读 · 0 评论 -
CSS清除浮动最好方法
就这一个 在父级上加clear属性 .clear::before, .clear::after{ content:''; display:table } .clear::after{ clear:both }原创 2021-02-01 16:27:46 · 110 阅读 · 0 评论