专栏首页前端加油站前端开发知识汇总--HTML、CSS

前端开发知识汇总--HTML、CSS

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/67063297

##前言 本文主要从html,css,JS,ng以及一些好玩的demo,做一个汇总,会不定期地更新。。 ###HTML

  1. 在HTML中遇到需要用空格来做一些填充时,由于各个浏览器之间对于 的实际展示不一样,为了解决个浏览器之间的兼容问题,可以用半角空格ensp;或者全角空格emsp;就可以了,ensp相当于半格中文字符的宽度,emsp相当于一个中文字符宽度。
  2. 在使用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

  1. 自定义滚动条样式(只能修改谷歌的)。参考
  2. css复合选择器,li:not(:first-of-type)选择除了第一个li。
  3. 文字两端对齐的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始终有作用,需要让后者覆盖前者。

  • CSS3滤镜效果。参考
  • CSS画三角形网站。参考
  • HTML attr 和 DOM property区别

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 }

###持续更新中~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • angular4 Flex Layout开发实践

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • angular4实战(3) 插件引入及封装

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • HTML5 FileReader 读取txt文件

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/...

    j_bleach
  • 滚动条下拉时 table 的thead 固定在网页固定在顶部不动

    week
  • CSS: hover选择器控制子元素的出现和隐藏

    前两天不知道是哪位同学问的问题,鼠标滑过一个div的时候,怎么控制子集元素属性的出现和隐藏,然后我说用用mouseover和mouseout这两个鼠标事件就行,...

    王小婷
  • CSS实现头像右上角消息数字提示

    今天写个简单的小demo,关于CSS实现头像右上角消息数字提示,样式如下如图所示,在微信和扣扣消息里面比较常见。

    王小婷
  • 博客园博客排版(js样式实例)

    昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,...

    Dawnzhang
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习
  • CSS3绘图实战-Nut团队标志

    css每一代都会有革命性的更新,尽管目前还有一部分浏览器没有支持CSS3,就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋,一些早期不敢想象的东西,如今...

    练小习
  • 好玩儿的css

    css 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。

    前端森林

扫码关注云+社区

领取腾讯云代金券