深圳网站优化排名

将想法与焦点和您一起共享

深圳网站建设设计 深圳网站优化排名 深圳网站设计制作欣赏

使用20个CSS来解决常见错误和修复

2017-07-21  阅读: 深圳网站建设设计

使用20个CSS来解决常见错误和修复
毫无疑问深圳网站制作,一个逻辑结构的布局是最好的方式。不仅因为浏览器之间的布局不同,而且CSS也有很多方法来定位每个元素。今天,我们想和大家分享一些关于如何在创建CSS布局时避免易犯陷阱的快捷技巧。

这是本系列的第一部分,因为有这么多好的技巧,如果你看到一个更容易或更好的方法,然后发表评论或电子邮件给我。我会尽我最大的努力把它包括在我们的下一篇文章中。

IE浏览器的bug修复

1 -错误修复:IE双边距浮点错误-这是一个Internet Explorer专有的错误,其中一个元素是浮动的,并给予保证金在同一个方向的浮动-结束了两倍的指定保证金大小。这个解决方案非常简单。你所要做的就是将显示:内联规则你的浮动元素。所以你只会从这样的事情:

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px; }

 

像这样的事情:

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

 

2-overcoming盒模型hack–如果你想指定任何div的宽度,不指定填充或利润。只需创建一个没有宽度设置的内部div,然后指定它的填充和边距。所以不要这样做:

#main-div{
width: 150px;
border: 5px;
padding: 20px;
}

Do something like this:

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}

 

3-min-height忽略该属性在IE–“最小高度”属性适用于Firefox但是IE忽略它。IE的高度作为FF的最小高度。注:在IE 7的问题是固定的。

/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* for Internet Explorer */
/**/
* html .container {
height: 8em;
}
/**/

 

4.的IE浏览器,最小宽度固定为最小宽度在Internet Explorer中的缺失。

对块元素居中


5-centering块元素–有定心块元素多技术;并对技术的选择取决于你是否在绝对值的大小设置的百分比或。
对整个页面的内容:

body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}

 

6-vertical配合CSS–如果你想知道如何可以实现垂直对齐功能的正确方式,简单地指定你的文字高度相同的行高,容器的。

#wrapper {
    width:530px;
    height:25px;
    background:url(container.gif) no-repeat left top;
    padding:0px 10px;
}
#wrapper p {
    line-height:25px;
}


7个主要原因是CSS栏被弄乱了-关于如何用有用的图表和代码片段修复常见的CSS列问题的简单易懂的文章。
CSS技巧

8 -当你试图创建一个两列浮动布局时,扩展框错误,IE将创建一个“浮动下拉”,它是由于在固定宽度的浮点div中有过多的内容,必须与布局中的某个特定位置相匹配。几种可能的解决方法是在本文中详细。

 


9了解CSS定位1部分–有趣的系列文章,不只是盖定位,而且属性定义布局如显示和浮动,和预览新的CSS3模块布局。第一部分将介绍定位和显示属性。一,二,三给你的可能性,你的定位有深刻的理解。

 

10绝对和相对定位的区别是什么?-是否使用相对或绝对定位对刚开始使用CSS的人来说是非常令人沮丧的。对这个问题的回答将对这种混乱增加一点透明度。

#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}

 

11 hangtab–创建从浏览器窗口的边缘粘标签(甚至是核心的内容)。看看他们的软件公司Panic的网站。

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

 

12 CSS浮动理论:你该知道的事情–smashingmagazine浏览相关文章数十篇,选择你应该牢记开发CSS的花车布局的最重要的事情。

<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>

 

13 floatutorial简单教程:CSS浮动–floatutorial通过浮动元素如图像、落帽的基本知识,接下来和返回按钮,图像画廊,内联表和多栏的布局。

 

14明确你的浮–正道–清漂可以是一个CSS发展最令人沮丧的方面,最好的方法之一是使用easyclearing网站。

/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#container
{display: inline-block;}

/* Hides from IE-mac */
* html #container
{height: 1%;}

#container
{display: block;}
/* End hide from IE-mac */

简单圆角的解决方案

 

15 -迈克问CSS家伙建议圆角-“最简单的方法是使用一个巨大的GIF,然后我将标记我的盒子”
<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
  <div class="boxBottom"></div>
</div>

.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;
}

也askthecssguy解释使用谷歌分析的技术,它通过把一个像素的缺口中的每一个角落得到圆角效果,是一种新的方式使用静态图像创建圆角。你可以在这里看到一个例子。

CSS技巧

编码实现圆角–Alen Grakalic编码方法固定宽度的圆角16-3步骤简单,简单的3个步骤。他还在这里创建了一个演示。

CSS样式的问题


17与我们的浮动标签,一些技巧创造伟大的Web窗体–Cris Coyer股票技巧:重点伪类,使用提示和更多。他还创造了很好的和简单的联系方式,这是他第一次公布了这里。

label {
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 100px;
}

 


18 -干净和纯粹的CSS表单设计——对于CSS爱好者来说,本教程演示了如何在不使用HTML表的情况下设计纯CSS表单的建议。你可以在这里抓取代码。

CSS技巧

 

19 autopopulating文本输入字段与JavaScript–有时我们需要向用户解释他们应该进入文本输入字段。一个常见的解决方案时,没有标签可以显示是放一些占位符文本在文本字段,让作为标签。本教程介绍了一个很好的解决方案,通过启用JavaScript,标签元素被隐藏,输入元素title属性的值被复制到值属性。如果禁用JavaScript,则标签将显示在文本输入之上,该文本输入是空的。一个简单的演示,在那里你可以看到这个动作是在这里。

 

20 -跨浏览器的横向规则与背景图像-你想创建一个跨浏览器的横向规则,利用自定义图像作为内容分隔符。

div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}

Your tag should look like this:

<div class="hr"><hr /></div>

将文章分享到..