• 盒子模型

對于現代瀏覽器來說，css中指定的width就是content width。

對于IE5.x和6來說，在怪異模式中width等于content、左右padding和左右border。

其中padding和margin的4種寫法。

1、上 右 下 左

padding:10px 5px 15px 20px;

2、上 右左 下

padding:10px 5px 15px;

3、上下 右左

padding:10px 5px;

4、四邊一致

padding:10px;

• display和position介紹

  • display規定元素應該生成的框的類型。
  值描述

  flex	設置彈性容器
  block	此元素將顯示為塊級元素，此元素前后會帶有換行符。
  inline	默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
  inline-block	行內塊元素。（CSS2.1 新增的值）
  none	此元素不會被顯示。
  list-item	此元素會作為列表顯示。

  • position: 指定一個元素在文檔中的定位方式，top，right，bottom和?left?屬性則決定了該元素的最終位置。
  值描述

  absolute	生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
  fixed	生成絕對定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
  relative	生成相對定位的元素，相對于其正常位置進行定位。 因此，"left:20" 會向元素的 left 位置添加 20 像素。
  static	默認值。沒有定位，元素出現在正常的流中 （忽略 top, bottom, left, right 或者 z-index 聲明）。
  inherit	規定應該從父元素繼承 position 屬性的值。

• CSS選擇器分類

  不同級別：排序：!important > 行內樣式 > ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性。

  同一級別：后寫的會覆蓋先寫的。

• em和strong的區別

  • em（emphasize）強調，表示語義上的強調，默認為斜體
  • strong著重，表示重要性的一種強調，strong是比em更強烈的強調，默認為粗體

• 使元素消失的方法

  • opacity：0：該元素隱藏起來，但不會改變頁面布局，如果該元素綁定了事件會觸發。
  • visibility:hidden：該元素隱藏起來，但不會改變頁面布局，不會觸發該元素已經綁定的事件。
  • display:node：把元素隱藏起來，并且會改變頁面布局，可以理解成在頁面中把該元素刪掉。

• 如何畫一個三角形

  左右邊框設置為透明，長度為底部邊框的一半。左右邊框長度必須設置，不設置則只有底部一條邊框，是不能展示的。

  .child{width: 0;height: 0;border-bottom: 100px solid cyan;border-left: 50px solid transparent;border-right: 50px solid transparent; }

• 浮動相關

  • 為什么要清除浮動

    主要是為了解決父元素高度坍陷問題。

    一個塊級元素如果沒有設置height,其height由子元素撐開，對子元素使用了浮動之后，子元素就會脫離文檔流。那么父元素中沒有內容撐開其高度，這樣父元素的height就會被忽略。

  • 如何清除

    1、父元素設置overflow: hidden(少用)2、clearfix：使用內容生成的方式清除浮動，不會破壞文檔流。.clearfix: after { // :after選擇器向選定的元素之后插入內容content:""; // 生成內容為空display: block; // 塊級元素顯示clear:both; // 清除前面元素}

• 行內元素居中

  .parent {text-align: center }

• DIV居中問題

  1、使用flex

  .parent {height: 600px;border: 1px solid red;display: flex; justify-content: center;align-items: center; } .child {border: 1px solid green;width: 300px; }

  2、使用transform

  .parent{height: 600px;border: 1px solid red;position: relative; } .child{border: 1px solid green;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); }

  3、使用margin-top -一半的高度

  .parent{height: 600px;border: 1px solid red;position: relative; } .child{border: 1px solid green;width: 300px;height: 100px;position: absolute;top: 50%;left: 50%;margin-left: -150px;margin-top: -50px; }

  4、使用絕對布局absolute和margin:auto

  .parent{height: 600px;border: 1px solid red;position: relative; } .child{border: 1px solid green;position: absolute;width: 300px;height: 200px;margin: auto;top: 0;bottom: 0;left: 0;right: 0; }

• 三欄布局

  要求兩邊兩欄寬度固定，中間欄寬度自適應

  • 方案一：position絕對定位法

    center的div需要放到后面，將左右兩邊使用absolute定位，因為絕對定位使其脫離文檔流，最后面的center會顯示在正常文檔流中，然后設置margin屬性，留出左右兩邊的寬度。

    .parent {border: 1px solid red;position: relative; }.child_left {width: 100px;height: 100px;border: 1px solid gray;position: absolute; }.child_right {width: 100px;height: 100px;border: 1px solid green;position: absolute;right: 0; }// div在html中必須放在left和right之后 .child_center {width: 100px;height: 100px;border: 1px solid black;margin: auto }

  • 方案二：float 自身浮動法

    center的div需要放到后面，對左右使用float:left和float：right，float使左右兩個元素脫離文檔流，中間的正常文檔流中，然后設置margin屬性，留出左右兩邊的寬度。

    .parent {border: 1px solid red;position: relative; }.child_left {width: 100px;height: 100px;border: 1px solid gray;float: left; }.child_right {width: 100px;height: 100px;border: 1px solid green;float: right; }.child_center {width: 100px;height: 100px;border: 1px solid black;margin: auto }

• 介紹BFC

  BFC是CSS布局的一個概念，是一塊獨立的渲染區域，是一個環境，里面的元素不會影響到外部的元素 。

  • 如何生成BFC：（即脫離文檔流）

    • 1、根元素，即HTML元素（最大的一個BFC）
      2、float的值不為none
      3、position的值為absolute或fixed
      4、overflow的值不為visible（默認值。內容不會被修剪，會呈現在元素框之外）
    • 5、display的值為inline-block、table-cell、table-caption

  • BFC布局規則：

    • 1.內部的Box會在垂直方向，一個接一個地放置。

      2.屬于同一個BFC的兩個相鄰的Box的margin會發生重疊

      3.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此, 文字環繞效果，設置float

      4.BFC的區域不會與float box重疊。

    • 5.計算BFC的高度，浮動元素也參與計算

  • BFC作用：

    • 1.自適應兩欄布局
      2.可以阻止元素被浮動元素覆蓋
      3.可以包含浮動元素---清除內部浮動 原理：觸發父div的BFC屬性，使下面的子div都處在父div的同一個BFC區域之內
    • 4.分屬于不同的BFC時，可以阻止margin重疊

• CSS3特性?vh和vw

  • vh?相對于視窗的高度，視窗高度是100vh
  • vw?相對于視窗的寬度，視窗寬度是100vw

  這里是視窗指的是瀏覽器內部的可視區域大小，即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。

  • 可以通過**@supports**來判斷是否支持某個css屬性。
  @supports (property: value){element {property: value;} }// 例 @supports (display: flex){.flex {display: flex;float: none;} }

總結

以上是生活随笔為你收集整理的HTML和CSS常见问题整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。