關於CSS的那些事

CSS簡介

想要製做出好看又高大上的網頁，除了編寫好HTML文件外，CSS的編寫也必不可少。CSS的英文全稱是Cascading Style Sheets，即層疊樣式表。CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。下面我來介紹一些關於CSS的小技巧。

---

什麼是文檔流？

文檔流的英文是 Normal Flow，其含義爲文檔內元素的流動方向，簡單來講就是內聯元素從左往右，塊級元素從上往下流動。文檔流中內聯元素默認從左到右排列，寬度不夠則自動換行；而文檔流中塊級元素從上到下排列，每一個元素佔一行。其中，float:left、position:absolute、position: fixed 能夠使元素脫離文檔流。

---

內聯元素

給 inline 元素設置寬高是沒有任何效果的，可是爲其設置 margin、padding都是有效果的。

---

div高度由什麼決定？

div高度由其內部文檔流元素高度總和決定，一旦元素脫離了文檔流就再也不計入div高度中。

---

content-box 與 border-box 的區別是什麼？

border-box 的 width 包括 padding 和 border，而content-box 正好與之相反，其width 不包括 padding 和 border。

---

關於背景圖片的那些小技巧

1 背景圖片太大沒辦法居中顯示怎麼辦？

background-position:center center;

2 想完整顯示圖片如何按比例縮放？

background-size:cover;

3 想要在頁面上顯示兩個空格，應該怎麼寫代碼？
在代碼裏寫    才行。

---

如何作橫向佈局？

當咱們想要讓某些元素作橫向佈局時，咱們均可以用如下套路來實現：

1. 給全部想要在一行內的子元素加上float: left;屬性

2. 給全部父元素加上 clearfix 類
   其中 clearfix 類爲：

   .clearfix::after{
        content: '';
        display: block;
        clear: both;
     }

---

CSS畫三角形

下面咱們將利用純css來畫一個三角形:

div{
    border: 10px solid transparent;
    width: 0px;
    border-left-color: #e6686a;
    border-top-width: 0px;
}