![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
会飞的小蚂蚱
这个作者很懒,什么都没留下…
展开
-
怎么写省略号
感觉总是要忘怎么写省略号 写个博客css实现超出部分显示省略号 /* 显示一行,省略号 */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; /* 显示两行,省略号 */ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellip.原创 2020-07-19 16:22:40 · 391 阅读 · 0 评论 -
怎么用css让网站变灰
filter: grayscale 使用可以调整元素的灰度值.gray-filter { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,&l...转载 2020-06-12 14:18:37 · 109 阅读 · 0 评论 -
css: 透明度opacity的兼容写法怎么做
1、IE浏览器写法: /* 取值范围:1-100 */filter:alpha(opacity=value);2、兼容其他浏览器写法 /* value的取值范围: 0-1 */opacity:0.value;原创 2020-06-04 10:47:22 · 348 阅读 · 0 评论 -
CSS的万能清除浮动法到底是什么
.clearfix:after { content: "."; clear: both; height: 0; visibility: hidden; display: block;} .clearfix { zoom: 1;原创 2020-06-03 09:36:17 · 383 阅读 · 0 评论 -
BFC到底是个啥?
BFC的定义BFC到底是个啥呢?先贴出一段大佬们在分析BFC的时候字面上的理解:在CSS布局中,是通过对一个个box的布局,来实现整体页面的布局,这一个个box也就是一个个容器元素,这些元素分为两类:块级元素(block),行内元素(inline)。 对于不同类型的元素,有不同的处理规则,这个元素内部的子元素也会用不同方式去渲染BFC中的FC为formatting context的首字母缩写,翻译过来就是“格式化上下文”,它是页面上的一个渲染区域,并有一套渲染规则,规定了它内部元素的渲染方式 ,原创 2020-06-01 08:48:13 · 181 阅读 · 0 评论 -
简单说一个CSS综合案例
<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 ..原创 2020-05-27 11:08:42 · 637 阅读 · 0 评论 -
怎么阻止表单的默认提交
阻止表单的默认提交事件表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:如果想要阻止表单的默认提交事件,有以下几种方法:1.将<input>标签内按钮类型从type="submit"修改为type="button" 2.表单内的<button>未指定类型时,默认的类型为submit,可以显式的修改为<button type="butto.原创 2020-05-26 09:29:06 · 830 阅读 · 0 评论 -
2020之前端开发之CSS布局基础
(有个即刻偷师学艺的方法——在浏览器里,打开一个设计很棒的网页,鼠标点击右键,选择“检查”,即可查看网页的HTML+CSS代码和相对应的布局位置)一、布局相关的标签二、盒子模型1、什么是盒子模型# 就以快递盒为例快递盒与快递盒之间的距离(标签与标签之间的距离margin外边距)盒子的厚度(标签的边框border)盒子里面的物体到盒子的距离(内容到边框的距离padding内边距)...原创 2020-05-15 09:11:59 · 198 阅读 · 0 评论 -
CSS背景图片之6个有趣的技巧
背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的,但是。。。。。。1.如何将背景图像完美地适合视口body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=cro.原创 2020-05-14 09:28:55 · 139 阅读 · 0 评论 -
商城类网站头部导航 贼靠谱 建议复制!!!
效果reset.css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"&g.原创 2020-05-13 09:12:01 · 415 阅读 · 0 评论 -
在我们前端开发过程中,设置css引起的一些bug现象及解决方法
一、设置overflow:hiden行内元素会发生偏移的现象父级元素包含几个行内元素 1 2 3 4 5 6 7 <divid="box"> <p> <span>按钮</span> <span>测试文字文字文字测试文字文字文字</span> <span>看这里</sp...原创 2020-05-12 09:37:34 · 1421 阅读 · 0 评论 -
我个人感觉比较常见的移动web问题,终端触摸交互,各种bug坑如何解决
移动web最佳viewport设置<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">单行文本溢出.inaline{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}多行文本溢出.intwoline{ display:-webkit...原创 2020-05-12 09:30:55 · 119 阅读 · 0 评论 -
html之 post请求的 a标签的两种用法举例说明
html post请求之a标签的两种用法举例1、使用ajax来发起POST请求HTML代码如下:<a href="https://www.cnblogs.com/" class="a_post">发起POST请求</a>JQuery代码如下:$(".a_post").on("click",function(event){ event.preventDefault();//使a自带的方法失效,即无法调整到href中的URL(https://www.c.原创 2020-05-12 09:29:18 · 444 阅读 · 0 评论 -
自定义样式的一个小技巧 萌新不看就是亏啦
众所周知 这是一个截了一半啊 就是一个 menu里面有三个item 用的vant我们可以给item一个名字 比如 x1我们再去sass里面去深度选中他的样式为什么这样选的中呢? 因为组件是很多很多层的 我们在最外层给他一个名字 所以就能直接选中...原创 2020-05-12 09:08:20 · 99 阅读 · 0 评论 -
写个滚动加载,可视区域判断
演示图考虑2个情况一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色一种情况是,从头向下看的..ss li { margin: 40px;}<div class="ss"> <ul> <li>sss</li> <li>sss</li> <li.原创 2020-05-09 10:28:51 · 194 阅读 · 0 评论 -
写个简单的显示隐藏
使用if条件判断,来实现div标签的显示和隐藏效果的切换。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...原创 2020-05-08 09:36:15 · 124 阅读 · 0 评论 -
关于对 flex:1; 的详解
首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况:flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex 的默认值是 0 1 auto。同理,如下是等同的:.item {flex: 2333 3222 234px;}.item {flex-grow: 2333;flex-s...原创 2020-05-08 09:31:32 · 144 阅读 · 0 评论 -
谈谈BFC和高度塌陷的问题
当面试官问道你高度塌陷时,人们第一想到的方法一定是 1 2 3 4 5 6 7 .clearfix::after { content:''; display: block; clear: both; visibility: hidden; ...原创 2020-05-07 09:17:08 · 351 阅读 · 0 评论