CSS基础知识 - 盒模型/定位/浮动

1. Box Model (盒模型)

      Box Model 是CSS的指定元素如何显示和交互,是CSS的基石之一。

      页面上的每个元素被看成是一个矩形框,它由内容,填充(padding),边框(border),空白边(margin)组成。

      他们之间的关系如下:

      [ margin [ border [ padding [ content ] ] ] ]

      margin, border, padding 都是可选的,他们的默认值为0。

      

2. position(定位)

      a) 相对定位(relative)

            相对于原位置进行移动。

            eg:

            #box1 {

                  position: relative;

                  left: 10px;

                  top: 10px;

            }

            原位置向下并向左各移动10px。

        b) 绝对定位(absolute)

        c) 浮动(float)

            元素向左或向右浮动,直到碰到其他元素为止。

下面给出一个简单的新闻网页中常见的例子以供读者理解:

 

 1 <html>
 2 <head>
 3 <title>Enclosing Floats</title>
 4 
 5 <style type="text/css">
 6 
 7 .news {
 8   background-color:#eaeaea;
 9   border: solid 1px #999;
10     width: 500px;
11 }
12 
13 .news img {
14   float: left;
15     padding: 10px 0 10px 10px;
16     width: 150px; 
17     height: 180px;
18 }
19 
20 .news p {
21   float: right;
22     width: 300px;
23     margin: 0;
24     padding: 10px 10px 10px 0;
25 }
26 
27 </style>
28 
29 </head>
30 
31 <body>
32 
33 <div class="news">
34 <img src="news.jpg" />
35 <p>
36 人民图片网6月19日报道 当日9时30分,黄河小浪底大坝2个排沙洞同时开启,
37 放水量达到每秒2600立方米,形成壮丽的巨瀑景观,
38 黄河第九次调水调沙正式开始。此后小浪底水库及其下游16公里处的西霞院水库下泄流量逐日增大,
39 6月23日控制黄河花园口流量约3800立方/秒下泄。
40 </p>
41 </div>
42 
43 </body>
44 </html>

 

效果如下:

 

时间: 2024-10-26 15:57:00

CSS基础知识 - 盒模型/定位/浮动的相关文章

CSS基础知识解析

一.基础知识 1.1 CSS组成 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 声明:在英文大括号"{}"中的的就是声明,属性和值之间用英文冒号":"分隔.当有多条声明时,中间可以英文分号";"分隔,如下所示 p{font-size:12px;color:red;} 注意:1.最后一条声

CSS技巧知识:子元素浮动后父容器的闭合

css|浮动|技巧 最近两个月断断续续做了好几个网站的美工,做的过程中对DIV+CSS的标准开发有了进一步的了解.有两点收获最大,一是彻底弄懂了CSS的盒子模式(Box Model),再一个就是搞定了困扰我很久的"闭合浮动元素"的问题: 一般说来如果某个子元素使用了浮动(float),那父元素总是不能确切地知道子元素是在什么位置结束的,所以父元素的下边框总是从子元素的中间甚至是顶部穿过,看起来很不舒服. 最早时我都是在子元素结束后单独加个<br />或<div>

CSS基础知识 - ID/Class/Div/Span/Selector

1) . 号 和 # 号 在CSS文档中,我们常常可以看到一些符号,最常见的就是 . 号 和 # 号,那么它们分别代表什么意思呢? #号:标志网页上的ID,顾名思义,一个ID标志唯一的一个值,我们在数据库中也是如此,因此,ID必须是唯一的. .号: 标志网页上的一个Class(类),当然啦,这个Class和我们OOP中的Class不一样,请不要搞混.   那么,# 和 . 的区别到底是什么呢? 最重要的如下: 一个ID名只能应用于页面上的一个元素,而同一个类名可以应用于网页上任意数量的元素.  

w3c系列之CSS(四):深入理解盒模型

盒模型是一个老生常谈的话题,本身并不复杂,它描述了文档树所产生的矩形框以及根据可视化格式模型(visual formatting model)所产生的布局结构. 曾经看到一道面试题:说说CSS中的盒模型?网上的回答都是margin,border,padding,width,height之类的,尼玛都是复制粘贴的吧= =.....要是这篇文章也这么写的话就跟前面三篇没啥区别了,既然要深入理解,那就谈点高大上的东西. 1.要深入,先入门 首先还是得对盒模型做个简单而详细的介绍,想要跑,基础要打好~,

精通css(4)-盒模型,定位,浮动

终于到了css最重要的3个部分:盒模型,定位,浮动.先讲盒模型吧. 1.盒模型概述 页面上的每个元素都被看成一个矩形框.这个框由元素的内容.内边距.边框和外边距组成. 内边距.边框和外边距都是可选的默认为0.但是许多元素由用户代理样式表设置外边距和内边距.所以不见的一定是0. 在css中,width和height是指内容区域的宽度和高度,对边距没有影响.所以增加width/height/内容/边框/内外边距中的任何一个都会使盒子变大.值得高兴的是,IE6在混杂模式的使用的是非标准的盒模型.他的w

CSS基础:CSS2盒模型

css CSS2盒模型 CSS2中的盒模型是关系到设计中排版定位的关键,任何一个选择符都遵循盒模型规范,例如<div>.<p>.<a>--盒模型包含(外补丁)margin,(背景颜色)background-color,(背景图片)background-image,(内补丁)padding ,(内容)content,(边框)border.下图是CSS盒模型的示意图 平面示意图Flash示意模型 需要说明的是:IE5.x 和 IE 6.0在quirks模式下使用自己的错误的

JavaScript 盒模型 尺寸深入理解_基础知识

概念 引自维基百科:根据由万维网联盟(W3C)于1996年发行并于1999年修订的CSS1所指定的,当任意一个块级元素的宽度或高度被显式指定,它应当只确定这个可见元素自身(内容区)的宽度或高度,而padding, border和margin随后被应用.Internet Explorer在"怪异模式" 则把内容,内边距(padding)和边框(border)全部包括在一个指定的宽度或高度之内:这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子.如下图: 应用 理解盒模型,不管是对于

XHTML+CSS完全基础知识

XHTML+CSS   选择什么样的DOCTYPE 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE. 查看本站首页原代码,可以看到第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 打开一些符合标准的站点,例如著名web设计软件开

跨浏览器的Flexbox:CSS Flexible盒模型3

文章简介:CSS Flexible盒模型3又简称为Flexbox.摒弃我们传统上使用的一些hack和组件,Flexbox给网络的发展带来了很多正能量和兴奋济,让我们一起把复杂的网站布局变得简易和快速. 简介 CSS Flexible盒模型3又简称为Flexbox.摒弃我们传统上使用的一些hack和组件,Flexbox给网络的发展带来了很多正能量和兴奋济,让我们一起把复杂的网站布局变得简易和快速.早前在Flexbox: fast track to layout nirvana?一文中介绍了Flex