CSS 网页适配 iPhone全面屏
摘要：前言iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 适配之前需要了解的几个新知
阅读全文
posted @ 2023-12-08 09:56
随笔分类 - HTML/CSS
Flex 布局教程：语法篇
摘要：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
阅读全文
posted @ 2023-09-04 13:23
如何实现0.5px的border
摘要：1 使用meta标签 使用viewport标签，将其中content的width定义为设计图的尺寸宽度，然后在直接使用1px即可（不同屏幕宽度会自动进行缩放） <meta name="viewport" content="width=750, user-scalable=no"> 2 使用box-s
阅读全文
posted @ 2023-03-20 13:58
CSS实现文本一行垂直居中，两行垂直居中，超出两行文字显示省略号的方法
摘要：实现单行垂直居中，两行垂直居中，超过两行省略…显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display:-webkit-box; -webk
阅读全文
posted @ 2023-01-10 13:43
css height属性中的calc方法
摘要：例如 父盒子是100%的高度 盒子里面的head部分固定位140px 内容部分始终为剩余的全部高度 height: calc(100% - 140px); 切结"+或-"两边要有空格 不然不生效
阅读全文
posted @ 2021-07-28 15:41
css单行垂直居中，超过两行显示省略号
摘要：HTML： <div> <span>单行居中，多行居左单行居中，多行居左</span></div><div> <span>单行居中</span></div> CSS: span { font-size:14px; overflow:hidden; text-overflow:-o-ellipsis-
阅读全文
posted @ 2021-07-21 10:15
ios下overflow:hidden 无效
摘要：ios下overflow:hidden 无效原因及解决方案 在ipad和ios上设置overflow:hidden不起作用，目前网上找到的方法是给父级元素添加position:fixed，比如这样： body { height: 100%; overflow: hidden; width: 100%
阅读全文
posted @ 2021-06-25 18:07
flex布局中text-overflow失效的解决方案
摘要：在开发中我们经常会遇到这种布局，要求文字垂直居中，且超出使用省略号说到垂直居中，兼容性最好的就是flex布局，但在flex布局下出现了text-overflow失效的情况 实例代码 <div class="wrapper"> <div class="flex item">hahhhhhhhhhhhh
阅读全文
posted @ 2021-06-24 11:18
CSS的优先级及样式覆盖问题探讨
摘要：多重样式（Multiple Styles）： 如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况.有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。 样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于
阅读全文
posted @ 2021-04-06 11:44
ios真机使用fixed定位页面滚动时fixed定位的元素也会跟着滚动
摘要：到了ios真机APP中，页面向下滚动，fixed的元素也跟着滚，虽然最后它还是到了它该在的地方，但是它跟着滚动也很影响页面的流畅性和交互性好伐。
阅读全文
posted @ 2020-12-01 17:30
利用flex布局横向滚动
摘要：wxml代码 <view class="padding-style"> <view class='overflow-company-second'> <view class="special-list"> <view class='active'>发现简书</view> <view>我的关注</vi
阅读全文
posted @ 2020-09-21 11:09
使用vw适配页面ios中img标签设置宽度无法显示
摘要：最近项目全线用了新的vw适配方案，设置了img的宽度，在ios上无法显示图片，google之，找到了解决办法，全局使用img{content:normal!important;}既可解决。 找了一下原因，是因为在content中写了viewport-units-buggyfill来兼容不支持vw的设
阅读全文
posted @ 2020-08-07 11:29
如何让img自动适应div容器大小
摘要：IMG样式 （横向拉伸，纵向自动匹配大小） width:100%; height:auto; （纵向拉伸，横向自动匹配大小） width:auto; height:100%; DIV样式（元素居中显示） display:flex; align-items:center; justify-conten
阅读全文
posted @ 2020-07-31 18:37
如何让position fixed不再基于浏览器窗口定位
摘要：position:fixed默认是相对浏览器定位的。 就是将某个元素固定在浏览器的某个确定的位置，不随滚动条的移动而变化； MDN对position: fixed有一个注释： 当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。 也就是说如果想让fixed不相对浏览器定位，
阅读全文
posted @ 2019-11-19 14:14
预加载的实现方式
摘要：1、预加载的实现方式 ①、用CSS和JavaScript实现预加载 实现预加载图片有很多方法，包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案，十分高效。单纯使用CSS，可容易、高效地预加载图片，代码如下： #preload-01 { backgr
阅读全文
posted @ 2019-11-01 17:29
如何实现下拉弹出框渐渐弹出
摘要：直接上demo： <div class="container showdiv fadediv"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> .container { overflow:
阅读全文
posted @ 2019-10-14 15:38
vue.js动态绑定input的checked
摘要：不管<input type='radio checked='true''> 你的checked属性值是true或者false，他都会选中。 其实原理是这样的，复选框里只要有checked属性，不管是否为其赋值，结果为空或true或false或任意值，均为选中状态。 选中不选中，不是看checked的
阅读全文
posted @ 2019-07-30 17:08
移动端左右滑动问题-html与css解决
摘要：<!DOCTYPE html> <html> <head> <title>纯css实现左右滑动</title> <style type="text/css"> ul,li{ list-style: none;; } .slide-box{ margin-top:200px; display: -we
阅读全文
posted @ 2019-04-15 11:29
相对路径./与../区别
摘要：一、基本概念 1、相对路径-顾名思义，相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。 2、绝对路径-绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，比如，你的Perl 程序是存放在 c:/apache/cgi-bin 下
阅读全文
posted @ 2019-04-12 11:19
获取Iframe页面高度并赋值给Iframe以及获取iframe里的元素
摘要：最近接手了别人的项目，别人用到了iframe，自己在实战中总结了一些关于iframe的小问题。 获取Iframe页面高度并赋值给Iframe Html <iframe name="container_ifranme" id="iframeId" scrolling="no" frameborder=
阅读全文
posted @ 2019-04-10 17:28
