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中不起做用