欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

css 约束规则

这篇文章是我不懂css的时候收藏的,分享给大家。

1、当需要定宽和浮动时在最外层设定,此层不能padding,可以margin.
2、最外层同时左浮动会造成IE6的双倍边界,必须加display:inline来解决.
3、子层不允许设定宽度,全部通过Padding(左右)来定宽
4、Div默认宽100%,高0px. 宽和高的优先级大于父级的padding
5.ui的magin会有一定的值.一般采用magin:0,一般用padding来定义.
6.form会产生一定的边距.需设magin:0;
7.图片会自动撑大外套div,因此,图片样式需设display:block;但当图片和文字并排会独占一行,需一行时设图片样式display:inline,
8. 在ie6,firefox中不定义高度会自适应高度.
9.当父元素定义宽时,子元素设有margin时,在ie8中出现上下没margin,此时给父元素设border会好.
7.清空.clear  ie6会产生一定的间隙,要设.clear{overflow:hidden};
8.div发生错位,一般用清除浮动来解决。
9.div的height:100%。在有父级层时会起作用。
10.文本框,文字,图片对齐。vertical-align:middle;对块元素不起作用.因此,要用ul li{disploy:inline;line-height:20px;}input,img{vertical-align:middle; }这样会在一条直线上。
11.表格文字自动换行word-wrap:break-word; overflow:hidden;
12.链接时图片出现边框 a:img{
text-decoration:none;
boder:none;
}
13.
.color{
background-color: #CC00FF; 
background-color: #FF0000\9; /
*background-color: #0066FF;    
_background-color: #009933;  /*IE6会变为绿色*

}

————–

2.百分比值的使用
在使用百分比时,这个值不是用元素自身的宽度值来计算的。而是用包含元素的父元素的宽度来计算的。
在firework中p元素含有的边界较大
3.边界属性
水平auto  在水平方向上,非浮动块元素盒模型的各个部分宽度之和。等于父元素的宽度。这个原则下,auto值就是填补父元素宽度的默认值。eg.如果父元素的宽度为450像素,子元素的宽度为200像素,左右补白属性都为50像素,没有边框。此时,定义子元素的margin为auto。那么auto的值就为75像素。
4.垂直方向的边界重叠。
两个带有margin属性的元素相邻时,在垂直方向上,边界属性会发生重叠。不相等时,元素间的距离等于值较大的一个。
5.在内联歹毒中使用边界属性
inline在水平位置上跟块元素一 样,产生作用,在垂直位置不变化。

6.子元素边界属性为0时
父元素含有有padding属性,子元素margin为零时。边界由父的padding决定;
当父的padding为零时,由子的margin来决定,但在firework中会起在父的作用上,给父添加1像素的边框会正常;
父元素含有padding属性同时子元素含有margin属性。
在ie浏览器中,在垂直方向上,采用父元素的补白属性值与子元素边界属性值重叠的方式,确定两者之间的距离。在水平方向上,采用相加的距离。在firework中,垂直和水平都采用相加。

浮动元素的双边距和零边距问题
方案1.不使用浮动元素的magin属性来定位 ,而采用父元素的padding来定位 。可解决双边距和零边距问题;
方案2.采用浮动元素的magin属性值为需要值 的一半,但是要使用!important声明,使firework中原来的边距。同使用附加的div的方法清除浮动;
方案3.使用定义浮动元素为内联元素的方法。这种方法并不能解决0边距的问题,依然要使用附加的div方法来清除浮动。

嵌套元素宽度和高度叠加的问题(父padding 子magin)
1.父元素和子元素没有定义宽度和高度时,上下左右都采用了叠加
2.定义子元素的宽后ie6在左右上下采用了叠加,而firefox都采用了相加;
3.定义父元素的宽后,ie6中上边界相叠加,下边界相加。firefox采用了相加的方式。
解决方案:用单独的空白分隔父元素与子元素的。定义宽度后,交用magin灵活一些,但在firework中。在父元素加个1px边框。

No related content found.

更多

本文固定链接: http://shanmao.me/web/divcss/css-%e7%ba%a6%e6%9d%9f%e8%a7%84%e5%88%99 | 山猫的博客

该日志由 admin 于2011年12月16日发表在 Div+Css 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: css 约束规则 | 山猫的博客