Day3 css屬性

01.選擇器的權(quán)重

02.浮動

03.文字環(huán)繞

04.清除浮動

05.display屬性

06.定位

07.relative練習(xí)

08.盒子模型

09.居中


01.選擇器的權(quán)重

類型選擇(元素選擇器):0001
class選擇器:0010
id選擇器:0100
偽類選擇器:0001
層級(包含)選擇器:多個選擇器的權(quán)重之和
群組選擇器:分開看每個選擇器的權(quán)重
誰的權(quán)重的值大郊供,誰的優(yōu)先級就高

02.浮動

標準流:塊標簽一個占一行蔽莱,從上往下布局蜓斧。
行內(nèi)標簽一行可以顯示多個握爷,從左往右布局喧枷,直到遇到邊界就自動換行

  • 脫流:浮動吼鳞、定位

1.浮動:就是讓豎著顯示的標簽橫著來
float:left 和 right
注意:

  • 1.如果要使用浮動仰禽,那么同一級的所有標簽都要浮動
  • 2.如果父標簽浮動除秀,那么字標簽的位置會跟著一起動
  • 3.布局基本順序:從上往下。從左往右
#top{
                float: left;
                background-color: red;
                height: 150px;
                width: 100%;
            }
            #m1{
                float: left;
                height: 300px;
                width: 30%;
                background-color: pink;
            }
            #m2{
                float: left;
                height: 300px;
                width: 50%;
                background-color: goldenrod;
            }
            #m3{
                float: right;
                height: 300px;
                width: 20%;
                background-color: gold;
            }
            #bottom{
                float: left;
                height: 100px;
                width: 100%;
                background-color: blue;
            }
            
            #top1{
                float: left;
                background-color: darkblue;
                height: 150px;
                width: 100%;
            }
            #mm1{
                float: left;
                background-color: deeppink;
                height: 300px;
                width: 25%;
            }
            #mm2{
                float: left;
                height: 100px;
                width: 75%;
                background-color: blueviolet;
            }
            #mm3{
                float: left;
                height: 200px;
                width: 50%;
                background-color: black;
            }
            #mm4{
                float: left;
                height: 100px;
                width: 25%;
                background-color: darkgreen;
            }
            #mm5{
                float: left;
                height: 200px;
                width: 25%;
                background-color: palegreen;
            }
        </style>
    </head>
    <body>
        
        
        <!--<div id="red" style="width: 100px; height: 80px; background-color: red;">
                <a href="">百度一下</a>
        </div>
        <div id="green" style="width: 200px; height: 180px; background-color: greenyellow;">
            
        </div>-->
        
        
        <div id="top" align="center" >壹</div>
        <div id="m1" align="center">貳</div>
        <div id="m2" align="center">叁</div>
        <div id="m3" align="center">肆</div>
        <div id="bottom" align="center">伍</div>
        
        <div id="top1"></div>
        <div id="mm1"></div>
        <div id="mm2"></div>
        <div id="mm3"></div>
        <div id="mm4"></div>
        <div id="mm5"></div>

03.文字環(huán)繞

文字環(huán)繞:被文字環(huán)繞的標簽浮動各薇,文字標簽不浮動

/*被環(huán)繞的對象浮動*/
            #d1{
                float: left;
                width: 60px;
                height: 60px;
                background-color: royalblue;
            }
            #d2{
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
        </div>

04.清除浮動

1.清除浮動:是指清除因為浮動而產(chǎn)生的問題(高度塌陷) --- 問題不是什么時候都會產(chǎn)生的

2.怎么清除浮動项贺?

  • a.添加空的div:
    在父標簽(高度塌陷的標簽)的最后添加一個空的div,并且設(shè)置這個div的樣式表:clear:both(可能會產(chǎn)生大量額外的代碼)

  • b.設(shè)置overflow:
    在父標簽中設(shè)置樣式表的overflow的值為hidden

/*清除浮動方案2*/
        .clear{
            overflow: hidden;
        }
        </style>
    </head>
    <body>
        <div style="height: 100px; background-color: red;"></div>
        <div style="background-color: aqua;"class="clear">
            <div style="width: 30%; background-color: black; height: 200px; float: left;"></div>
            <div style="width: 30%; background-color: brown; height: 200px; float: left;"></div>
            
            <!--1.清除浮動方案-->
            <!--<div id="" style="clear: both;"></div>-->
        </div>
        <div style="height: 100px; background-color: green;"></div>
    </body>
</html>

05.display屬性

1.HTML中標簽分為塊和行內(nèi)
2.css中標簽分為三類:塊峭判、行內(nèi)塊、行內(nèi)(display)

  • block:塊 (一個占一行棕叫,默認寬度是100%林螃,高度默認根據(jù)內(nèi)容來確定;直接設(shè)置寬高有效)
  • inline-block:行內(nèi)塊(一行可以有多個俺泣,默認寬高是內(nèi)容的寬高疗认;直接設(shè)置寬高是有效的)
  • inline:行內(nèi)(一行可以有多個,默認寬高是內(nèi)容的高度伏钠,設(shè)置寬高無效)

通過改變標簽的display值横漏,可以讓一個標簽在塊、行內(nèi)塊和行內(nèi)之間任意切換
注意:inline-block標簽的右邊默認都有一個間隙熟掂,不能和其他標簽無縫連接(這個問題目前無法解決)

06.定位

1.距離:

top:標簽頂部距離其它標簽的位置
bottom:標簽的底部到距離其他標簽的位置
left:標簽的左邊到距離其他標簽的位置
right:標簽的右邊到距離其他標簽的位置

2.position

