www.baike369.com
百科369 > CSS教程 > CSS盒子模型、定位与浮动

CSS盒子模型、定位与浮动



CSS盒子模型

CSS元素盒子模型(Box Model)概述

对于浏览器来说,任何HTML元素都是里面装有东西的一个长方形的盒子。

CSS视口与包含块

指的是浏览器窗口中用来显示网页的区域。

CSS width与height属性定义元素的宽度和高度

一般情况下,一个元素的width属性定义为左侧内部边线到右侧内部边线之间的水平距离,height属性定义为顶部内边线到底部内边线之间的垂直距离。

CSS确定盒子中元素区域的宽度和高度

width属性(宽度)和height属性(高度)是构成部分CSS盒子模型的另外两个CSS属性。

CSS设置行内元素的宽度

块级元素生成块级框(block box);行内元素生成行内框(inline box)。

CSS长度和百分比

在CSS中,长度值可以是具体的像素值,也可以是em值或者其它合法的值。

CSS控制<div>标签的最小宽度与最大宽度

在CSS中有两个关于元素的最小宽度和最大宽度的属性:min-width属性:设置元素的最小宽度。

CSS设置行内元素的高度

height属性对于非替换的行内元素无效,非替换行内元素的框高度是由行高决定的。

CSS控制<div>标签的最小高度与最大高度

在CSS中有两个关于元素的最小高度和最大高度的属性:max-height属性:设置元素的最大高度。

使用CSS padding属性设置内边距

CSS的内边距指的是边框和它的内容之间的空白距离。

CSS padding属性综合设置元素的内边距

如果要同时设置某个元素的4个内边距。

CSS padding-top属性设置元素的上内边距

padding-top属性设置的是某一元素内容的顶部与它的上边框之间的空白距离。

CSS padding-right属性设置元素的右内边距

padding-right属性设置的是某一元素内容的右侧与它的右边框之间的空白距离。

CSS padding-bottom属性设置元素的下内边距

padding-bottom属性设置的是某一元素内容的底部与它的下边框之间的空白距离。

CSS padding-left属性设置元素的左内边距

padding-left属性设置的是某一元素内容的左侧与它的左边框之间的空白距离。

CSS列表元素外边距与内边距的代码设置实例

在CSS中,可以使用margin属性设置列表元素的外边距;使用padding属性设置列表元素的内边距。

CSS内边距、宽度和高度

padding属性设置的内边距(补白)是指边框内边到内容边的距离,内边距不包含在width属性或者height属性之内。

CSS使用百分比值设置内边距

CSS使用padding属性设置内边距时,如果使用百分比值,则是以包含块的宽度为基数的,并且百分比值不能为负值。

CSS border属性设置元素的边框

border属性可以同时设置元素的边框的宽度、样式和颜色。

使用CSS border属性添加div的边框样式

我们使用CSS的border属性可以很方便地给div盒子添加不同的边框样式。

CSS使用border属性设置框架中的边框

只有在框架集中的框架边框设置为显示的情况下,才能使用border属性设置框架的边框。

CSS border-top属性设置元素的上边框

border-top属性可以同时设置元素的上边框的宽度、样式和颜色。

CSS border-right属性设置元素的右边框

border-right属性可以同时设置元素的右边框的宽度、样式和颜色。

CSS border-bottom属性设置元素的下边框

border-bottom属性可以同时设置元素的下边框的宽度、样式和颜色。

CSS border-left属性设置元素的左边框

border-left属性可以同时设置元素的左边框的宽度、样式和颜色。

CSS border-color属性设置元素的边框颜色

使用border-color属性可以设置元素的4个边框的颜色。

CSS border-top-color属性设置元素的上边框颜色

使用border-top-color属性可以设置元素的上边框的颜色。

CSS border-right-color属性设置元素的右边框颜色

使用border-right-color属性可以设置元素的右边框的颜色。

CSS border-bottom-color属性设置元素的下边框颜色

