以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/master/css.md 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all;…

原文地址 http://www.cnblogs.com/jikey/p/4233003.html 以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两端对齐 text-align:j…

1.display:inline-block 内容上下移动 原因:inline-block 默认对齐方式是底部对齐 方法:加一个 vertical-align:top; 属性 把垂直对齐方式改为顶部…

1.background-size要放在background后边才会生效. 2.隐藏滚动条,内容可以滑动 body::-webkit-scrollbar { display: none /* 隐藏滚动条,但依旧具备可以滚动的功能 */ } 3.导航栏固定 position: fixed; top:0px;//bottom: 0;//固定在底部 在中间部分相对定位,就不会消失 4.rem 是相对于根元素计算的,rem值=当前px除以根元素.如:根元素为16px,需要一个18px的字体,只要18/1…

如何触发 bfc 规则 浮动元素:float 除 none 以外的值 绝对定位元素:position (absolute.fixed) display 为 inline-block.table-cells.flex overflow 除了 visible 以外的值 (hidden.auto.scroll) 十分钟理解 BFC 原理 注意:如果设置了float: left/right或者position: absolute,浏览器会将其转为inline-block <!-- log --> &l…

这是项目中遇到的一个CSS的坑,做个记录,主要的原因还是浮动后脱离文档流,两个浮动的元素处于同一文档流中会相互影响位置的问题: 先上代码吧: 效果预览地址:浮动不能靠左的情况; 原本红色模块应该处于蓝色块的最左边,但是我们可以看到,留了一点间距,为什么呢?因为被绿色模块挡住了: 分析下:首先绿色模块是浮动的,已经脱离的文档流: 蓝色模块使用margin-top的负值实现一种错层的效果,红色模块在蓝色模块中浮动,也脱离的文档流,那么,问题就来了,绿色和红色都使用浮动,脱离文档流后处于同一层级,这时…

非常好用的CSS样式重置表           我们在项目前期准备时都会准备好一个reset.css,因为不同浏览器对标签的解析各不相同,重置css样式可以让标签在不同浏览器下产生相同的效果.所以一个好的重置样式表是非常重要的.用过很多网上现成的样式重置表,然后有时写的样式代码没问题却达不到自己要的效果,查了才发现是掉进reset.css的坑里.这里推荐用过多种reset.css感觉是最好用的重置样式表:Sandal,这个样式表的好处是他绝大多数的保留了标签的常用效果,并不是简单粗暴的全部掩杀.…

原因 首先,css/js/html没有必要放在WEB-INF下. 最终这些会被原封不动的展现在客户端,所以访问安全根本就不会成为问题. jsp放在web-inf下,原因主要有两个 1. 远古时代的模式会把业务逻辑,数据库连接等敏感信息写在jsp里面,被用户直接访问会有安全问题. 现代模式里这个不再成为问题,不应该成为问题. 2. jsp是在服务器端运行的,而且通常都需要其他程序支持——比如后台处理好数据再让jsp渲染等,用户直接访问一则没有意义,二则会抛异常,这些都浪费服务器资源. 其次,如果你…

内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. <style type="text/css">body { margin:0; padding:0;}div { margin:0; padding:0;}.a { width:500px; margin:0px auto 30px; background:#eee;}.d1…

模板标签 在传递数据的时候,会有大量的数据展示在浏览器上,而数据会是动态变化的,在html的编写中,数据也是需要动态的,而不能是写死的,如果动态展示呢. 给定的例子数据 views传递数据给html from django.shortcuts import render def index(request): students = [ {'id':12, 'name':'张三', 'age':19, 'sex':'男'} {'id':22, 'name':'李思', 'age':19, 'sex…