优先学

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 503|回复: 0

CSS 基础点集锦一:盒子模型、浮动、清除浮动

[复制链接]

18

主题

18

帖子

72

积分

超级版主

Rank: 8Rank: 8

积分
72
发表于 2018-6-27 17:17:22 | 显示全部楼层 |阅读模式

1、盒子模型:
示意图(图片来自w3school):



说明:上图中,由内而外依次是

        元素内容(content)

        内边矩(padding-top、padding-right、padding- bottom、padding-left)

        边框(border-top、border-right、border-bottom、border- left)

        外边距(marging-top、margin-right、margin-bottom、margin-left)。

  内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值,而且在很多情况下都要使用负值的外边距。

        元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

提示:背景应用于由内容和内边距、边框组成的区域。

        内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

[html] view plain copy
* {  
  margin: 0;  
  padding: 0;  
}  
        在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

        假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图(图片来自w3school):


[html] view plain copy
#box {  
  width: 70px;  
  margin: 10px;  
  padding: 5px;  
}  
参考:点击打开链接
拓展:CSS 内边距、CSS 边框、CSS 外边距



2、CSS精灵技术
参考:点击打开链接

案例:126邮箱

其所用图片:



3、CSS 浮动(摘自w3school)
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:



再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。



如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:       



CSS float 属性
在 CSS 中,我们通过 float 属性实现元素的浮动。
如需更多有关 float 属性的知识,请访问参考手册:CSS float 属性。

w3school拓展阅读:点击打开链接

4、CSS  清除浮动
背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
解决方法:

clear: both清除产生浮动
父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
.clearFix清除浮动(参考:点击打开链接)
[css] view plain copy
.clearFix:after {  
          content: \".\"; /*内容为“.”就是一个英文的句号而已。也可以不写。*/  
          display: block; /*加入的这个元素转换为块级元素。*/  
          clear: both; /*清除左右两边浮动。*/  
          visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/  
          line-height: 0; /*行高为0;*/  
          height: 0; /*高度为0;*/  
          font-size: 0; /*字体大小为0;*/  
      }  
  
      .clearFix {  
          *zoom: 1;  
      }  

上面的代码就是.clearFix的定义和应用,简单的说下.clearFix的原理:

在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。
在标准浏览器下,.clearFix:after这个伪类会在应用到.clearFix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。
在需要清除浮动的时候,只要写一个.clearFix就行了,然后在需要清浮动的元素中 添加clearFix类名就好了。
来源: [url=forum.php?mod=viewthread&tid=2135]CSS 基础点集锦一:盒子模型、浮动、清除浮动[/url]
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|优先学

GMT+8, 2019-9-21 19:30 , Processed in 0.047500 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表