文档章节

css高级教程第二章-----可视化模型

Q_z
 Q_z
发布于 2014/02/03 11:46
字数 932
阅读 106
收藏 6

      这几天回了躺家,所以一直没有看书。今天刚刚把第二章看完,把一些重点东西罗列了出来   

2.1框模型概述:
 页面上的每个元素被看做一个矩形框,这个框有元素的内容、填充、边框、空白边组成

 css中 width和height指的是内容区域的高度和宽度,。
  (增加填充、边框、空白边、不会影响内容区域的尺寸),会增加的(框)的总尺寸、


  2.1.1  ie/win和框模型
  第九章详细解释


  2.1.2空白边(margin)叠加

  当两个垂直的空白边相遇时,他们将形成一个空白边,空白边的高度等于两个发生叠加的空白边的高度中的较大者。

  空白边的叠加的几种情况


  一、当一个元素出现在另一个元素的上面时,第一个元素的底空白边与第二个元素的顶空白边发声叠加
  二、当一个元素包含在另外一个元素中时(如果没有padding和border分隔开),他们的顶或底空白边也会发生叠加

空白边的叠加只有在普通的文档流中(块框)垂直的空白边才会发生空白边的叠加,行内框、浮动框、绝对定位框之间的空白边不会叠加


-----------丑陋的风格线----------------------
定位概述


css中有三种基本的定位机制:普通流,浮动和绝对定位

匿名块框:大多的数的框都需要的显式定义的元素形成,但是,在一种情况下即使没有进行显式的声明元素也会创建块框,这种情况发生在将一些文本添加到一个块级元素的开头时

 

定位的意义:
 相对定位是"相对于"元素在文档流中的初始位置,而绝对定位是"相对于"最近的已定位祖先元素,如果不存在定位的祖先元素,那么是最初的包含块


 绝对定位脱离了文档流,可以通过z-index属性来控制这些框的堆放次序;

 

 固定定位:我们能够创建总是出现在窗口中相同位置的浮动元素

  bug:ie6或更低版本的ie不支持固定定位

 


------------------------淡淡的忧伤------------------------------------

2.2.4 浮动

 

浮动框不在普通的文档流中,不占据空间

包含块太窄,无法容纳水平排列的三个浮动元素,那么其他浮动块向下移动,直到有足够空间的地方官


2.浮动元素高度的不同,向下移动有可能会被其他的浮动的元素卡住


3.创建浮动框是文本可以围绕图像

浮动的清理

 1.浮动元素脱离了文档流,不会影响周围的元素。
 2.对元素进行清理实际上为前面的浮动元素留出了垂直的空间


可以使用css生成的内容对浮动进行清理

  注意:1.需要指定进行清理的元素的应该出现在哪里,
    2.需要添加一个类名

   可以使用伪类after伪类和内容声明在指定的现有内容的末尾添加新的内容

   demo:<!doctype html>
     <html lang="en">
      <head>
       <meta charset="UTF-8">
       <meta name="Generator" content="EditPlus®">
       <meta name="Author" content="">
       <meta name="Keywords" content="">
       <meta name="Description" content="">
       <title>Document</title>
       <style type="text/css">
       .news{
         background-color: gray;
         border:solid 1px black;

       }
       .news img{
         float: left;
       }
       .news p{
         float: right;
       }
         .clear:after{
         content: ".";
         height: 0;
         visibility: hidden;
         display: block;
         clear: both;
           }


       </style>
      </head>
      <body>
        

     <div class='news clear'>
       <img src="12.png">
      <p>some text</p>
     </div>
      </body>
     </html>
      

  这个方法在ie6中不起作用

 

 

 

 

 

© 著作权归作者所有

Q_z

Q_z

粉丝 18
博文 17
码字总数 14466
作品 0
成都
程序员
私信 提问
ApacheCN 人工智能知识树 v1.0

Special Sponsors 贡献者:飞龙 版本:v1.0 最近总是有人问我,把 ApacheCN 这些资料看完一遍要用多长时间,如果你一本书一本书看的话,的确要用很长时间。但我觉得这是非常麻烦的,因为每本...

ApacheCN_飞龙
05/18
0
0
knockout2.0系列教程汇总

本文档对knockout2.x的基本使用方法做了讲解,虽然不是十分全面,但也几乎涵盖了knockout2.x的知识(除了高级用法、自定义绑定) 高级应用 分享到:

zuolz1985
2013/05/11
0
0
前端学习书籍

前端学习书籍 Css 1、CSS时尚编程百例 【内容介绍】 CSS时尚编程百例》超级不错的一本学习CSS的书籍,全部以实例为主讲解如何使用CSS语法、滤镜、高级功能等,百例主要包括最常用的CSS菜单特...

MyDear宸
2017/05/11
0
0
如何学习Javascript?你是入门,还是精通?

首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门。   谈不上经验,都是一些教训。   这个时候有人要说,“靠,你丫半桶水,凭啥教我们”。您先别急着骂,先听我说。...

coffeescript
2014/07/23
525
0
PyTorch 官方中文教程包含 60 分钟快速入门教程,强化教程

PyTorch 是一个基于 Torch 的 Python 开源机器学习库,用于自然语言处理等应用程序。它主要由 d 的人工智能小组开发,不仅能够 实现强大的 GPU 加速,同时还支持动态神经网络,这一点是现在很...

磐创AI_聊天机器人
08/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

矩阵中的路径

判断在一个矩阵中是否存在一条包含某字符串所有字符的路径。路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向上下左右移动一个格子。如果一条路径经过了矩阵中的某一个格子,则该路...

Garphy
19分钟前
4
0
Hibernate 5 Maven 仓库的 Artifacts

Hibernate artifacts 官方发布的仓库在 JBoss Maven repository 中。Hibernate 发布的 artifacts 也会同时同步到 Maven Central 仓库中,这是一个自动同步进程(可能会有一些延迟)。 Hibern...

honeymoose
今天
5
0
如何学习uni-app?

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序、H5等多个平台,保证其正确运行并达到优秀体验。 <templ...

达叔小生
今天
6
0
OSChina 周一乱弹 —— 后来马云就一心想挣钱了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑:《空帆船》- 朴树 《空帆船》- 朴树 手机党少年们想听歌,请使劲儿戳(这里) @webw :第二次被锁在电梯里了 上次你忘带电梯卡, ...

小小编辑
今天
1K
15
关于does not give a valid preprocessing token

#define VFUNC(self) ((##self##)->_vptr) 这样在gcc下会编译失败, VC不会 报pasting ) does not give a valid preprocessing token 据说是因为版本问题 解法:去掉## define VFUNC(self) (......

shzwork
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部