day04

A我今天學(xué)習(xí)到了什么

1溫習(xí)day03的知識點(diǎn)
1.1css背景
//背景顏色
background-color
//背景圖片
backgorund-image
//背景重復(fù)
background-repeat
//背景吸附
background-attachment:fixed | scroll
//背景位置有兩個參數(shù),第一個參數(shù)表示離x軸的距離,y表示離y軸的距離
背景位置:background-position: x y 

//簡寫
background: color image repeat  position

//背景圖片大小
background-size
//x表示寬度,y表示高度
background-size: x y;

//此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
//相當(dāng)于background-size:100% 100%;
background-size:cover;
1.2.css文本
color:設(shè)置字體的顏色
//顏色是通過CSS最經(jīng)常的指定：顏色的名稱 - 如: red
body {color:red;}
//十六進(jìn)制值 - 如: ＃FF0000
h1 {color:#00ff00;}
//一個RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}

text-align
//文本對齊方式
text-align: right|left|center
//左|右|中心
text-decoration
//文本修飾
text-decoration: underline|overline|line-through
//下劃線|上劃線|刪除線
text-indent
//文本縮進(jìn)
text-transform
//文本轉(zhuǎn)換(了解)
text-transform:uppercase|lowercase|capitalize
//大寫|小寫|首大寫
1.3.css字體
p{font-family:Helvetica,Microsoft YaHei}
//font-family 屬性應(yīng)該設(shè)置幾個字體名稱作為一種"后備"機(jī)制，
如果瀏覽器不支持第一種字體，他將嘗試下一種字體
font-size
//字體大小
font-style:normal | italic
//字體樣式：正常|斜體
font-weight:normal | bold | lighter
//字體粗細(xì)：正常|粗體|輕淡

行高:line-height
1.4.css鏈接
這四個鏈接狀態(tài)是：
a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當(dāng)用戶鼠標(biāo)放在鏈接上時
a:active - 鏈接被點(diǎn)擊的那一刻

*若單獨(dú)設(shè)置幾個鏈接，必須遵守如下規(guī)則：
a:hover 必須跟在 a:link 和 a:visited后面
a:active 必須跟在 a:hover后面
1.5.css列表樣式(針對ul)
list-style:none;
//無樣式
list-style-type:circle|square
//目錄樣式類型：圓|平方
list-style-image:url("xxx")
//圖片
1.6.邊框
border-width 
// 邊框的寬度
border-style  
// 邊框的樣式
border-color 
//邊框的顏色

border： width style color
p{border:1px solid #333}
//可以簡寫成
p{ border-top:1px solid #ccc;}
*邊框-單獨(dú)設(shè)置各邊
1.7.表格(了解)
border-collapse 
//屬性設(shè)置表格的邊框被折疊成一個單一的邊框
table{border-collapse:collapse}

//可以在td,th設(shè)置這個兩個屬性
colspan:value    //跨越的列
rowspan:value   //跨越的行
1.8.輪廓屬性（不怎么用）
p{outline:1px solid pink}
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
1.9.透明
透明：opacity：0~1
visibility:hidden|visible//可見|能見度：隱藏

3css樣式的繼承:子元素對父元素的繼承

1.1.width和height
width如果子元素不設(shè)置寬度，默認(rèn)情況下繼承父元素的寬度
height如果父元素不設(shè)置高度，默認(rèn)情況下父元素繼承子元素的高度
1.2.css可以繼承的屬性
文本相關(guān)屬性:
color,text-align,text-decoration,text-transform,text-indent
//顏色，文本對齊，文本裝飾，文本轉(zhuǎn)換，文本縮進(jìn)(內(nèi)聯(lián)標(biāo)簽不能設(shè)置此屬性)
字體相關(guān)屬性:font-family,font-style,font-size,font-weight,line-height
//字體，字體樣式，字體大小，字體粗細(xì)，線高度
列表相關(guān)屬性:list-style//樣式
表格相關(guān)屬性:border-collapse//折疊
其他屬性:cursor,visibility//光標(biāo)樣式，能見度
2拓展day04的知識點(diǎn)
2.1.盒子模型
盒子模型:box-sizing:border-box
當(dāng)設(shè)置box-sizing:border-box;
設(shè)置padding,和border,//它的寬度還是會保持不變
box-sizing:content-box;(默認(rèn)清晰)
//當(dāng)設(shè)置padding和border時寬度會發(fā)生改變
//總寬度=width+border+padding
2.2.浮動float
1.目的:為了讓元素并排顯示
float：lest|right；
（postion:relative// 相對的位置移動
top|left|right|bottom：1px；）

2如何清除浮動
(1)給下面的兄弟元素給clear:both;

(2)給父級加overflow:hidden;

(3)用偽元素,給父級內(nèi)容生成
.row:before{
 display:table; 
 content:“”}//前面加
.row:after{
 display:table;
 content:“”
 clear:both;}//后面加
2.3.定位:position
position:absolute | relative
//絕對定位，相對定位

Relative 定位
相對定位元素的定位是相對其正常位置。
postion:relative//父級專屬位置設(shè)定

Absolute定位 （fixed固定//沒有父級只有<html>）
絕對定位的元素的位置相對于最近的相對定位的父元素，
如果沒有已定位的父元素，那么它的位置相對于<html>
****定位的調(diào)試都通過left,top,right,bottom移動

z-index:設(shè)置元素的堆疊順序 給position:absolute絕對定位的元素
當(dāng)子元素沒有設(shè)置寬度，如果設(shè)置了絕對定位,它不會繼承父元素的寬度
2.4.布局方式的總結(jié)
1.默認(rèn)布局
2.浮動布局(左右安置)
3.層級布局(定位)
2.5.實(shí)現(xiàn)元素的垂直水平居中
（相對）父元素設(shè)置parent{position:relative;}
(絕對）子元素設(shè)置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;}
2.6:CSS樣式的幾種引入方式
外部樣式表
<link rel="stylesheet" type="text/css" href="/c5.css">
內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
<style>
p{color:pink;font-size:16px}
</style>
內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
<p style=”color:pink;font-size:16px”>hello world</p>
//給同一選擇器設(shè)置同一樣式,離元素近的樣式設(shè)置方式優(yōu)先級高

B我掌握了的

2.1.盒子模型
盒子模型:box-sizing:border-box
當(dāng)設(shè)置box-sizing:border-box;
設(shè)置padding,和border,//它的寬度還是會保持不變
box-sizing:content-box;(默認(rèn)清晰)
//當(dāng)設(shè)置padding和border時寬度會發(fā)生改變
//總寬度=width+border+padding
2.2.浮動float
1.目的:為了讓元素并排顯示
float：lest|right；
（postion:relative// 相對的位置移動
top|left|right|bottom：1px；）

2如何清除浮動
(1)給下面的兄弟元素給clear:both;

(2)給父級加overflow:hidden;

(3)用偽元素,給父級內(nèi)容生成
.row:before{
 display:table; 
 content:“”}//前面加
.row:after{
 display:table;
 content:“”
 clear:both;}//后面加
2.3.定位:position
position:absolute | relative
//絕對定位，相對定位

Relative 定位
相對定位元素的定位是相對其正常位置。
postion:relative//父級專屬位置設(shè)定

Absolute定位 （fixed固定//沒有父級只有<html>）
絕對定位的元素的位置相對于最近的相對定位的父元素，
如果沒有已定位的父元素，那么它的位置相對于<html>
****定位的調(diào)試都通過left,top,right,bottom移動

z-index:設(shè)置元素的堆疊順序 給position:absolute絕對定位的元素
當(dāng)子元素沒有設(shè)置寬度，如果設(shè)置了絕對定位,它不會繼承父元素的寬度
2.4.布局方式的總結(jié)
1.默認(rèn)布局
2.浮動布局(左右安置)
3.層級布局(定位)
2.5.實(shí)現(xiàn)元素的垂直水平居中
（相對）父元素設(shè)置parent{position:relative;}
(絕對）子元素設(shè)置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;}
2.6:CSS樣式的幾種引入方式
外部樣式表
<link rel="stylesheet" type="text/css" href="/c5.css">
內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
<style>
p{color:pink;font-size:16px}
</style>
內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
<p style=”color:pink;font-size:16px”>hello world</p>
//給同一選擇器設(shè)置同一樣式,離元素近的樣式設(shè)置方式優(yōu)先級高

C我沒有掌握的

全部掌握了，只是不太熟練，要多練習(xí)~~~

01.PNG

02.PNG

03.PNG
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,154評論 1贊 92
  • 一.CSS描述 CSS全稱為“層疊樣式表(Cascading Style Sheets)”，它主要是用于定義HTM...
    snowy_sunny閱讀 1,202評論 0贊 4
  • 在我的印象里母親一直穿著樸素，她經(jīng)常說像我們這樣做生意的沒那時間打扮也沒有那樣的場合需要打扮。家里有個小作坊，父母...
    左左jianshu閱讀 605評論 0贊 0
  • 生為虛名苦作樂， 贏得榮華又如何。 損精勞身赴千里， 莫嘆愁緒無人知。
    言殼閱讀 139評論 0贊 1
  • 雨過天晴的早晨，一只小小的斑蝶閃撲翻飛到我的跟前，扯著我的視線逆風(fēng)飛入了路旁茂盛的綠色植物中，最后停在了一朵日光菊...
    一滴想飛的水閱讀 206評論 2贊 2

友情鏈接更多精彩內(nèi)容