随笔分类 -  css

css的博文
css 媒体查询
摘要：<h2>响应式判断</h2> <p class="example">操作浏览器窗口，查看效果。</p> .example { padding: 20px; color: white; } /* Extra small devices (phones, 600px and down) */ @medi 阅读全文
posted @ 2022-03-09 16:41 luckylou 阅读(52) 评论(0) 推荐(0)
css 实现div内显示两行或三行，超出部分用省略号显示
摘要：一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;二、div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsi 阅读全文
posted @ 2022-03-09 16:39 luckylou 阅读(356) 评论(0) 推荐(0)
如何将toastr提示框顶部 居中
摘要：使用原生的toastr提示框提示语默认会出现在右上角现在想要居中，百度了以下提示框的属性发现有一个控制的属性positionClass toastr.options = { "closeButton": false, //是否显示关闭按钮 "debug": false, //是否使用debug模式 阅读全文
posted @ 2021-11-12 16:14 luckylou 阅读(375) 评论(0) 推荐(0)
img标签src路径为空就会出现边框，css怎么去掉
摘要：img[src=""],img:not([src]){opacity:0;} 阅读全文
posted @ 2018-07-09 10:22 luckylou 阅读(421) 评论(0) 推荐(0)
svg转字体icon
摘要：https://icomoon.io 阅读全文
posted @ 2018-06-21 17:23 luckylou 阅读(106) 评论(0) 推荐(0)
基于screen.width的伪响应式开发
摘要：一、站在用户的角度看问题 一个用户，访问一个web页面的真实场景是怎样的呢？ 下面是某用户访问某站点的一个场景： 1. 小明打开了自己的电脑，访问了鑫空间-鑫生活； 2. 小明体内洪荒之力无法控制，疯狂拖动浏览器改变其宽度感受页面布局变化； 3. 卧槽，发现页面居然是响应式的，不由得感叹：实现的够骚 阅读全文
posted @ 2018-03-20 11:00 luckylou 阅读(310) 评论(0) 推荐(0)
CSS单词换行and断词，你真的完全了解吗
摘要：背景 某天老板在群里反馈，英文单词为什么被截断了？ 很显然，这是我们前端的锅，自行背锅。这个问题太简单了，css里加两行属性，分分钟搞定。 开心的提交代码，刷新页面。我擦，怎么还是没有断词？不可能啊！！！ 难道这两个属性有什么兼容性问题或者有什么限制条件？为了不搬石头砸自己的脚，还是去深入了解一下。 阅读全文
posted @ 2018-03-20 10:57 luckylou 阅读(10463) 评论(1) 推荐(0)
50道CSS基础面试题（附答案）
摘要：1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing 阅读全文
posted @ 2018-03-20 10:48 luckylou 阅读(583) 评论(0) 推荐(0)
表格被撑开
摘要：关键代表红色标注。关于table_layout的详细用法请百度。哈哈 阅读全文
posted @ 2018-02-08 16:08 luckylou 阅读(99) 评论(0) 推荐(0)
移动端toast 提示，HTML css 全屏垂直水平居中
摘要： 阅读全文
posted @ 2018-02-01 10:43 luckylou 阅读(826) 评论(0) 推荐(0)
CSS实现单行、多行文本溢出显示省略号（…）
摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： 效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如 阅读全文
posted @ 2017-08-17 17:22 luckylou 阅读(238) 评论(0) 推荐(0)
td 内容自动换行 table表格td设置宽度后文字太多自动换行
摘要：设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可 做东钿互金平台后台表格的时候，有些单元格内容非常长，把表格撑的很宽很宽，直接破坏页面布局，一开始我是直接给td设置宽度，但是一直不行，百度了一 阅读全文
posted @ 2017-05-15 17:58 luckylou 阅读(780) 评论(0) 推荐(0)
关于ie7下display：inline-block；不支持的解决方案
摘要：今天码的时候遇到这个问题了。 如果本身是内联元素的，把它的display属性设置设置为inline-block时，所有浏览器都是支持的。 相反，如果本身是块级元素的，把它设为display：inline-block; 那么ie6/ie7都是不支持的。 IE中对内联元素使用display:inline 阅读全文
posted @ 2017-04-27 16:26 luckylou 阅读(603) 评论(0) 推荐(0)
关于html和body高度 登录页面登录框永远保持在页面垂直水平居中位置
摘要：HTML CSS 解说，水平居中就不用多说了，给div.login_wrap设置个宽度，然后margin:0 auto;就可以做到。但是这里这样做，这里使用了两层div 外层使用margin:0 auto;先做到外层水平居中，然后里面一个div使用绝对定位，代码分别如下。 html, body{he 阅读全文
posted @ 2016-08-31 17:08 luckylou 阅读(6166) 评论(3) 推荐(1)
css 关于两栏布局，左边固定，右边自适应
摘要：好几个星期都没写博客了，最近不忙也不闲，稀里糊涂过了两个星期，之前几个月内天天坚持签到。最近也没签到。哈哈，说正事。 今天做东钿互金平台后台页面，昨天做了一个登录页面，业偶碰到了一个难题。等下也要把它写出来，先说今天的吧。两栏布局，左边固定，右边自适应 百度了一下，使用了http://www.zha 阅读全文
posted @ 2016-08-31 16:54 luckylou 阅读(3989) 评论(0) 推荐(0)
关于表格中td自动换行做法
摘要：两个条件 一是给table中第一个tr（也就是表头）下的td或者th宽度，代码如下 而是让文字碰到边界自动换行 css属性 style="word-wrap:break-word;word-break:break-all;" 阅读全文
posted @ 2016-08-04 11:47 luckylou 阅读(372) 评论(0) 推荐(0)
-webkit-appearance: none;去处select默认小箭头样式
摘要：Html <select class="sel_house_type"> <option value="0">请选择</option> <option value="1">住宅</option> <option value="2">别墅</option> </select> Css .seltype 阅读全文
posted @ 2016-07-19 09:40 luckylou 阅读(833) 评论(0) 推荐(0)
flex 弹性合模型
摘要：网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案 Flex布局，可以简便、完整、响应式地实现各种 阅读全文
posted @ 2016-06-28 09:54 luckylou 阅读(410) 评论(0) 推荐(0)