難過,今天的這篇文章是7.24號寫的,昨天一天沒有時間寫總結,大部分時間都用在了寫項目上面這個項目算我們開班一來第一個比較大的,寫的是一頭的霧水,一直到昨晚上下晚自習都沒有寫完,寫到最后腦子都糊掉了,所以我打算今天再寫一遍,把昨天的推翻,重新來一遍,但是在寫之前項目之前,還是要把昨天學的知識點給總結一下,其實不算多,總結如下:
一、浮動帶來的問題以及解決方法
浮動帶來的問題:浮動元素不能撐開父級元素,為了解決這個問題我們稱為清除浮動(也叫閉合浮動)
解決方法:
(1)定高法:強行給父元素設置個高度?缺點:高度寫死了,導致后期不好維護
(2)增加額外的塊級元素:在浮動元素的最后添加一個塊級元素,并給他設置屬性clear:both;
優(yōu)點:可以讓浮動元素撐開標準流的父級元素
缺點:每一次清除浮動都需要添加額外的標簽
(3)使用偽元素(本質上還是增加額外的塊級元素)
使用步驟:1、將固定代碼復制到CSS中 2、給需要清除浮動的元素應用這個選擇器
.clearfix::after {
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
/*這是兼容性寫,是兼容IE瀏覽器的*/
.clearfix {
*zoom:1;
}
優(yōu)點:使用簡單,不存在兼容性問題
缺點:底層代碼較難以理解
(4)使用overflow 給需要清除浮動的元素設置overflow:hidden;
優(yōu)點:使用簡單 缺點:在特定的情況下會失效
二、偽元素
解釋:偽元素就是偽標簽,實際上我們在瀏覽器中是看不到的
語法:(1)選擇器::after {} 在選擇器選擇的標簽內容最后面添加一個標簽
(2)選擇器::before{} 在選擇器選擇的標簽內容最前面添加一個標簽
注意細節(jié):(1)添加的標簽默認是行內元素
(2)偽元素的content必須要寫,即使是空內容也要寫
(3)官方推薦寫法:: 但是為了考慮到兼容問題 建議寫成單引號:
例子解釋:.dv::after {
content:'今天天氣不錯';
}
這句話的意思:1、在dv這個選擇器選擇的標簽內容最后面添加"今天天氣不錯"
2、選擇這個包裹"今天天氣不錯"的標簽
三、版心
解釋:是一個固定寬度并且居中的盒子,簡單來說就是一個固定寬度的值
語法:常用寫法 .w {
width:1280px;
margin: 0 auto;
}
特殊情況:1、通欄情況 通欄的盒子 解決方法:在通欄的盒子里再套一個盒子并且應用版心樣式
2、有一張?zhí)貏e大的圖片,超過了版心甚至超過了電腦屏幕 解決方法:(1)使用圖片作為背景圖片
(2)這個盒子不做約束,寬度width:100% 高度等于圖片的高度 (3)background-position:center 0
四、PS的簡單使用
z工具:使圖片放大縮小 按下z鍵
(1)放大:使用鍵盤:ctrl + + 使用鼠標:(1)單擊 (2)按住鼠標左鍵不放 (3)鼠標選擇一塊區(qū)域 使用鼠標和鍵盤:alt+鼠標滾輪向上滾?
(2)縮?。菏褂面I盤:(1)ctrl + - 使用鼠標加鍵盤:alt+鼠標滾輪向下
c工具:切片工具 按下c鍵
移動畫布:(1)按住空格鍵+鼠標移動畫布(上下左右都能移動) (2)按住ctrl鍵+滾動鼠標滾輪(只能移動左右方向的)(3)按住空格鍵+滾動鼠標滾輪(只能移動上下方向)
查看選中的切片的尺寸 :雙擊
導出選中的切片:ctrl+shift+alt+s
嗯,今天休息總結就到這里,晚上再寫今天的總結。