使用border-bottom-color属性可以设置元素的下边框的颜色。

CSS border-left-color属性设置元素的左边框颜色

使用border-left-color属性可以设置元素的左边框的颜色。

CSS border-width属性设置元素的边框宽度

使用border-width属性可以设置元素的4个边框的宽度。

CSS border-top-width属性设置元素的上边框宽度

使用border-top-width属性可以设置元素的上边框的宽度。

CSS border-right-width属性设置元素的右边框宽度

使用border-right-width属性可以设置元素的右边框的宽度。

CSS border-bottom-width属性设置元素的下边框宽度

使用border-bottom-width属性可以设置元素的下边框的宽度。

CSS border-left-width属性设置元素的左边框宽度

使用border-left-width属性可以设置元素的左边框的宽度。

CSS border-style属性设置元素的边框样式

只定义边框的宽度并不会使元素显示边框,因为边框样式的默认设定为“none(无)”。

CSS使用border-style属性设置框架中的边框风格

只有在框架集中的框架边框设置为显示的情况下,才能使用border-style属性设置边框风格。

使用CSS边框属性设置边框样式

在html中,使用表格创建文本周围的边框。

CSS border-top-style属性设置元素的上边框样式

边框的样式指的是边框的线条属性,指的是边框采用的是实线效果、短线效果还是其它的线条效果。

CSS border-right-style属性设置元素的右边框样式

边框的样式指的是边框的线条属性,指的是边框采用的是实线效果、短线效果还是其它的线条效果。

CSS border-bottom-style属性设置元素的下边框样式

边框的样式指的是边框的线条属性,指的是边框采用的是实线效果、短线效果还是其它的线条效果。

CSS border-left-style属性设置元素的左边框样式

边框的样式指的是边框的线条属性,指的是边框采用的是实线效果、短线效果还是其它的线条效果。

CSS设置行内元素的边框

在CSS中,使用border属性同样可以设置行内元素的4个方向的边框。

CSS文字链接的装饰效果

为了给访客一个醒目的提示,设计者经常会为页面中带链接的文字设计出特别的样式,以便与普通的文本内容区分开。

使用CSS margin属性设置外边距

CSS的外边距指的是元素边框外面的透明区域(空白区域)。

CSS margin属性综合设置元素的外边距

如果要同时设置某个元素的4个外边距。

CSS margin-top属性设置元素的上外边距

margin-top属性设置的是一个元素的顶端与另一个元素之间的距离。

CSS margin-right属性设置元素的右外边距

margin-right属性设置的是一个元素的右侧与另外一个元素之间的距离。

CSS margin-bottom属性设置元素的下外边距

margin-bottom属性设置的是一个元素的底部与另外一个元素之间的距离。

CSS margin-left属性设置元素的左外边距

margin-left属性设置的是一个元素的左侧与另外一个元素之间的距离。

CSS设置行内元素的外边距

CSS中,垂直方向的外边距对于非替换的行内元素无效(例如<a>、<em>)。

CSS外边距的重叠

CSS中,元素之间垂直方向的外边距有可能会发生重叠。

CSS使用百分比值设置外边距

CSS使用margin属性设置外边距时,如果使用百分比值,则是以元素的包含块的宽度为基数进行计算的。

CSS中margin、padding和百分比

在margin属性或padding属性中使用百分比(percentage)时,浏览器是以外围元素的宽度为基础计算空白区域的大小的。

CSS的边距冲突

当某个元素的margin-bottom属性碰到另一个元素的margin-top属性时,浏览器不是把这两个边距相加,而是应用它们中较大的那一个。

利用CSS display属性模拟表格

使用CSS的display属性的相关属性值,可以使<ul>标签和<li>标签显示出表格的外观。

CSS使用display属性和:hover伪类显示或隐藏元素

在CSS中,使用display属性和:hover伪类,可以实现当鼠标指向某个元素的时候显示另外某些元素。


CSS定位

CSS元素盒子的定位

