项目中必须知道的关于CSS+DIV的常识
根据模块化的思想,将目录划分为html,css,image三大部分。
css部分:(base.css、globa.css和mod文件夹)
1、base.css放置的是reset,clearfix等基础类和工具类;
2、globa.css放置的是布局样式,包括header,footer等样式;
3、mod文件夹下面放置的模块,组件的样式;
html部分:(mod文件夹和template文件夹)
1、mod文件夹下面放的是模块的代码片段集合。如果有可能尽可能粒度划分的更细,因为这些都是代码片段,希望以后有工具做到代码片段和css的自动载入;
2、template文件夹下面放的是产出物,其实就是一些模块的拼合。只要模块写的够好这块工作就很好做了。
images部分:(base文件夹、data文件夹、icon文件夹和mod文件夹)
1、图片文件夹的部署和css部署是对应的,base和global的前景图和背景图放在base文件夹里面。
2、用作例子的示例图片放在data里面比如,头像之类的
3、第三方和icon放在icon的文件夹中
4、Mod文件夹中放的是模块所需要的前景图和背景图,小图标用sprite合并到base中
下面是几个有关css的tips:
1、对非a标签添加伪类状态,例如span:hover{}。在采用偷天换日的手法a:hover span{},解决IE6兼容只许添加一个a:hover{#:FFF;}触发IE6下a标签hover状态的haslayout即可。
2、选项卡去掉虚线框,IE解决方案:<a href=”..” hidefocus=”true”>;FF下解决方案:a:focus {outline:none;-moz-outline:none;}
3、内联元素居中水平采用父元素text-align:center;垂直采用height=line-height;块级元素水平居中自身margin:0 auto;text-align:left(对子内联元素不入侵)
父元素text-align:center;块级元素可以采用text-indent调解左边距,比padding-left的好处在与不会影响固定宽度值
4、小图片存为gif文件比png-8要小,但是像css sprites这种颜色种类不多的大图片存为png-8要比gif要小
5、内联元素用display:inline-block;比较给力,IE6下虽然不支持这个属性,但是会触发内联元素的haslayout,所以表象一样。块级元素就不行了
6、内联元素float:left;之后按理说应该表现为块级,但是文字在IE6和IE7下会填充上一行的空隙。解决方案white-space: pre;
7、IE6下当高度小于font-size的时候,会被撑高。解决方案:font-size:1px;
8、css在浏览器渲染过程中是从右向左读取的,尽量不用名字空间约束样式名,尽量不对元素直接写样式。
项目中必须知道的关于CSS+DIV的常识的更多相关文章
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- 项目中如果管理前端文件CSS和JS
如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...
- Vue项目中引入外部文件(css、js、less)
例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...
- [Vscode插件] 自动编译项目中的Sass文件为CSS
插件名 : Live Sass Compiler 今天在VSCode中发现了一个自动watch项目目录下sass文件的插件,摆脱了在控制台中进行手动watch的繁琐. 安装好以后点击右下角即可自动编译 ...
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
- 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题
ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content(" ...
- vue项目中,使用vue-awesome-swiper插件实现轮播图
一.安装 npm install vue-awesome-swiper 二.项目中引入 import 'swiper/dist/css/swiper.css'import {swiper,swiper ...
- MVC 之 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后的丢失
在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="s ...
- 记一次项目中的css样式复用
本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...
随机推荐
- 编译openssl
windows: 下载openssl-1.0.1h.tar.gz文件 32位: 在解压的包中,有INSTALL.W32文件,按照文件提示安装 64位: 在解压的包中,有INSTALL.W64文件,按照 ...
- javascript编程: JSON, Mapping, 回调
使用 Javascript 编程, 组合使用 JSON 数据格式,Mapping 和回调技术, 可以产生很强的表达效果. 在实际工作中, 总会有数据汇总的需求. 比如说, 取得了多个 device ...
- jquery之empty()与remove()区别
要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现.可仔细观察效果的话就可以发现.empty()是只移除了 指定元素中的所有子节点,拿$("p" ...
- Microsoft JScript提示‘DIRECT’未定义(2014-08-26记)
当启动Applet的时候,页面弹出:DIRECT’未定义可能的问题是:java控制面板的网络设置问题,可能使用了代理解决: 打开java控制面板--->网络设置-->直接连接-->确 ...
- Unix/Linux编程实践教程(0:文件、终端、信号)
本来只打算读这本书socket等相关内容,但书写得实在好,还是决定把其余的内容都读一下. 阅读联机帮助的一个示例: open系统调用: read系统调用: Unix的time: 上面的printf可以 ...
- js页面刷新之实现框架内外刷新(整体、局部)
这次总结的是框架刷新: 框架内外的按钮均可以定义网页重定向, 框架内部页面的按钮可以实现局部刷新, 框架外部页面的按钮可以实现整页刷新. 代码如下(两个html页面): <!--主界面index ...
- (5) 深入理解Java Class文件格式(四)
转载:http://blog.csdn.net/zhangjg_blog/article/details/21658415 前情回顾 在上一篇博客深入理解Java Class文件格式(三) 中, ...
- 4 .Swift函数|闭包
在编程中,我们常把能完成某一特定功能的一组代码,并且带有名字标记类型叫做函数,在C语言中,我们知道函数名就是一个指针,它指向了函数体内代码区的第一行代码的地址,在swift中也具有同样的功效. 在Sw ...
- React的Transaction浅析
1.两个示例 示例1 let SonClass = React.createClass({ render: function(){ console.log("render", th ...
- IE浏览器bug罪魁祸首--hasLayout
IE浏览器一直都是前端程序员最头疼的,IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 认识hasLayout--haslayout是Windows In ...