5.29
複習css
css層疊樣式表 修飾網頁的
css的語法
1.行內樣式的語法
2.內部樣式表和外部樣式表的語法
css的使用方式
1.行內樣式
2.內部樣式表
3.外部樣式表
4.外部匯入樣式
css選擇器
id選擇器
class選擇器
標籤選擇器
組合選擇器
子代選擇器
後代選擇器
通用選擇器
偽類選擇器 :hover滑鼠懸浮上去的樣式
css樣式的優先順序
1.根據權重來確定
2.如果權重相同，就近原則（後定義原則）
權重：僅僅只是乙個參考的值，並沒有實際的含義
內聯 1000
id 100
class 10
偽類 10
標籤 1
通用 0
!important 只要出現就以這個為主
注意：計算權重的時候不需要去管子代、後代。直接加起來就ok
顏色的三種表示方法
1.顏色英文單詞
2.16進製制
3.rgb 擴充套件 rgba
文字類樣式
color
line-height 得確定裡面有幾行
text-align 字型對齊
text-decoration 下劃線
font-style 字型傾斜
font-family 字型樣式 如宋體、楷體
font-weight 字型加粗
font-size 字型大小
/在瀏覽器中，預設字型大小16px
谷歌瀏覽器預設字型大小12px
火狐沒有限制
元素的顯示方式
display
inline 行內元素
inline-block 行內塊
block 塊級
none 隱藏/無
元素的隱藏
visibility:hidden
輪廓主要用在input標籤中，只需要清空即可
列表list-style：none 即可
滑鼠的樣式
cursor
透明度opacity: 0.1; 取值：0-1之間 可以為0和1 0表示全透，1表示全不透
rgba(255,0,0,0.1)
面試題visibility:hidden 和 display:none 的區別？
1.visibility要占用域的空間，而display則不占用
2.visibility：hidden 隱藏某元素時在頁面上保留改元素的空間
display:none隱藏某元素的同時也讓其他內容填充空白
3.display:none是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素；
visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文件流中佔位，
瀏覽器會解析該元素；
opacity和rgba的區別？
opacity 子元素顏色會被影響，即變相的被繼承。就是使用opacity的時候隱藏的地方背景
也會被隱藏有一些影響，表示整個元素。而rgba不會，它會全部遮蓋住，只會表示背景顏色
1.css背景類樣式
background-color 背景顏色
background-image 背景
background-repeat 背景的重複
repeat-y 只允許在y軸重複
repeat-x 只允許在x軸重複
no-repeat 不重複，只顯示一次
background-position 背景的定位
取值： 兩個，分別表示x和y方向。如果只寫乙個，則兩個值相等
例如：京東、** 五星好評
雪碧圖： 各個小圖示的集合，使用的目的是減少http的請求
background 是把上面所有的全部合在一起
background : color image repeat position
background-size 背景的大小
css布局的一種方式
定位 top,left,right,bottom 只有元素增加定位的情況下才會使用
相對定位 老大一般不要去用top,left,right,bottom
絕對定位 老二
元素會脫離文件流
一般不要去用margin，用top，left，right，bottom
雖然都能達到效果，但是為了開發的方便，**的簡潔。
固定定位 肯定不是同乙個爹
元素會脫離文件流
使用場景：回到頂部
側邊欄的廣告
純種的野孩子。只有瀏覽器的視窗可以管的住
一般的情況下：相對定位和絕對定位是同時出現的
一般所有的下拉框都是絕對配合著相對定位完成的
display: inline-block; inline-block 塊級轉換成行內元素
樣式width: 160px;
height: 30px;
text-align: center; 文字對齊方式
line-height: 30px; 行高
border: 1px solid #ccc; 邊框 solid表示實線
cursor: pointer; 滑鼠變換
position: relative; 相對定位
LIUNX隨堂學習 3 許可權
1.許可權分為三類 讀r，寫w，執行x 2.讀r 可以ls改目錄下的子檔名，子目錄名 寫w 可以在該目錄下建立 刪除 重新命名 執行x 可以cd到該目錄下 3.ll ls l 下詳細資訊的意義 檔案型別 許可權資訊 rw 硬鏈結數 1 屬主 root 屬組 root 檔案大小 2143 檔案建立日期...
web前端優化（3）
預載入 懶載入lazyload.js實現原理 首先通過document的clientheight屬性獲取當前的可視高度 選中所有帶有懶載入屬性的標籤，迴圈遍歷 通過元素的getboundingclientrect方法獲得當前元素的top值 如果top值小於可視介面的高度，就將設定的懶載入屬性去掉，同...
web前端筆記3
html hypertext markup lang 超文字標記語言 它負責網頁的三個要素之中的結構 html使用標籤的形式來表示網頁中的不同組織部分。所謂超文字指的就是超連結，使用超連結就可以讓我們從乙個頁面跳轉到另乙個頁面。在這個結構中可以來編寫html的注釋，注釋中的內容，不會在頁面中顯示，但...