随笔分类 - H5-C3
线上css样式乱了，本地没问题
摘要：遇见这种问题的解决方案就是 在样式错乱的页面样式加！important 原因分析： 本地环境和线上环境加载样式的顺序不一样 参考链接 加载顺序参考链接 优化方案： 开发时尽量将基础组件和业务组件等第三方组件样式放置于项目入口文件的头部进行，将第三方组件样式的优先级将为最低。
前端压缩图片
摘要：#### 场景： 钱包ocr识别照片获取对应的卡号 #### 问题： H5调起摄像机或相册时，图片过大，网关负载过小， #### 解决办法： 起初是后台人员加大网关的负载，或者测试的时候使用技术手段将图片压缩一下在上传，由此引发思考。前端是否可以拿到图片时进行等比的压缩并传到后台 html,h5调起
样式穿透问题
摘要：样式穿透问题 如果是css,则用 >>> 必须是 父级>>>子级 如果是less ,则用 /deep/ 如果是sccc，则用 ::v-deep 一定要注意的是css中如果加上scoped 必须要用当前页面的dom
网站变成灰色表示哀悼的效果是怎样实现的？
摘要：原文在这 很简单~ <style type="text/css"> html { filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100
css3旋转小样例
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
清除浮动总结
摘要：浮动 不占文档流 浮动只会影响后面的文档流 给父元素不添加高度加浮动会导致父元素没有高度，想要父元素不加高度子元素可以使用浮动，且不影响下面的文档流，就需要清除浮动 额外标签法清除浮动 <style> li{ float:left; } .clear { clear:both; } </style>
单行，多行文本垂直居中
摘要：今天大年初三在家给自己充电，看到这部分想到了自己平时工作中好像确实有这些问题，还是ui验证时发现的，今天有时间就记录一下吧，免得以后忘记了，嘻嘻 文字垂直居中，一行的还好，用行高line-height和高度height一样就行了，但是多行的用这个就不行了，行高是这么高，会把整个高度撑高变形，很丑，
页面修改的一些问题总结
摘要：问题总结 页面修改初步参考 ui设计要求最多的是页面统一，如按钮框的颜色，形状，文本的对齐方式等（会精确到1px） 色号不知道怎么选的用系统主色。 a标签使用建议，须重新设置颜色一般根据ui的建议是系统主色，避免使用自带的蓝色，去掉下划线，鼠标经过时出现下划线 常见问题及修改意见 表格线条不统一问题
页面缩放引起得错乱问题
摘要：先介绍下背景，红框里面的文字，研发在1920和1366分辨率下面调试没有任何问题，然后提测到测试部，测试部的人个个都是魔术师，是真的佩服，把用户的智商按在地上摩擦，想吐槽但是辩解是苍白无力的，测试还是很有必要，很牛的，哦哦，我给自己加的戏有点多了，回归正题，接到禅道上的这个问题，我们底层研发，不，是
select选择框里面的内容对齐方式
摘要：加一个direction:rtl/ltr rtl可以理解为右对齐 ltr可以理解为左对齐 之前只是知道有个这个属性，不知道用在那个地方，也不知道在那个情境下使用，以致于遇到这个情况了，不知道解决办法，现在理解的更加深刻了 情景： “请选择”在左边，但是ui要求在右边和下面统一，这个时候就用到了这个方
table 表格列表对不齐的问题
摘要：table 表格列表对不齐的问题 首先先检查对不齐两行的宽度百分比是否一致（最好调成100%，且需要对齐的列百分比一致） 如果第一个全部检查没问题，再检查里面的内容是否过长，把表格撑的变形了，我也不知道会啥会撑变形，反正这种解决方法就是给文字强制加换行（word-break:break-all)
placeholder 文字颜色修改
摘要：placeholder 文字颜色修改 input 输入框中有一个placeholder 属性，ui有时会要求他们的颜色也做一些改变，起初觉得不可实现，百度了一下还真有解决的办法，get到了，哈哈 <style> input::-webkit-input-placeholder{ color:red;
文字内容溢出折行问题
摘要：文字内容溢出折行问题 问题：修改页面中发现在table表格中td加了宽度还是被文字，英文字母，数字，url等过长而将表格撑破，后台设置的是100个字符，测试是最大力度检测的，所以还是要解决的， 解决方法：在td表格中加 word-break:break-all 来强制换行 引发的新思考：break-
input标签的的那些事
摘要：input标签的的那些事 editable:false 不可输入 readonly="readonly" 不可操作，只能看 autocomplete 属性规定输入字段是否应该启用自动完成功能。默认是on，开启的，但是我们一般不想让下次在input输入文字时记录上次输入记录时，可用autocomple
table表格嵌套边框线问题
摘要：table表格嵌套边框线问题 解决方法 外层table: <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;”> 桥套表格样式: <table border="1" cellspaci
text-decoration和outline
摘要：text-decoration和outline 这两个一直弄混，其实是没有任何关联的，今天梳理一下，知识虽小但是也要积攒呀 text-decoration 首先看名字，顾名思义是文本的修饰，比如加一些线条（underline）啊什么的，或者去掉线条（none）常用在a标签 修饰文本的话有在上面的（o
弹性布局在项目中的使用示例
摘要：弹性布局在项目中的使用 布局的传统解决方案：依赖于display属性+position属性+float属性 2009年弹性布局flex出现了。弹性布局各个知识点都了解了，但属于一听就会一写就废的尴尬境地，写了下面的页面之后感觉对弹性布局了解的更深一点了 头部用 弹性布局 页面： 布局思路： 整体头部
溢出用三个点表示在td中不好用的原因
摘要：table布局（table-layout:fixed) 官方定义 tableLayout 属性用来显示表格单元格、行、列的算法规则。 固定表格布局： 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单
在1920尺寸下显示正常到1366下面换行问题（min-width）
摘要：首先明确input标签是行内块元素，也可以说行内替换元素，总之类似于块元素，宽高，内外边距都可以，但是又不独占一行，就是它后面是可以跟行内元素的，在1366尺寸发现，一个input输入框后面跟了一个a元素，按道理说是不应该换行的，但是效果呈现出来的两个并列了，第一步检查的元素的属性，没问题，自己找了
