第3课盒子模型和元素.pptVIP

盒子模型和元素;盒子模型 ;??好！既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫 “content(内容)”，而盒子的盒子壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为margin(外边距)，请看下面两图： ;这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图： ;?我们的页面就是由许许多多的盒子组成的，但是现实生活中的盒子我们会忽略外边距(margin)，但是在页面中，我们是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，我们也不要忽略它，要知道他是存在的。 ;块状元素和内联元素 ;内联元素? ?? ???内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。 做了个对比表，帮助大家理解。 ;对于上面的概念，我们用实例的方式给大家讲明白，如下 【要求】ID为div1的红色(#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度均为100像素的div2。 CSS代码如下： ;div id=div1 div id=div2/div /div;效果 ;如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在div1里放入一个链接a，内容为“可容纳内联元素和其他块状元素”颜色为白色。 ;?到这里，我们可以看到div1这个块状元素里面拥有两个元素，一个是块状元素div2，另一个是内联元素a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素” ;我们继续加条件，在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)区域块，代码如下 ;效果： ;是不是和自己事先想象的不一样，本以为蓝色会处于绿色的右侧，可是却位于下侧，如果你再加几个div4，div5同样的他们还是继续位于前一个下面，垂直 排列，这就是块状元素概念中说的“块状元素排斥其他元素与其位于同一行”说白了，就是块状元素比较霸道，谁都别想和他坐同一行，甭管你是和他有亲戚关系的 块状元素还是毫无联系的内联元素，都不行，都到下面一行待着，看看例子中，绿色方块和蓝色方块是不是各处同一行，内联元素a也别想和他处一行，但是事情 是没有绝对的，块状元素不是不允许其他元素和他处一行嘛，不是比较霸道嘛，没关系，我们还有办法，就是使用其他属性改变 ，后面会讲解到。;?到这里，我想大家对“块状元素”的概念已经比较清楚了，下面通过例子给大家继续解释“内联元素”的概念，当然还是继续加条件，加个什么条件呢，在a的后面再加一个内容为“Love CSS”的链接，所有链接的背景设置为淡橙色(#F93) ;HTML代码如下： ;效果: ;两个链接a是不是处于同一行(不要忘记a是内联元素)，这就解释了概念上说的“内联元素允许其他内联元素与其位于同一行”，为什么不说“内联元素允许其他 元素??其位于同一行”，因为其他元素包括两种元素，内联元素和块状元素，它如果和内联元素在一块那就肯定在一行了，如果和块状元素在一块，即使它同意，他 后面的块状元素也不同意，块状元素会另起一行位于它的下一行。? ?? ?我们继续添加条件，现在大家给内联元素a在css中加上宽度和高度，比如:width:100px;height:50px;，看看有什么变化 ;CSS代码: ;a { color:#fff; background:#F93; width:100px; height:50px; display:block; };为什么两个a不处于同一行了呢，那是因为这两个内联元素a都被转化成了块状元素，既然成功转化为块状元素，就应该具有块状元素最显著的一个特点，不允许其他元素与他同一行，所以这两个a垂直排列? ?? ?那有没有办法让他们处于同一行？当然有啦，后面课程会告诉大家 ? ?? ?好了，到这里，大家通过实例对内联元素的概念理解的也应该很透彻了，后面就列出所有的内联元素和块状元素，方便以后大家查阅，这里说的是“查阅”，不是 让大家记住，常用的块状元素和内联元素，就那么几个，多练习