css(display,float,position)深入理解

来源:本网整理

给ul设一下 list-style-type:none;因为li默认会在左边预留一个点的位置 你不给ul li设样式就能看到,这个就是把点清除还有就是你背景图片最好别设定background-repeat:repeat-x;平铺,直接background-repeat:no-repeat;会更好,设定字体居中text-align:center;以及把行高设为按钮高度就可以实现了,居中一般没必要就别用padding样式,你把这个 padding:0px 42px;删掉就好了www.zgxue.com防采集请勿采集本网。

s">

css(display,float,position)深入理解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-17 09:07:43 我要评论 下面小编就为大家带来一篇css(display,float,position)深入理解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ">

display 用来设置元素的显示方式

我给楼主看了一下```你要的效果没说清楚`如果想显示出下拉列表直接删掉#menu li dd{display:none;} 就可以了。如果想鼠标移动后,出现下拉列表,我没看到楼主定义这个类型,所以给楼主一个我以前

display : block | none | inline | inline-block

给每个li指定不同的宽度值. 或者,把小图标切成独立的文件,然后给每个li指定一个不同的图标作背景图. 指定宽度容易,但如果将来要加一项或删一项的话,改动就比较大,而切成小图标,增删都可以很容易

inline:指定对象为内联元素

兼容ie和FF: css\"> con{ display:none;width:100px;height:100px;position:relative;left:10px;top:10px;border:1px#000000 solid;background-color:#ff0000;} document.onclick=

block:指定对象为块元素

display:inline;margin:0 30px;background-color:#ccc;} header,#footer { clear:both;padding:10px;text-align:center;} left { float:left;width:100%;margin:0 0 0-200px;} innerLeft { margin:0 0 0

inline-block:指定对象为内联块元素

只有css根本看不出来是哪里出错了,我这里有一个比较不错的你可以考虑下换个试试: DOCTYPE

none:隐藏对象

float 控制元素是否浮动显示

float : none | left | right

none:设置对象不浮动

left:设置对象浮在左边

right:设置对象浮在右边

浮动的目的:

就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性

1.任何申明为 float 的元素自动被设置为一个“块级元素”

2.在标准浏览器中浮动元素脱离了文档流 ,所以浮动元素后的元素会占据浮动元素本来应该所处的位置

3.如果水平方向上没有足够的空间容纳浮动元素,则转向下一行

4.文字内容会围绕在浮动元素周围

5.浮动元素只能浮动至左侧或者右侧

clear 清除浮动

clear : none | left | right | both

none:默认值。允许两边都可以有浮动对象

left:不允许左边有浮动对象

right:不允许右边有浮动对象

both:不允许有浮动对象

position 对象的定位方式

position : static | absolute | fixed | relative

static:默认值。无定位,对象遵循常规流。此时4个定位偏移属性不会被应用

relative:相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素

absolute:绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠

fixed:固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动

absolute 说明:

1.脱离文档流

2.通过 top,bottom,left,right 定位

3.如果父元素 position 为 static 时,将以body坐标原点进行定位

4.如果父元素 position 为 relative 时,将以父元素进行定位

例:div { position: absolute; left:100px; top:100px;}

relative 说明:

1.相对定位(相对自己原来的位置而言)

2.不脱离文档流

3.参考自身静态位置通过 top,bottom,left,right 定位

例:div { position: relative; left:100px; top:100px;}

fixed 说明:

固定定位实际上只是绝对定位的特殊形式,固定定位的元素是相对于浏览器窗口而固定,而不是相对于其包含元素,即使页面滚动了,它们仍然会处在浏览器窗口中跟原来完全一 样的地方

例:div { position: fixed; right:0; bottom:0;}

z-index 对象的层叠顺序

z-index : auto | number

当元素发生重叠时,可以通过 z-index 属性,设置其层叠的先后顺序

较大 number 值的对象会覆盖在较小 number 值的对象之上

以上这篇css(display,float,position)深入理解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持突袭网。

只有左右有双倍边距,要跟在margin的后边加内容来自www.zgxue.com请勿采集。

免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
Copyright © 2017 www.zgxue.com All Rights Reserved