1.IE6下,当float存在时,margin双倍的问题

解决方法:加display:inline;

例:

#content {

   float:
left;
    width:
500px;
    padding:
10px 15px;
    margin-left:
20px;
   
display:inline;
}

2.克服盒子模型的hack

原写法:

  1. #main-div{
  2. width: 150px;
  3. border: 5px;
  4. padding: 20px;
  5. }
  1. 修正后
  1. #main-div1{
  2. width: 150px;
  3. }
  4. #main-div1 div{
  5. border: 5px;
  6. padding: 20px;
  7. }
  1. 例如:
  1. <div id="main-div">1</div>
  2. <div id="main-div1"><div>2</div></div>
  1. 见图:
  1. 两者区别:1是把padding加到父层里,DIV的宽度是150+20+20
  1. 2是把PADDING加到子层里,div的宽度是150.
  1. 我习惯是用1的方法去自己计算宽高.
  1. 3,4.最小高度(最小宽度)IE不识别的解决方法

  1. .container {
  2. width:20em;
  3. padding:0.5em;
  4. border:1px solid #000;
  5. min-height:8em;
  6. height:auto;
  7. }
  8. * html .container {
  9. height: 8em;
  10. }
  11.  
  1. 5.整块元素居中对齐的方法
  1. body{
  2. text-align: center;
  3. }
  4. #container
  5. {
  6. text-align: left;
  7. width: 960px;
  8. margin: 0 auto;
  9. }
  1. 先定义BODY中的文字整个居中text-align:center,再定义其中需要左对齐的子元素text-align:left;
  1. 6.垂直居中的CSS
  1. #wrapper {
  2. width:530px;
  3. height:25px;
  4. background:url(container.gif) no-repeat left top;
  5. padding:0px 10px;
  6. }
  7. #wrapper p {
  8. line-height:25px;
  9. }
  1. 适用单行文字,将height设成line-height同值
  1. 7.固定宽度下几个LI元素float横排时,超出宽度限定的解决方法
  1. css:
  1. ul.listing{   margin:0;   width:400px; border:1px solid #000;}

  2. ul.listing li{   list-style-type:none;   float:left;   margin:0 20px 0 0;   width:83px; border:1px solid red;}  
  1. ul.listing1{   margin:0 0 0 -20px;   width:420px; border:1px solid #000;}
  1. ul.listing1 li{   list-style-type:none;   float:left;   margin:0 0 0 20px;   width:83px; border:1px solid red;}
  1. 例子:
  1. <ul class="listing">
  2. <li>第一句</li>
  3. <li>第二句</li>
  4. <li>第三句</li>
  5. <li>第四句</li>
  6. </ul>
  7. </div>
  8. <div>
  9. <ul class="listing1">
  10. <li>第一句</li>
  11. <li>第二句</li>
  12. <li>第三句</li>
  13. <li>第四句</li>
  14. </ul>
  1. 图示:
  1. 原理:
  1. 用负margin的方法
  1. 9.定位z-index
  1. z-index起作用的前提是,必须有position:absolute, position:fixed or position:relative这三种中的任一种属性.
  1. css:
  1. .relativeblock1 {
  2. position:relative;
  3. width:200px;
  4. height:80px;
  5. z-index:51;
  6. }
  7. .absoluteblock1 {
  8. position:absolute;
  9. left:10px;
  10. top:90px;
  11. width:40px;
  12. height:40px;
  13. z-index:1;
  14. }
  15. .relativeblock2 {
  16. position:relative;
  17. width:200px;
  18. height:80px;
  19. z-index:50;
  20. }
  21. 例:
  1. <div class="relativeblock1">
  2. <div class="absoluteblock1"></div>
  3. </div>
  4. <div class="relativeblock2"></div>
  5. 见图:
  1. CSS来说,relativeblock2应该会盖上absoluteblock1,但实际正相反,是因为
  1. absoluteblock1的优先级别高于relativeblock2,他继承了absoluteblock1z-index,虽然他自身的z-index值为1,但实际为51.1,当然高于relativeblock2z-index:50.
  1. 10.相对定位relative和绝对定位absolute的区别
  1.  CSS:
  1. #redSquare
  2. {
  3. position: relative;
  4. bottom: 40px;
  5. right: 40px;
  6. }
  7. 图例:
  1. 11.绝对定位的应用
  1. css:
  1. #hang_tab {
  2. position: absolute;
  3. top: 7px;
  4. left: 0px;
  5. width: 157px;
  6. height: 93px;
  7. }
  1. 图例:
  1. 13.正确消除浮动(float)的方法
  1. css:
  1. #container:after
  2. {
  3. content: ".";
  4. display: block;
  5. height: 0;
  6. clear: both;
  7. visibility: hidden;
  8. }
  9.  
  10. #container
  11. {display: inline-block;}
  12.  
  13. * html #container
  14. {height: 1%;}
  15.  
  16. #container
  17. {display: block;}
  1. 例图:
  1. 经实现,用:after属性是为了消除float浮动(针对FIREFOX使用)时父层无法正确识别高度,复杂且不易记不,优点是不需要再写<div style="clear:both"></div>这样一个空层来撑起高度。
  1. 15.如何处理圆角
  1. 最简单的方法是用一张足够大的图,然后我该圆角标注
  1. html:
  1. <div class="roundBox">
  2. <p>beautifully-encapsulated paragraph</p>
  3. <div class="boxBottom"></div>
  4. </div>
  1. css:
  1. .roundBox {
  2. background:transparent url(roundBox.gif) no-repeat top left;
  3. width:340px;
  4. padding:20px;
  5. }
  6. .roundBox .boxBottom {
  7. background:white url(roundBox.gif) no-repeat bottom left;
  8. font-size:1px;
  9. line-height:1px;
  10. height:14px;
  11. margin:0 -20px -20px -20px;
  12. }
  1. 实例:http://www.askthecssguy.com/examples/notchedcorners/index.html
  1. 17.label标签做表单(非table
  1. 精华html
  1. <form method="post" action="contactengine.php">
  2.     <label for="Name">Name:</label>
  3.     <input type="text" name="Name" id="Name" />
  1. .....
  1. </form>
  1. css:
  1. label {
  2. float: left;
  3. text-align: right;
  4. margin-right: 15px;
  5. width: 100px;
  6. }
  1. 实例:http://css-tricks.com/nice-and-simple-contact-form/
  1. 另一个:http://www.box.net/shared/1zbtouuwws
  1. 20.用有背景图的hr做分隔线,适用所有浏览器的方法.
  2. 因为hr自身的样式是一根黑线,所以让他自身的样式 隐藏,然后新写一个class="hr",让hr听他父层的话
  3. 经验证这样写无意义,对于目前中国的网站来说,极少用到HR.
  4.  
  5. =========================================================
  6. The CSS Class
  7. ====

几个常见CSS错误和解决办法的更多相关文章

  1. 【转载】IE浏览器常见的9个css Bug以及解决办法

    IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...

  2. Oracle的常见错误及解决办法

    ORA-12528: TNS:listener: all appropriate instances are blocking new connections ORA-12528问题是因为监听中的服务 ...

  3. github常见操作和常见错误及其解决办法

    一.常见操作 1. 使用git在本地创建一个项目的过程 $ makdir ~/hello-world //创建一个项目hello-world $ cd ~/hello-world //打开这个项目 $ ...

  4. 常见反编译产生错误 k__BackingField 解决办法

    常见反编译产生错误 k__BackingField 解决办法     无聊反编译小蚂蚁出现上千的错同样的错       private bool <EnableRuntimeHandler> ...

  5. MVC MVC常见错误及解决办法

    MVC常见错误及解决办法 问题1: 必须添加对程序集“EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c5 ...

  6. Docker Hadoop 配置常见错误及解决办法

    Docker Hadoop 配置常见错误及解决办法 问题1:wordcount运行卡住,hadoop 任务运行到running job就卡住了 INFO mapreduce.Job: Running ...

  7. Ubuntu下Linux配置内核各种常见错误和解决办法

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 这篇把Ubuntu下Linux配置内核各种常见错误和解决办法给大家讲解一下,希望可以帮助到大家. 一.Ubuntu系统中缺少各种依赖包导致的问题 1 ...

  8. 使用wubi安装ubuntu14.04出现的常见错误的解决办法

    花了一天的时间终于安装上了Ubuntu14.04,过程坎坷,是血泪史,开始报“cannot download the metalink and therefore the ISO”错误,解决后,又报“ ...

  9. 【LNMP】提示Nginx PHP “No input file specified”错误的解决办法

    原理: 任何对.php文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在. PHP文件不存在,没办法返回普通的404错误,它返回 一个404,并带上一句”No input f ...

随机推荐

  1. SSM 的 基本原理与面试相关

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.MyBatis 1.Mybatis出现最多的问题是什么? 问题: 在XML配置文件中语句的书写与对象 ...

  2. Vue中keep-alive的使用

    Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时 ...

  3. Java实现 蓝桥杯VIP 算法训练 字符串逆序

    问题描述 给定一个字符串,将这个串的所有字母逆序后输出. 输入格式 输入包含一个字符串,长度不超过100,字符串中不含空格. 输出格式 输出包含一个字符串,为上面字符串的逆序. 样例输入 tsinse ...

  4. 第五届蓝桥杯JavaA组省赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.猜年龄 题目描述 小明带两个妹妹参加元宵灯会.别人问她们多大了,她们调皮地说:"我们俩的年龄之积是年龄之和的6倍" ...

  5. Java中线程的操作状态

    start() 线程开始运行 sleep() 当前线程暂停休息 括号里面是多长时间以毫秒为单位 wait() 当前线程等待 notify() 线程wait后用这个方法唤醒 notifyAll() 把所 ...

  6. 如何监控 Linux 服务器状态?

    Linux 服务器我们天天打交道,特别是 Linux 工程师更是如此.为了保证服务器的安全与性能,我们经常需要监控服务器的一些状态,以保证工作能顺利开展. 本文介绍的几个命令,不仅仅适用于服务器监控, ...

  7. 小师妹学JavaIO之:目录还是文件

    目录 简介 linux中的文件和目录 目录的基本操作 目录的进阶操作 目录的腰疼操作 总结 简介 目录和文件傻傻分不清楚,目录和文件的本质到底是什么?在java中怎么操纵目录,怎么遍历目录.本文F师兄 ...

  8. 如何优雅地停止 Spring Boot 应用?

    首先来介绍下什么是优雅地停止,简而言之,就是对应用进程发送停止指令之后,能保证正在执行的业务操作不受影响,可以继续完成已有请求的处理,但是停止接受新请求. 在 Spring Boot 2.3 中增加了 ...

  9. elementUI+国际化

    1. 先创建一个lang 文件夹,创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index.js文件(用于) en.js zh.js (两者必须保持一致) 2. 在index ...

  10. Vue封装公共组件TarBar

    github:https://github.com/zwnsyw/TabBar 一.实现简单思路 1.在页面底部有一个单独的TabBar组件1.1自定义TabBar组件,在APP中使用1.2让TabB ...