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

时间 2019-11-09

标签 css 高级教程第二可视化模型栏目 CSS 繁體版

原文原文链接

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

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

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

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

2.1.2空白边（margin）叠加文档

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

空白边的叠加的几种状况 io

1、当一个元素出如今另外一个元素的上面时，第一个元素的底空白边与第二个元素的顶空白边发声叠加
2、当一个元素包含在另一个元素中时（若是没有padding和border分隔开），他们的顶或底空白边也会发生叠加 class

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

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

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>

这个方法在ie6中不起做用