CSS总结Word下载.docx
- 文档编号:18670889
- 上传时间:2022-12-31
- 格式:DOCX
- 页数:14
- 大小:273.92KB
CSS总结Word下载.docx
《CSS总结Word下载.docx》由会员分享,可在线阅读,更多相关《CSS总结Word下载.docx(14页珍藏版)》请在冰豆网上搜索。
默认值。
无特殊定位,对象遵循HTML定位规则。
元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。
absolute
将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
如果不存在这样的父对象,则依据body对象。
而其层叠通过z-index属性定义
fixed
未支持。
对象定位遵从绝对(absolute)方式。
但是要遵守一些规范。
相对于浏览器窗口进行定位。
元素的位置通过"
left"
"
top"
right"
以及"
bottom"
属性进行规定。
可通过z-index进行层次分级
relative
对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,可通过z-index进行层次分级。
1、relative。
定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。
如图1:
黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。
在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。
2、absolute。
定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。
如图2:
可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上。
3、relative与absolute的主要区别:
首先,是上面已经提到过的在正常流中的位置存在与否。
其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。
如图3:
图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。
红色背景层的位置为相对绿色背景层top、left个20元素。
而如果红色背景层定位为absolute,则情形如图4:
可以看到,红色背景层依然定义top:
20px;
left:
但其相对的元素变为定位方式为absolute或relative的黄色背景层。
因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。
如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:
除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。
Float(浮动)定位属性
页面布局有两种方式
1)浮动Float
2)定位Position
今天就来一个小小的练习,让大家理解Float的含义
【例子】
要求:
1)两个div块元素,一个红色,一个蓝色;
2)红色方块宽度和高度均为200像素,蓝色方块宽度为300像素,高度为200像素;
3)红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素;
大家应该注意到了,虽然红色方块的宽度并不是100%,但是蓝色并未和红色处于同一行,这就是块状元素比较“霸道”的一点,(即使块状元素的宽度不是100%,它也不允许其他元素和他同在一行)为了消除这种“霸权”,让红色和蓝色方块都处在一行。
此时就需要拿出我们的利器Float!
只需要在红色方块的CSS里面加上“float:
left;
”,这时候在IE中可以看到蓝色方块的确跑到红色方块的后面了,并且处于一行了。
但是在FireFox中却变成了如下效果:
这时候就需要注意了,FF中如果前面的区域浮动了,后面的那个区域很有可能就会和前面的区域发生重叠并错位。
(其中ie8也有一些区别,如果加入了“<
%@pagecontentType="
text/html;
charset=utf-8"
language="
java"
import="
java.sql.*"
errorPage="
"
%>
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
“dtd解释不同,则也是跟FF一样出现重叠现象,去除的话则跟其他版本相同!
)
怎么才能解决这个问题,解决这个浏览器兼容的问题,很容易,只需要在蓝色方块的CSS代码中也加入“Float:
”,问题就解决了,加上试试,看看在FF中蓝色方块是不是和红色方块处于一行了~
到这里,大家应该明白Float的作用了吧,就是为了消除块状元素“霸权主义”的一把利器!
在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟。
在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素,而是40像素,如下图:
其实这是IE6的一个BUG,(IE6双倍边距BUG),只要满足下面3个条件才会出现这个BUG:
1)要为块状元素;
2)要左侧浮动;
3)要有左外边距(margin-left);
解决这个BUG很容易,只需要在相应的块状元素的CSS树形中加入“display:
inline;
”,代码如下:
现在再看看,是不是IE6和FF显示一样了呢~
清除浮动(Clear)属性
我们使用“Float:
left”,我们将红色方块的CSS代码中加入了“Float:
”后,红色方块终于允许蓝色方块和它处于同一行。
我们换一种方法表达上面的意思,因为红色方块的“左侧浮动”,才导致蓝色方块上移至红色方块的尾后;
在上个例子中,为了达到浏览器兼容性,我们分别在红色蓝色方块CSS代码中分别加了“Float:
”,这样IE和FF中显示效果一样,如果此时我们还想放一个宽度400像素,高度100的绿色方块,并让其处于第二行,效果如下图:
可是这时候不管怎么放,在IE中的效果始终是
导致深蓝色排到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有"
Float:
,但是为了浏览器兼容性,又不能去掉,只要在CSS代码中加入下面这段代码:
clear:
both;
目的就是为了清除蓝色方块的浮动对下面绿色方块的影响!
是影响哟~是清除影响,而不是清楚蓝色方块的浮动,或者说清除蓝色方块的浮动对下面区域块产生的作用!
盒模型:
五种盒模型特点:
1.内联盒模型特点
Html代码
1.按从左至右排列的。
2.当超过它们最近的祖先元素时,便换到下一行。
3.width、height、overflow、margin-top、margin-bottom对内联元素完全不起作用。
4.内联元素用line-height设置行的高度。
2内联块状模型特点
inline-block:
内联显示,但是元素的内容以块状显示,行内其他内联元素还会显示在同一
行内。
3.块状盒模型特点
1.按从上至下排列的。
2.width:
auto、height:
auto是默认值,使它与父元素相一致。
3.width:
100%
==
父元素的宽度,width:
120%会超过父元素的宽度.
4.*margin-left:
auto会令块状元素排列在父元素的右侧。
5.*margin-right:
auto会令块状元素排列在父元素的左侧。
6.*margin-left和margin-right都auto排列在父元素的中间.
4.表格盒模型特点
1.表格有外边距,没有内边距。
2.单元格有内边距,没有外边距。
3.不能把overflow应用于表格,应把overflow:
hidden赋给单元格.
4.border-collapse决定了邻近的边框是否合并为一个。
分离(separate),
合并(collapse)。
5.table-layout决定了是固定大小(fixed)还是auto.
表格有外边距,没有内边距。
单元格有内边距,没有外边距。
不能把overflow应用于表格,应把overflow:
hidden赋给单元格.
border-collapse决定了邻近的边框是否合并为一个。
分离(separate),合并(collapse)。
table-layout决定了是固定大小(fixed)还是auto.
5.绝对定位盒模型特点
1.它是相对于(relative)最近定位祖先元素来定位的。
2.当width有个值,left有个值,right:
auto的时候,从左侧偏离。
3.margin为正的时候靠近容器中心,为负远离中心。
4.width:
100%会与祖先的宽度相等。
详解display:
inline|block|inline-block的区别
display:
inline就是将元素显示为块级元素.
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
div>
<
p>
h1>
form>
ul>
和<
li>
是块元素的例子。
inline就是将元素显示为行内元素.
inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
span>
a>
label>
input>
img>
strong>
和<
em>
是inline元素的例子。
inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内,允许空格。
inline-block的元素特点:
将对象呈递为内联对象,但是对象的内容作为块对象呈递。
(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)
并不是所有浏览器都支持此属性,目前支持的浏览器有:
Opera、Safari在IE中对内联元素使用display:
inline-block,IE是不识别的,但使用display:
inline-block在IE下会触发layout,从而使内联元素拥有了display:
inline-block属性的表症。
从上面的这个分析,也不难理解为什么IE下,对块元素设置display:
inline-block属性无法实现inline-block的效果。
这时块元素仅仅是被display:
inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
IE下块元素如何实现display:
inline-block的效果?
有两种方法:
1、先使用display:
inline-block属性触发块元素,然后再定义display:
inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:
inline-block,然后再将display设回inline或block,layout不会消失)。
代码如下(...为省略的其他属性内容):
div{display:
inline-block;
...}
}
2、直接让块元素设置为内联对象呈递(设置属性display:
inline),然后触发块元素的layout(如:
zoom:
1等)。
代码如下:
zoom:
1;
...}
包裹与拉伸
1.拉伸:
指如何把元素宽、高拉伸至其容器的尺寸,可以通过width:
auto,width:
100%;
height:
auto,height:
100%实现
A.width:
auto,height:
auto浏览器从外往里计算被拉伸元素的宽、高;
B.若是被包裹的,则从里往外计算;
2.包裹:
减少元素的宽和高从而使其包裹住它的内容
Width:
auto把宽度设为最宽的一行相同;
Height:
auto把高度降为内容的高度;
不能水平包裹静态块状元素。
3.设定尺寸,可用于静态内联元素之外的所有元素
Height,width表示内盒的大小,然后是padding,border,margin然后是外盒,外盒受它们的影响,但不影响内盒的大小。
表格是例外,height和width包括border和padding在内;
浮动元素设定了尺寸,会改变排列的顺序;
静态块状元素被设定尺寸后,会改变排列的顺序;
Height、Width对除了内联元素都失去了作用;
Width:
auto
水平包裹着:
内联、内联块状、浮动、表格、绝对定位(left、right都为auto时)
水平拉伸:
块状和绝对定位(left、right都有一个值)
Height:
竖直包裹:
内联、内联块状、块状、浮动、表格、绝对定位(top、bottom为auto时)
竖直拉伸:
绝对定位(bottom、top都有一个值)
100%,height:
100%会把元素宽度和高度设为其父元素宽和高,但不像auto,width100%时浏览器不会自动调整宽以保持元素被拉伸,元素margin,padding,border扩展其大小,甚至超越父元素。
100%
拉伸:
:
内联块状、浮动元素、表格;
100%
内联块状、浮动元素、表格、块状元素;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 总结