css：使用筆記(不斷更新中...)

時間 2019-11-20

標籤 css 使用筆記不斷更新欄目 CSS 简体版

原文原文鏈接

1，inline-block

Inline :1是不支持寬高的 2 在一行內顯示 span 啥的~
Block:1,佔一行 2支持寬高
可是img由於在一行並排顯示，咱們歸爲行(內嵌)元素，但支持設置寬高就是inline-block 。
本質inline-block :行內的塊：
一特性，行並排顯示，2，並支持寬高設定3，內容撐開寬度。只是寬度
一問題1，多個inline的標籤之間有間隙，寬度爲字體（哪一個字體？）大小的一半，設置字體16 間隙爲8 20--10
解決：解決方案1 doyue解決方案2
一問題2，IE6 7不支持塊元素的設置inline-block，塊元素設置以後，依然佔據一行。但支持行元素設置css

IE6,7支持inline元素轉換成inline-block，但不支持block元素轉換成inline-block，
因此非inline元素在IE6,7下要轉換成inline-block，需先轉換成inline，而後觸發hasLayout，以此來得到和inline-block相似的效果；你能夠這樣：

全兼容的inline-block：
div {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

2，鼠標指針：

1，Gif png 兼容性有問題。使用.cur 文件
2，pionter,當前面的圖片不現實的時候，顯示的
html

3，textarea的寬度不能，高度能夠調整。

textarea{ resize: vertical; }

4,網頁重排

加載一個頁面讀取，在向下滾動時，內容看似「上下跳動」，這就是網頁重排。
這是由於瀏覽器不知道圖像的尺寸，不能保留空間爲它。所以，當圖像被加載，它必須將其插入到頁面中，並把它下面和右面的東西移走，作一個重排。
解決此問題的一個先決條件是，要知道圖片的高寬。
http://www.webkaka.com/blog/archives/responsive-images-how-to-prevent-reflow.htmlweb

5,塊元素內容（p）不能自動換行

<article class="section02-eng">English，EnglishEnglishEng，lishEnglis中文hEnglishEnglishEnglishE，nglishEnglish，EnglishEnglishEnglishEnglishEngli，shEnglishEnglishEngl，ishEnglishEnglishEnglishEnglishEnglishEngliv，mshEnglishEnglishEnglishEnglishEng，lishEnglishEnglishEnglishEng，lishEnglishEnglishEnglish</article>

你換成中文就自動換行了，連續的英文被識別成一個單詞，因此只會撐開。瀏覽器

word-wrap: break-word;

6,`內層div負外邊距`，能夠抵消`外層div的padding`

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .divout{
      width:300px;
      height:300px;
      background:skyblue;
      border:10px solid lightgreen;  
      padding-left:100px;/**/
    }
    .divinner{
      width:100px;
      height:100px;
      background:skyblue;
      border:10px solid red;  
      margin-left:-100px;
    }
  </style>
</head>
<body>
<div class="divout">
  <div class="divinner">
    22222
  </div>
</div>
</body>
</html>