前端知識--CSS常用篇總結

CSS （層疊樣式表）

• 概念
  • 層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
  • CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

總結：css 就是網頁中元素展現的一種格式/樣式

CSS 佈局

尺寸顯示輪廓屬性

• width:設置元素的寬度
• height:設置元素的高度

顯示屬性

• display:
  • none 不顯示
  • block 塊級顯示
  • inline 行級顯示
  • flex 彈性佈局
    • https://www.cnblogs.com/likun123/p/9518466.html
• border:
  • 繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
  • 常用屬性：
    outline-style:solid(實線)/dotted(虛線)/dashed(虛線，虛線的每段較長)/double(框爲空心);
  • 設置輪廓的樣式
    outline-color:red;設置輪廓的顏色
    outline-width:10px設置輪廓的寬度

盒子模型的作用：理解css+div 定位和佈局

浮動

• 屬性 float

屬性名	說明
left	左浮動
right	右浮動
clear	清楚周圍的浮動
none	:默認值，不浮動

• 對clear屬性進行說明

屬性名	說明
left	清楚左浮動
right	清楚右浮動
all	清楚兩邊的浮動
none	:默認值，不浮動

• 效果圖
  
• 弊端
  • 設置的位置會根據瀏覽器大小改變

margin和padding

margin \padding 順序

margin/pading	等效
margin：10px	margin-top,-right,-bottom,-left-：10px
margin:10px,20px	[margin-top,-bottom:10px] [margin:-left,-right：10px]
margin:10 px,20px,30px	margin-top:10px -left,-rigt:20px, -bottom:30px
margin:10px,20px,30px,40px	margin-top:10px ,-rigt:20px, -bottom:30px-left:40px

• 按照順時針
  

定位屬性

• 常見屬性：相對定位(relative)，絕對定位(absolute)，固定定位(fixed)

相對定位(relative)

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留

• 示意圖
  

• 絕對定位(absolute)

  • 元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框.

• https://blog.csdn.net/dkr380205984/article/details/84836375

• 示意圖
  * 4.6.3 固定定位(fixed)

  ​ 元素框的表現類似於將 position 設置爲 absolute，不過其包含塊是視窗本身。

CSS 優先級

內聯樣式表 >內部樣式表|外部樣式表 (優先級和書寫的順序有關，後書寫的優先級別高)