前端常見問題(一) - CSS

【CSS】

談談盒子模型（標準和IE）
- 標準盒子模型寬 = content寬
- IE盒子模型寬 = content寬 + padding + border
```
div {
    margin: 10px;
    border: 1px solid red;
    padding: 5px;
    width: 50px;
    height: 30px;
    background: pink;
  }
複製程式碼
```
- 標準盒子模型：(content的寬 = width = 50px)
- ie盒子模型：(content的寬 = width - padding * 2 - border * 2 = 38px)

position值:

屬性值	描述
static	預設值。沒有定位，元素出現在正常的流中（top, bottom, left, right，z-index 無效）。
inherit	規定應該從父元素繼承 position 屬性的值。
relative	生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 left 位置新增 20 畫素。
absolute	生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。(通過 top、right、bottom、left、z-index定位)
fixed	生成絕對定位的元素，相對於瀏覽器視窗進行定位。(通過 top、right、bottom、left、z-index定位)

上下、左右居中一個元素，適用於任何場景
- 示例
樣式匯入時，使用link和@import的異同？
- 相同點：都是從外部引用css
- 區別1：link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS
- 區別2： link引用css時，在頁面載同時載入；@import需要頁面完全載入後載入
- 區別3：link是XHTML標籤，無相容性問題；@import 是CSS2.1提出的，低版本的瀏覽器不支援
- 區別4: link支援使用Js控制DOM修改樣式；@import不支援：

設定元素字型為8px

  font-size: 16px;
  transform: scale(0.5);
  transform-origin: 0 0;
複製程式碼

css scripts:
- 其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的background-image, baackground-repeat, background-position 的組合進行背景定位。

怎麼用css畫一個三角形

示例

html

  <div class="triangle1"></div>
複製程式碼

css

  div {
    width: 0;
    height: 0;
  }
  .triangle1 {
    border-top: 100px solid red;
    border-right: 100px solid blue;
    border-bottom: 100px solid goldenrod;
    border-left: 100px solid pink;
  }
複製程式碼

怎樣實現一個盒子裡兩個div,左邊固定寬度，右邊自適應寬度

示例

html

  <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
  </div>
複製程式碼

css

 // 通用的
 .parent {
    width: 100%;
    height: 100px;
  }
  .left {
    width: 100px;
    background: pink;
    height: 100%;
  }
  .right {
    background: palegreen;
    height: 100%;
  }

  /* 法1 左邊浮動 */
  .left {
    float: left;
  }

  /* 法2 左邊絕對定位 */
  .parent {
    position: relative;
  }
  .left {
    position: absolute;
  }
  .right {
    width: calc(100% - 100px);
    margin-left: 100px;
  }

  /* 法3 右邊絕對定位 */
  .parent {
    position: relative;
  }
  .right {
    position: absolute;
    width: calc(100% - 100px);
    left: 100px;
    top: 0;
  }
複製程式碼

前端常見問題(一) - CSS

相關文章