css學習筆記（一）

dadong 發布于2019-08-29 15:41 / 1713人閱讀

摘要：元素的高度文檔流文檔內元素流動的方向叫做文檔流。塊級元素高度一個元素的高寬度是由其內容決定的，不到萬不得已的時候一般不要設置寬高，塊級元素高度是由其內部文檔流高度總和決定的，并不一定是等于，只是決定，例如設置字體是，但是它的元素高度卻不是。

position定位

CSS position屬性用于指定一個元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。

定位類型

定位元素（positioned element）是其計算后位置屬性為 relative, absolute, fixed 或 sticky 的一個元素。

相對定位元素（relatively positioned element）是計算后位置屬性為 relative 的元素。

絕對定位元素（absolutely positioned element）是計算后位置屬性為 absolute 或 fixed 的元素。

粘性定位元素（stickily positioned element）是計算后位置屬性為 sticky 的元素。

大多數情況下，height和width 被設定為auto的絕對定位元素，按其內容大小調整尺寸。但是，被絕對定位的元素可以通過指定top和bottom ，保留height未指定（即auto），來填充可用的垂直空間。它們同樣可以通過指定left 和 right并將width 指定為auto來填充可用的水平空間。

除了剛剛描述的情況（絕對定位元素填充可用空間）：

如果top和bottom都被指定（技術上，而不是auto），top 勝出。

如果指定了left 和right兩側，則在direction為ltr（英語，水平日語等）時left 贏，并且在direction為rtl時right贏（阿拉伯文，希伯來文等）。

語法

position 屬性被指定為從下面的值列表中選擇的單個關鍵字。

取值

static
該關鍵字指定元素使用正常的布局行為，即元素在文檔常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。

relative
該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。

absolute
不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。

fixed
不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。

實例

position: fixed;相對于屏幕定位

.topNavBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}/*相對于屏幕左上角固定

絕對定位，在子元素寫position: absolute;在父元素寫position: relative;

.userCard .welcome {
    display: inline-block;
    position: relative;
}

.userCard .welcome .triangle {
    display: block;
    position: absolute;
    top: 100%;
    left: 4px;
}/*緊貼父元素下方，在父元素從左往右4px邊距

簡單的幾種居中

這只是暫時用到的居中方法，在后面會專門更新一篇居中

讓 .xxx 子代中的內聯元素居中

.xxx {text-align: center;}

div子標簽水平居中

div{
  margin-left:auto;
  margin-right:auto;
}

div高度為30px，div標簽內大小為14px字垂直居中

div{
  font-size: 14px; 
  line-height: 30px;
}

或

div{
  font-size: 14px; 
  line-height: 24px; 
  padding: 3px 0;
}

行高等于高度，或者行高加上padding等于高度，就可以使div內文字垂直居中，但是僅限于在font-size比較小的時候可以用line-height來控制內聯元素所占的高度，太大就會容易出bug，如果需要一個特定的高度，可以在那基礎上添加padding來增加。

元素的高度 文檔流

文檔內元素流動的方向叫做文檔流。

內聯元素從左往右流動，如果寬度不夠就會另起一行，漢字的話一句話有可能會從中間，但是如果是英文，css如果沒有聲明 word-break: break-all; 英文是不會換行的。

塊級元素是從上往下流動，每個塊占一行。

塊級元素高度

一個元素的高寬度是由其內容決定的，不到萬不得已的時候一般不要設置寬高，塊級元素高度是由其內部文檔流高度總和決定的，并不一定是等于，只是決定，例如設置字體是100px，但是它的元素高度卻不是100px。

內聯元素的高度

給內聯元素設置寬高是無效的，設置 margin-top margin-bottom 也是無效的，內聯元素的高度也是由文檔流內部元素決定，居中對齊是由基線對齊的，而且由于瀏覽器會給不同字體一個建議的行高，這個內聯元素的行高就是綜合建議行高和其他相關設計來決定的。

零散知識點

背景圖片居中：background-position: center center;

背景圖片按比例縮放：background-size: cover;

設置寬度可以設置最大寬度，這樣如果屏幕變小就可以自適應。

設置display:inline block;后，外邊距margin不會合并。

想要并排，先在子元素float:left;然后在所有子元素的父元素上設置clearfix，后加上偽類。

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

做半透層背景：background-color: rgba(0,0,0,0.8);/不要顏色（黑色），半透層背景/

GPU云服務器云服務器學習筆記一學習筆記基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113481.html

CSS Variables學習筆記

摘要：注本文首發于個人博客學習筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學習筆記。使用自定義屬性來設置變量名，并使用特定的來訪問。二學習筆記聲明調用聲明方式變量聲明的方式非常簡單，如下，聲明了一個名叫的變量。注：本文首發于個人博客《CSS Variables學習筆記》。最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學習筆記。 ...

mudiyouyou 2019-08-29 15:11 評論0 收藏0
重學前端學習筆記（十）--CSS語法關于帶@的規則

摘要：指普通的規則，由選擇器和屬性指定構成的規則。用于跟命名空間配合的一個規則，表示內部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續的兩個中劃線開頭，否則會被認為是變量。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有...

codeKK 2019-08-02 16:16 評論0 收藏0
重學前端學習筆記（十）--CSS語法關于帶@的規則

摘要：指普通的規則，由選擇器和屬性指定構成的規則。用于跟命名空間配合的一個規則，表示內部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續的兩個中劃線開頭，否則會被認為是變量。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有...

SolomonXie 2019-08-26 13:43 評論0 收藏0
重學前端學習筆記（十）--CSS語法關于帶@的規則

摘要：指普通的規則，由選擇器和屬性指定構成的規則。用于跟命名空間配合的一個規則，表示內部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續的兩個中劃線開頭，否則會被認為是變量。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有...

HollisChuang 2019-08-30 10:50 評論0 收藏0
SCSS學習筆記（一）

摘要：的由來就是加強版的，要講那就一定要從講起英文全稱是一個最初由設計并由開發的層疊樣式表語言。年發行，年版本穩定，設計和開發分開進行，讓這個語言的功能相當完善。變量允許使用變量，所有變量以開頭。 SCSS的由來 SCSS就是加強版的CSS，要講SCSS那就一定要從SASS講起 SASS Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Ha...

simpleapples 2019-08-29 16:37 評論0 收藏0