项目中必须知道的关于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 ...
随机推荐
- ScrollView和listview的冲突问题,关于宽度,和滑动
只需要重新listview即可 package com.exmple.listscrow; import java.util.logging.LogManager; import android.co ...
- Dynamics AX 2012 R2 配置报表服务器
今天Reinhard在使用报表的过程中,发现以下错误: The default Report Server Configuration ID could not be found in the SRS ...
- Linux系统使用yum安装nodejs
先执行: yum install \ http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm 再执行: su ...
- Robotlegs框架1.5简介
该框架的1.5版本位于https://github.com/robotlegs/robotlegs-framework/tree/version1,现在已经出了重新架构的2.0版本,所以我决定先研究已 ...
- 【转】【C/C++】实现memcpy函数
本文转自:http://my.oschina.net/renhc/blog/36345 面试中如问到memcpy的实现,那就要小心了,这里有陷阱. 先看下标准memcpy()的解释: ? 1 2 vo ...
- JAVA线程同步辅助类Exchanger-交换
可以在对中对元素进行配对和交换的线程的同步点.每个线程将条目上的某个方法呈现给 exchange 方法,与伙伴线程进行匹配,并且在返回时接收其伙伴的对象.Exchanger 可能被视为 Synchro ...
- 离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程
关于CDH和Cloudera Manager CDH (Cloudera's Distribution, including Apache Hadoop),是Hadoop众多分支中的一种,由Cloud ...
- 获取ip
需要引用System.Web http://stackoverflow.com/questions/4879837/smart-way-to-get-the-public-internet-ip-ad ...
- 《BI那点儿事》数据流转换——百分比抽样、行抽样
百分比抽样和行抽样可以从数据源中随机选择一组数据.这两种task都可以产生两组输出,一组是随机选择的,另一组是没有被选择的.可以将这些选择出的数据发送到开发或者测试服务器上.这个Task的最合适的应用 ...
- Web API开发实例——对产品Product进行增删改查
1.WebApi是什么 ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务.ASP.NET Web API 是一种用于在 .NET ...