![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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-flexoverflow的值不是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 · 810 阅读 · 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 · 111 阅读 · 0 评论