CSS筆記2(簡化版)

2021-10-11 07:24:15 字數 2946 閱讀 7517

list-style: none;
(後可跟4個值:左上 右上 右下 左下)(兩個值的話則是對角線關係)

border-radius: 10px;(可以設定為50%)

border-top-left-radius(左上角)

box-shadow:h-shadow v-shadow blur(虛實) spread(大小) color inset;(前兩個必需)
text-shadow:h-shadow v-shadow blur(虛實) color ;(前兩個必需)
本質:用css擺放盒子

方式(pc端):普通流(標準流)→(最基本) 浮動 定位

選擇器
1.脫離標準偶同流的控制 移動到指定位置

2.浮動的盒子不再保留原先的位置

7.2如果給多個盒子新增了浮動,則盒子都會在一行頂端對齊

7.3浮動的元素具有行內塊的特性,

可以設定寬高,不需要轉換為行內塊

如不設定寬度,則寬度根據內容決定

浮動的盒子不會影響前面的標準流,只會影響後面的標準流

選擇器

方法:

1.額外標籤法(隔牆法)(在末尾新增乙個(塊級元素)空標籤)

2.給父級元素新增overflow 屬性值為hidden auto scroll

3.給父級元素新增:after偽元素(額外標籤法的公升級)

.clearfix:after  

.clearfix

4.給父元素新增雙偽元素

.clearfix:before,.clearfix:after 

.clearfix:after

.clearfix

定位=定位模式+邊偏移

定位模式:用於指定乙個元素在文件中的定位模式

position:static   relative   absolute  fixed
邊偏移:決定了該元素的最終位置(與父元素距離)

top :80px 頂端偏移量

bottom:80px 底部偏移量

left:80px 左側偏移量

right:80px 右側偏移量

9.1靜態定位:static

無定位的意思,沒有邊偏移,很少用

選擇器9.2相對定位:relative

相對於他原來的位置來說的

選擇器特徵:移動位置參照與自己原來的位置

原來的標準流位置依舊保留(不脫標)不會被後面的盒子占用

9.3絕對定位:absolute

移動位置時,相對於他的祖先元素來說的

選擇器特徵:1.當沒有祖先元素的時候,按照瀏覽器為準進行定位

2.當其父元素沒有定位的時候,按照瀏覽器為準進行定位

3.若祖先元素有定位(不包括靜態定位),則按照最近一級有定位的祖先元素為參考點

4.絕對定位不占用(不保留)原先的位置,被後面元素占用。(脫標)

子元素用絕對定位,則父元素必須要用相對定位(子絕父相)

(因為絕對定位不占用原來的位置,父元素不使用相對的定位的話,其他盒子會占用位置)

9.4固定定位:fixed

固定於瀏覽器可視區的位置,頁面滾動時位置不會變化

選擇器特徵:**1.**以瀏覽器的可視窗體為參照來移動

和父元素沒有任何關係

不以瀏覽器的滾動而滾動

2.不占用原來的位置(脫離標準流)

9.4.1固定到內容板塊的右側位置:

1.讓固定定位的盒子left:50%,走到瀏覽器可視區左右的中心

2.讓固定盒子的margin-left:內容板塊寬度的一半距離。

9.5粘性定位 sticky(相容性比較差)

選擇器特點:1.以瀏覽器的可是視窗為參照點移動元素

2.占用原先的位置

3.必須新增邊偏移的其中乙個

選擇器值越大,越靠上
1.讓固定定位的盒子left(top):50%,父容器寬度(高度)的一半

2.margin-left(top):-負值(自己盒子寬度的一半)

1.行內元素新增了固定或絕對定位,可以設定高度和寬度。

2.如果是塊元素新增了固定或絕對定位,且不給設定高和寬,預設是內容的高寬

3.脫離標準流的盒子不會觸發盒子的塌陷問題

4.定位會壓住標準流的文字,浮動則不會壓住。

13.元素的顯示與隱藏:

1.display:none 隱藏物件(不保留原有位置)

display:block 除了轉換為塊級元素,還有 顯示元素的作用

2.visiblity:hidden(保留原有位置)隱藏元素

visiblity:visible 顯示元素

3.overflow :visible 可見

overflow: auto 在需要的時候新增滾動條

overflow: hidden 溢位的部分隱藏起來

overflow :scroll 溢位部分顯示滾動條

CSS樣式表筆記1(簡化版)

1.css規則構成 選擇器和宣告 一條或多條 2.標籤選擇器 標籤名3.類選擇器 樣式點定義,結構類 class 呼叫,乙個或多個,開發最常用 類名4.id選擇器 樣式 定義,結構id呼叫,只能呼叫一次,別人切勿使用 id名 5.萬用字元選擇器 不需要呼叫,給所有元素使用樣式 6.font的復合屬性...

報表製作簡化版

機房收費系統無論是重構還是第一版,都用到了報表,為什麼在乙個系統中要新增報表呢?報表的作用是什麼呢?報表百科。我理解的報表是 向上級報告情況的乙個媒介,沒有固定的格式。之前在專案中,我們真正給企業做過一次報表,是以匯出word的形式生成的,大概格式如圖 這次在自己的 機房收費系統 中設計報表,我使用...

飛機大戰 簡化版

import pygame from pygame.locals import import random import time class herobullet def init self,x,y,windows self.x x self.y y self.windows windows se...