几个常见CSS错误和解决办法
1.IE6下,当float存在时,margin双倍的问题
解决方法:加display:inline;
例:
#content {
left;
width:
500px;
padding:
10px 15px;
margin-left:
20px;
display:inline;
}
2.克服盒子模型的hack
原写法:
#main-div{
width: 150px;
border: 5px;
padding: 20px;
}
修正后
#main-div1{
width: 150px;
}
#main-div1 div{
border: 5px;
padding: 20px;
}
例如:
<div id="main-div">1</div>
<div id="main-div1"><div>2</div></div>
见图:
两者区别:1是把padding加到父层里,DIV的宽度是150+20+20
2是把PADDING加到子层里,div的宽度是150.
我习惯是用1的方法去自己计算宽高.
3,4.最小高度(最小宽度)IE不识别的解决方法
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
* html .container {
height: 8em;
}
5.整块元素居中对齐的方法
body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}
先定义BODY中的文字整个居中text-align:center,再定义其中需要左对齐的子元素text-align:left;
6.垂直居中的CSS
#wrapper {
width:530px;
height:25px;
background:url(container.gif) no-repeat left top;
padding:0px 10px;
}
#wrapper p {
line-height:25px;
}
适用单行文字,将height设成line-height同值
7.固定宽度下几个LI元素float横排时,超出宽度限定的解决方法
css:
ul.listing{ margin:0; width:400px; border:1px solid #000;}
ul.listing li{ list-style-type:none; float:left; margin:0 20px 0 0; width:83px; border:1px solid red;}
ul.listing1{ margin:0 0 0 -20px; width:420px; border:1px solid #000;}
ul.listing1 li{ list-style-type:none; float:left; margin:0 0 0 20px; width:83px; border:1px solid red;}
例子:
<ul class="listing">
<li>第一句</li>
<li>第二句</li>
<li>第三句</li>
<li>第四句</li>
</ul>
</div>
<div>
<ul class="listing1">
<li>第一句</li>
<li>第二句</li>
<li>第三句</li>
<li>第四句</li>
</ul>
图示:
原理:
用负margin的方法
9.定位z-index
z-index起作用的前提是,必须有position:absolute,
position:fixed orposition:relative这三种中的任一种属性.
css:
.relativeblock1 {
position:relative;
width:200px;
height:80px;
z-index:51;
}
.absoluteblock1 {
position:absolute;
left:10px;
top:90px;
width:40px;
height:40px;
z-index:1;
}
.relativeblock2 {
position:relative;
width:200px;
height:80px;
z-index:50;
}
例:
<div class="relativeblock1">
<div class="absoluteblock1"></div>
</div>
<div class="relativeblock2"></div>
见图:
按CSS来说,relativeblock2应该会盖上absoluteblock1,但实际正相反,是因为
absoluteblock1的优先级别高于relativeblock2,他继承了absoluteblock1的z-index,虽然他自身的z-index值为1,但实际为51.1,当然高于relativeblock2的z-index:50.
10.相对定位relative和绝对定位absolute的区别
- CSS:
- #redSquare
- {
- position: relative;
- bottom: 40px;
- right: 40px;
- }
- 图例:
- 11.绝对定位的应用
- css:
- #hang_tab {
- position: absolute;
- top: 7px;
- left: 0px;
- width: 157px;
- height: 93px;
- }
- 图例:
- 13.正确消除浮动(float)的方法
- css:
- #container:after
- {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
- #container
- {display: inline-block;}
- * html #container
- {height: 1%;}
- #container
- {display: block;}
- 例图:
- 经实现,用:after属性是为了消除float浮动(针对FIREFOX使用)时父层无法正确识别高度,复杂且不易记不,优点是不需要再写<div style="clear:both"></div>这样一个空层来撑起高度。
- 15.如何处理圆角
- 最简单的方法是用一张足够大的图,然后我该圆角标注
- html:
- <div class="roundBox">
- <p>beautifully-encapsulated paragraph</p>
- <div class="boxBottom"></div>
- </div>
- css:
.roundBox {
background:transparent url(roundBox.gif) no-repeat top left;
width:340px;
padding:20px;
}
.roundBox .boxBottom {
background:white url(roundBox.gif) no-repeat bottom left;
font-size:1px;
line-height:1px;
height:14px;
margin:0 -20px -20px -20px;
}
- 17.用label标签做表单(非table)
- 精华html:
- <form method="post" action="contactengine.php">
- <label for="Name">Name:</label>
- <input type="text" name="Name" id="Name" />
- .....
- </form>
- css:
- label {
- float: left;
- text-align: right;
- margin-right: 15px;
- width: 100px;
- }
- 20.用有背景图的hr做分隔线,适用所有浏览器的方法.
- 因为hr自身的样式是一根黑线,所以让他自身的样式 隐藏,然后新写一个class="hr",让hr听他父层的话
- 经验证这样写无意义,对于目前中国的网站来说,极少用到HR.
- =========================================================
- The CSS Class
- ====
几个常见CSS错误和解决办法的更多相关文章
- 【转载】IE浏览器常见的9个css Bug以及解决办法
IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...
- Oracle的常见错误及解决办法
ORA-12528: TNS:listener: all appropriate instances are blocking new connections ORA-12528问题是因为监听中的服务 ...
- github常见操作和常见错误及其解决办法
一.常见操作 1. 使用git在本地创建一个项目的过程 $ makdir ~/hello-world //创建一个项目hello-world $ cd ~/hello-world //打开这个项目 $ ...
- 常见反编译产生错误 k__BackingField 解决办法
常见反编译产生错误 k__BackingField 解决办法 无聊反编译小蚂蚁出现上千的错同样的错 private bool <EnableRuntimeHandler> ...
- MVC MVC常见错误及解决办法
MVC常见错误及解决办法 问题1: 必须添加对程序集“EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c5 ...
- Docker Hadoop 配置常见错误及解决办法
Docker Hadoop 配置常见错误及解决办法 问题1:wordcount运行卡住,hadoop 任务运行到running job就卡住了 INFO mapreduce.Job: Running ...
- Ubuntu下Linux配置内核各种常见错误和解决办法
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 这篇把Ubuntu下Linux配置内核各种常见错误和解决办法给大家讲解一下,希望可以帮助到大家. 一.Ubuntu系统中缺少各种依赖包导致的问题 1 ...
- 使用wubi安装ubuntu14.04出现的常见错误的解决办法
花了一天的时间终于安装上了Ubuntu14.04,过程坎坷,是血泪史,开始报“cannot download the metalink and therefore the ISO”错误,解决后,又报“ ...
- 【LNMP】提示Nginx PHP “No input file specified”错误的解决办法
原理: 任何对.php文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在. PHP文件不存在,没办法返回普通的404错误,它返回 一个404,并带上一句”No input f ...
随机推荐
- SSM 的 基本原理与面试相关
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.MyBatis 1.Mybatis出现最多的问题是什么? 问题: 在XML配置文件中语句的书写与对象 ...
- Vue中keep-alive的使用
Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时 ...
- Java实现 蓝桥杯VIP 算法训练 字符串逆序
问题描述 给定一个字符串,将这个串的所有字母逆序后输出. 输入格式 输入包含一个字符串,长度不超过100,字符串中不含空格. 输出格式 输出包含一个字符串,为上面字符串的逆序. 样例输入 tsinse ...
- 第五届蓝桥杯JavaA组省赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.猜年龄 题目描述 小明带两个妹妹参加元宵灯会.别人问她们多大了,她们调皮地说:"我们俩的年龄之积是年龄之和的6倍" ...
- Java中线程的操作状态
start() 线程开始运行 sleep() 当前线程暂停休息 括号里面是多长时间以毫秒为单位 wait() 当前线程等待 notify() 线程wait后用这个方法唤醒 notifyAll() 把所 ...
- 如何监控 Linux 服务器状态?
Linux 服务器我们天天打交道,特别是 Linux 工程师更是如此.为了保证服务器的安全与性能,我们经常需要监控服务器的一些状态,以保证工作能顺利开展. 本文介绍的几个命令,不仅仅适用于服务器监控, ...
- 小师妹学JavaIO之:目录还是文件
目录 简介 linux中的文件和目录 目录的基本操作 目录的进阶操作 目录的腰疼操作 总结 简介 目录和文件傻傻分不清楚,目录和文件的本质到底是什么?在java中怎么操纵目录,怎么遍历目录.本文F师兄 ...
- 如何优雅地停止 Spring Boot 应用?
首先来介绍下什么是优雅地停止,简而言之,就是对应用进程发送停止指令之后,能保证正在执行的业务操作不受影响,可以继续完成已有请求的处理,但是停止接受新请求. 在 Spring Boot 2.3 中增加了 ...
- elementUI+国际化
1. 先创建一个lang 文件夹,创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index.js文件(用于) en.js zh.js (两者必须保持一致) 2. 在index ...
- Vue封装公共组件TarBar
github:https://github.com/zwnsyw/TabBar 一.实现简单思路 1.在页面底部有一个单独的TabBar组件1.1自定义TabBar组件,在APP中使用1.2让TabB ...