想要設(shè)置標簽的top缎浇,bottom,left赴肚,right的值有效素跺,必須設(shè)置標簽的參考方式
initial:(默認值) 沒有參考對象
absolute:相對第一個position的值是非static的父標簽進行定位
relative:正常位置定位(按標準流定位)
fixed:相對于瀏覽器定位
sticky:不滾動的時候按標準流定位二蓝,滾動的時候相對瀏覽器定位

#d1{
                position: relative;
                width: 500px;
                height: 500px;
                background-color: cadetblue;
                /*margin-top: 320px;*/
                top: 200px;
            }
            #d2{
                position: fixed;
                width: 100px;
                height: 100px;
                background-color: gold;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            
        </div>

07.relative練習(xí)

div div{
                float: left;
                position: relative;
                height: 100px;
                width: 100px;
                background-color: green;
                margin-left: 20px;
                margin-top: 20px;
            }
            #d1{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="d1" style="width: 500px; background-color: gold;">
            <div background-color: gray></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

08.盒子模型

每一個標簽都是由四個部分組成:

  • 1.內(nèi)容:顯示標簽內(nèi)容的部分,可見的(設(shè)置寬和高的值指厌,就是設(shè)置內(nèi)容部分的大小)
  • 2.內(nèi)邊距(padding):可見的刊愚,不能顯示內(nèi)容(通過設(shè)置padding來改變其值,默認是0)
  • 3.邊框(border):可見的踩验,如果有內(nèi)邊距邊框就顯示在內(nèi)邊距上鸥诽,否則就顯示在內(nèi)容上
  • 4.外邊距(margin):不可見的,但是會占據(jù)瀏覽器的空間
/*注意:在寫網(wǎng)頁的時候箕憾,在樣式表的最前面關(guān)閉自帶的margin和padding*/
        *{
            margin: 0;
            padding: 0;
        }
            div{
                background-color: sandybrown;
                /*1.設(shè)置內(nèi)容大小*/
                width: 100px;
                height: 100px;
                
                /*2.padding的值有四個
                 可以單獨設(shè)
                 */
                /*padding-left: 20px;
                padding-top: 10px;*/
                padding: 10px 40px;  /*上下是20牡借,左右是40*/
                
                /*3.邊框
                    可以單獨設(shè),也可以一起設(shè)
                    格式:寬度 樣式 顏色
                    a.樣式 solid-實線  dotted-點狀線 double-雙線 dashed-虛線
                    */
                    /*同時設(shè)置4條邊*/
                border: 3px solid black;
                
                 /*單獨設(shè)置某一邊*/    
                border-left-color: blue;
                
                /*4.外邊距*/
                /*單獨設(shè)置每個外邊距*/
                margin-top: 100px;
                margin-left: 50px;
                margin-right: 100px;
                
                /*同時設(shè)置4個外邊距*/
                /*margin: 上 右  下 左*/
                margin: 20px;
                
                /*5.設(shè)置圓角*/
                /*設(shè)置邊框圓角的弧度*/
                border-top-left-radius: 50px;
                border-bottom-right-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div id="">
            Zzz
        </div>

09.居中

1.垂直居中

  • a.固定標簽高度
  • b.設(shè)置line-height的值和高度一樣
*{
            margin: 0;
            padding: 0;
        }
            div{
                height: 100px;
                width: 100%;
                line-height: 100px;
                background-color: gold;
                text-align: center;
                }
                p{
                    display: inline-block;
                    /*垂直居中*/
                    line-height: 50px;
                    height: 50px;
                    width: 200px;
                    background-color: hotpink;
                    /*水平居中*/
                    text-align: center;
                    
                }
        </style>
    </head>
    <body>
        <div>
            <p>你說你馬呢厕九?蓖捶??</p>
        </div>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末扁远,一起剝皮案震驚了整個濱河市俊鱼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌畅买,老刑警劉巖并闲,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異谷羞,居然都是意外死亡帝火,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門湃缎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來犀填,“玉大人,你說我怎么就攤上這事嗓违【叛玻” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵蹂季,是天一觀的道長冕广。 經(jīng)常有香客問我,道長偿洁,這世上最難降的妖魔是什么撒汉? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮涕滋,結(jié)果婚禮上睬辐,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好溉委,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布鹃唯。 她就那樣靜靜地躺著,像睡著了一般瓣喊。 火紅的嫁衣襯著肌膚如雪坡慌。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天藻三,我揣著相機與錄音洪橘,去河邊找鬼。 笑死棵帽,一個胖子當著我的面吹牛熄求,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播逗概,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼弟晚,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了逾苫?” 一聲冷哼從身側(cè)響起卿城,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎铅搓,沒想到半個月后瑟押,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡星掰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年多望,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氢烘。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡怀偷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出播玖,到底是詐尸還是另有隱情枢纠,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布黎棠,位于F島的核電站,受9級特大地震影響镰绎,放射性物質(zhì)發(fā)生泄漏脓斩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一畴栖、第九天 我趴在偏房一處隱蔽的房頂上張望随静。 院中可真熱鬧,春花似錦、人聲如沸燎猛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽重绷。三九已至沸停,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間昭卓,已是汗流浹背愤钾。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留候醒,地道東北人能颁。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像倒淫,于是被迫代替她去往敵國和親伙菊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案敌土? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,762評論 1 92
  • 01浮動 標準流: a.塊標簽一個占一行镜硕,從上往下占一行。b.行標簽一行可以顯示多個從左往右布局纯赎,直到遇到邊界就自...
    PeppaTang閱讀 425評論 0 6
  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,319評論 2 66
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5谦疾? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,525評論 1 45
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺開發(fā)》時犬金,所整理的筆記念恍。筆記內(nèi)容為根據(jù)個人需求所...
    墨荀閱讀 2,344評論 0 7