前端开发知识汇总--HTML、CSS
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/67063297
##前言 本文主要从html,css,JS,ng以及一些好玩的demo,做一个汇总,会不定期地更新。。 ###HTML
- 在HTML中遇到需要用空格来做一些填充时,由于各个浏览器之间对于 ;的实际展示不一样,为了解决个浏览器之间的兼容问题,可以用半角空格ensp;或者全角空格emsp;就可以了,ensp相当于半格中文字符的宽度,emsp相当于一个中文字符宽度。
- 在使用CANVAS标签时,一定要设置宽高,而且这个宽高是作为canvas属性设置的,曾经被这个坑了,即
<canvas width='100' height='100'></canvas>
3 .dom操作造成页面卡顿,解决方案。
把DOM元素从页面流中脱离或隐藏,这样处理后,只会在DOM元素脱离和添加时,或者是隐藏和显示时才会造成页面的重绘或重排,对脱离了页面布局流的DOM元素操作就不会导致页面的性能问题。这种方式适合那些需要大批量修改DOM元素的情况。
var myElement = document.getElementById('myElement');
myElement.style.display = 'none';
// 一些基于myElement的大量DOM操作
...
myElement.style.display = 'block';
4.免费在线作图网站,作流程图特别好用!https://www.processon.com/ 5.重置表单验证信息
$(form).formValidation(options); $(form).data(‘formValidation’).resetForm();
angularjs $scope.userForm.$setPristine(); $scope.userForm.$setUntouched(); ###CSS
- 自定义滚动条样式(只能修改谷歌的)。参考
- css复合选择器,li:not(:first-of-type)选择除了第一个li。
- 文字两端对齐的CSS样式,例如对齐红框部分:
.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
- 给一个元素设置三边阴影。
box-shadow: 0px 0px 2px -5px #00aaef, 0px 0px 0px #00aaef, 0px 4px 12px #00aaef, 0px 0px 0px #00aaef;
- A标签伪类LVHA顺序来源:
根据元素CSS权重、特殊性分析,因为link、visited、hover、active权重特殊性均相同,所以根据使用习惯,要想让active始终有作用,需要让后者覆盖前者。
HTML attribute value指定了初始值;DOM value property 是当前值。添加或删除disabled attribute会禁用或启用这个按钮。但 attribute 的值无关紧要,这就是我们为什么没法通过 仍被禁用这种写法来启用按钮。
- 自定义select样式
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }
- 兄弟选择器 div+p 选择当前div之后的父元素。 选择当前元素的下一个相邻元素(必须拥有相同父元素)。
- less 编译calc计算属性发生错误,解决办法:
使用~符号标记计算属性,例如,计算宽度为100%减去定长,并平分7份的值。 代码为:
div{
@wid: calc(~"100% - 115px");
width: calc(~"@{wid} / 7");
}
- 消除table 中th,td空隙
border-collapse: collapse;
- 选择文件夹上传 利用HTML5的webkitdirectory属性。 react默认不支持此属性的渲染,需要在componentDidMount的生命周期中,动态创建此属性,即
componentDidMount() {
this.refs.x.directory = true;
this.refs.x.webkitdirectory = true;
}
render(){
<input type="file" ref="x" name="fileList" />
}
- float 副作用 1.脱离普通文档流,无法基于该元素做margin。 2.高度塌陷。
- bfc 触发条件 html根元素; float的值不为none; overflow的值为auto、scroll或者hidden; display的值为table-cell、table-caption和inline-block中的任何一个; position的值不为relative和static; //BFC的表现规则,内部元素的样式不会影响外部元素的样式(可用于解决高度塌陷)
- flex子项比例
<style>
.box1 {
height: 60px;
border: 1px solid black;
flex-grow: 1;
width: 200px;
}
.box2 {
border: 1px solid red;
height: 60px;
flex-grow: 2;
width: 100px;
}
.box{
display: flex;
width: 300px;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
// 本例中,box1为box2的2倍
flex中 子项设置了宽度后,优先以2个item宽度的比例去显示。未设置宽度情况下,以 flex-grow的比例为准。
- 移动端字体px=>rem px=>rem rem 参考html font-size 默认16px 假设设计图宽度750px , html{ font-size:calc(100vw/75) // 10px=>1rem }
###持续更新中~
- C#基础知识回顾--C#遍历enum类型、获取enum项个数
- 用香蕉也能玩电脑游戏—Tensorflow对象检测接口的简单应用
- 通过图片定位给一张图片添加多个链接
- Struts Interceptor Example
- 微信服务号模板消息接口新增"设置行业"和"添加模板"及细节优化
- WPF备忘录(3)如何从 Datagrid 中获得单元格的内容与 使用值转换器进行绑定数据的转换IValueConverter
- WPF备忘录(2)WPF获取和设置鼠标位置与progressbar的使用方法
- WPF文字修饰——上、中、下划线与基线
- 微信公众平台数据接口正式对所有认证公众号开放
- 参考基因组没有,经费也没那么多,怎么办?
- .Net下SQLite的DBHelp
- 数据库进程间通信解决方案之MQ
- 【学术】算法交易的神经网络:强化经典策略
- java.util.logging 例子
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例