CSS元素盒子的定位非常简单,它是指你定义的元素框相对于其原始位置重新出现的新位置,或者相对于父元素、或者相对于另一个元素甚至相对于浏览器窗口本身的位置。

使用CSS定位的嵌套DIV实例

本例使用position属性的absolute值定位了一个嵌套的DIV。

CSS使用子元素的定位属性定义垂直居中的代码设置实例

由于父元素和子元素中都定义了固定的高度,因此可以在子元素中使用绝对或相对定位属性定义子元素的位置,达到垂直居中的效果。

CSS使用绝对定位定义水平自适应布局的实例

使用绝对定位可以将元素定位在相对于<body>元素的某个位置上。

CSS使用绝对定位纵向分栏布局的实现方法与实例

在使用绝对定位实现纵向分栏布局的时候,需要为每个分栏的内容定义相应的边偏移属性,同时要注意元素之间不能够重叠。

CSS top属性设置元素距离顶端的垂直距离

top属性设置元素距离顶端的垂直距离,相当于元素距离顶点的纵坐标位置。

CSS right属性设置元素距离右端的水平距离

right属性设置元素距离右端的水平距离。

CSS bottom属性设置元素距离下端的垂直距离

bottom属性设置元素距离底端的垂直距离。

CSS left属性设置元素距离左端的水平距离

left属性设置元素距离左端的水平距离。

CSS z-index属性设置元素的层叠顺序

z-index属性允许网页制作者改变元素相互重叠的顺序。

CSS使用关键字定位背景图片

本章详细讲解使用background-position属性中的关键字来定位背景图片的情况。

CSS使用百分比值定位背景图片

使用百分比(percentage)值也可以定位背景图片。


CSS浮动与清除

CSS float属性实现元素的浮动功能

float属性也称为漂浮属性,一般用来设置是否允许文字显示在图像的周围,其功能类似于HTML标记中的align属性。

左浮动与右浮动的CSS对齐方法

本例使用CSS制作了两个固定浮动的方框盒子,一个盒子是左上对齐,一个盒子是右下对齐。

CSS clear属性实现浮动元素的清除功能

浮动元素的特点之一,就是可以与其它元素在一行内显示,但是有时候并不希望这样,那么就要使用clear属性来清除浮动了。

CSS元素盒子的浮动与清除

在CSS中,任何html元素都可以左右浮动,浮动的元素移动到它的父元素的左边或者右边,直到它的外边缘碰到父元素的边缘或者另一个浮动元素的边缘为止。

CSS实现浮动与清除的实例

现在,我们使用<div>标签设计两个简单地内容块:在浏览器中查看CSS实现浮动与清除的显示效果。

使用CSS的clear属性清除浮动的示例

没有使用clear属性清除浮动时。

CSS使用浮动属性纵向分栏布局的实现方法与实例

在使用浮动属性实现纵向分栏布局的时候,需要为每个浮动元素定义浮动属性值。


CSS溢出和剪切

CSS overflow属性处理元素盒子中内容的溢出

overflow属性是指当盒子内的内容超过了盒子的容量时,对于内容的处理方式。

CSS防止超长字符串溢出的写法

本例使用CSS代码定义了特长字符串防止溢出的写法,实际上是使用CSS代码定义了英文URL或字符的强制换行。

使用CSS的clip属性裁切元素内容

在本例中,如果没有使用clip属性代码:则元素和内容就不会被裁剪。

CSS clip属性设置元素的裁剪区域

clip属性用于设置可视区域,即指定页面中哪一部分是可见的,哪一部分被隐藏。


CSS的可视性

CSS visibility属性设置元素是否可见

在使用元素进行定位时,从可视角度来讲,不可避免地会发生两个元素试图同时出现于同一个位置的情况。

CSS使用visibility属性显示和隐藏元素

当使用CSS的display属性来实现元素的显示和隐藏时。

Copyright© 2011-2016 www.baike369.com All Rights Reserved