成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

從零開(kāi)始的全棧工程師——html篇1.5

booster / 2578人閱讀

摘要:列表與邊距探討和行塊一列表無(wú)序列表內(nèi)部必須有子標(biāo)簽天生自帶內(nèi)外邊距也是自帶大家會(huì)發(fā)現(xiàn)用的時(shí)候內(nèi)容前面會(huì)出現(xiàn)一個(gè)像這樣的一個(gè)實(shí)心圓可以用屬性去掉也可以更換空心圓實(shí)心圓正方形空有序列表內(nèi)部必須有子標(biāo)簽天生自帶內(nèi)外邊距屬性是標(biāo)簽屬性只能寫(xiě)在行

列表與邊距探討和行塊

一、列表

1.無(wú)序列表(UL)

1)內(nèi)部必須有子標(biāo)簽


  • 2)天生自帶內(nèi)外邊距 p也是自帶

    大家會(huì)發(fā)現(xiàn)用UL的時(shí)候內(nèi)容前面會(huì)出現(xiàn)一個(gè)像這樣的一個(gè)實(shí)心圓

    可以用屬性list-style 去掉也可以更換(list-style:none;)circle空心圓 disc實(shí)心圓 square正方形 none空

    ?

    2.有序列表(OL)

    1)內(nèi)部必須有子標(biāo)簽

  • 2)天生自帶內(nèi)外邊距

    屬性type(是標(biāo)簽屬性只能寫(xiě)在行間)

    有序列表改變前面的符號(hào)用type修改? 只能寫(xiě)在行間不能寫(xiě)在style里

    有序列表的符號(hào)有 (a b c) (A B C) (1 2 3) (i ii iii) (I II III)

    ?

    ?

    3.自定義列表(DL)

    標(biāo)題dt? ? ?內(nèi)容dd

    ?

    ?

    ?

    二、外邊距(margin)和內(nèi)邊距(padding)問(wèn)題探討

    margin:200px;設(shè)置一個(gè)值 說(shuō)明 top right left bottom 都是200的內(nèi)邊距
    margin:200px 100px;設(shè)置兩個(gè)值 說(shuō)明 上下200 左右100
    margin:200px 50px 100px;上是200 左右是50 下是100
    margin:200px 50px 100px 50px;順時(shí)針 上200 右50 下100 左50
    padding:同上

    1.實(shí)際占用空間的大小

    通過(guò)分析我們發(fā)現(xiàn)一個(gè)元素實(shí)際占用的空間是 Width+border*2+padding*2+margin*2

    ?

    2.Margin的塌陷現(xiàn)象

    相鄰兩個(gè)元素同事設(shè)置margin時(shí) 他們之間的外邊距不會(huì)疊加 會(huì)取最大的 這種現(xiàn)象叫margin塌陷

    ?

    ?

    三、塊級(jí)標(biāo)簽和內(nèi)斂標(biāo)簽(內(nèi)斂也叫行級(jí)標(biāo)簽)

    ?

    有的標(biāo)簽設(shè)置背景時(shí)會(huì)獨(dú)占一行 還有的會(huì)隨著內(nèi)容的增減而改變自己的空間的大小

    根據(jù)以上現(xiàn)象 標(biāo)簽又分為 塊級(jí)標(biāo)簽 和 內(nèi)斂標(biāo)簽(也叫行級(jí)標(biāo)簽)

    塊級(jí)標(biāo)簽(會(huì)獨(dú)占一行 無(wú)論內(nèi)容多少)塊級(jí)標(biāo)簽有:p h1-h6 div ul ol dl?

    行級(jí)標(biāo)簽內(nèi)斂(根據(jù)內(nèi)容多少占空間大?。┬屑?jí)標(biāo)簽:span img i b a

    1.二者之間的區(qū)別

    1)塊級(jí):
    塊級(jí)元素會(huì)獨(dú)占一行
    塊級(jí)可以設(shè)置寬高


    2)內(nèi)斂:
    內(nèi)斂不會(huì)獨(dú)占一行
    內(nèi)斂不可以設(shè)置寬高
    內(nèi)斂元素的margin上下不起作用

    ?

    2.二者轉(zhuǎn)換(display)

    1)塊級(jí)轉(zhuǎn)行級(jí)display:inline;
    給塊級(jí)元素添加屬性display:inline; display 顯示 inline 行


    2)行級(jí)轉(zhuǎn)塊級(jí)display:block;
    給行級(jí)元素添加屬性display:block; block塊


    3)行級(jí)塊元素display:inline-block;

    給需要的元素添加屬性 display:inline-block;

    可以設(shè)置寬高 可以在一行 margin也可以隨便使用

    ?

    ?

    ?

    補(bǔ)充:

    Line-height 行高? 設(shè)置字體的垂直位置

    Line-height的值和height的值相同 文本就上下居中

    ?

    ?

    ?

    ?

    ?

    ?

    ?

    ?

    ?

    ?

    ?

    ?

    ?

    ?

    文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/1805.html

    相關(guān)文章

    • 從零開(kāi)始全棧程師——html1

      摘要:全棧工程師也可以叫前端主要是網(wǎng)站小程序公眾號(hào)這一塊隸書(shū)篇超文本標(biāo)記語(yǔ)言,標(biāo)記通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用。超文本標(biāo)記語(yǔ)言的結(jié)構(gòu)包括頭部分英語(yǔ)和主體部分英語(yǔ),其中頭部提供關(guān)于網(wǎng)頁(yè)的信息,主體部分提供網(wǎng)頁(yè)的具體內(nèi)容。全棧工程師也可以叫web 前端 H5主要是網(wǎng)站 app 小程序 公眾號(hào)這一塊 HTML篇 html(超文本標(biāo)記語(yǔ)言,標(biāo)記通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用。) 超文本就是指頁(yè)面內(nèi)可以包含圖片、鏈接...

      sydMobile 評(píng)論0 收藏0
    • 從零開(kāi)始全棧程師——html1.2

      摘要:權(quán)重行內(nèi)樣式把當(dāng)做標(biāo)簽來(lái)用寫(xiě)在之間外部引用把當(dāng)做文件來(lái)用在里加一條路徑這里的可以舍去因?yàn)楹竺娴奈募菚?huì)默認(rèn)這條標(biāo)簽是和是必不可少的。嵌入式這個(gè)前期一般用不到就是一個(gè)樣式表里引入另一個(gè)的樣式表起名方式與CSS 一.起名方式(起名方式也叫選擇器) 起名的目的是為了給標(biāo)簽添加屬性 常見(jiàn)的3種選擇器有 標(biāo)簽選擇器? ?id選擇器(使用的時(shí)候加#)? ? class選擇器(使用的時(shí)候加.)? 樣式的...

      saucxs 評(píng)論0 收藏0
    • 從零開(kāi)始全棧程師——html1.4

      摘要:背景與邊框一背景背景顏色簡(jiǎn)寫(xiě)備注以下給設(shè)置可能不起作用需要用到背景圖片簡(jiǎn)寫(xiě)背景圖片的平鋪平鋪瀏覽器默認(rèn)平鋪只平鋪橫向和縱向不平鋪背景大小與位置大小大小屬性值的寫(xiě)法有具體設(shè)置大小自適應(yīng)位置背景位置也是坐標(biāo)軸向下為正像右為背景與邊框 ? ? ?? 一、背景(backgound) 1.背景顏色:background-color:red;(簡(jiǎn)寫(xiě):background:color;) 備注:ie9以下...

      yedf 評(píng)論0 收藏0
    • 從零開(kāi)始全棧程師——html1.7

      摘要:存在形影分離,所以一般情況下不建議添加值了,一般給子元素當(dāng)參照位置,或者是元素的微調(diào)。實(shí)際上,這是屬性的特點(diǎn)。表單的內(nèi)元素文本框密碼框單選框多選框普通按鈕按鈕提交按鈕提交下拉列表position定位與表單 一、position 1、Position細(xì)說(shuō) Position:relative; Left:100px; Top:100px; Position:absolute; Left:100p...

      Dean 評(píng)論0 收藏0
    • 從零開(kāi)始全棧程師——html1.3

      摘要:文本字體樣式與前期英語(yǔ)單詞匯總一文本樣式顏色文本對(duì)齊方式左對(duì)齊居中對(duì)齊右對(duì)齊兩端對(duì)齊文本修飾空上劃線下劃線刪除線文本縮進(jìn)縮進(jìn)二字體樣式字體大小大小字體顏色注意不要寫(xiě)成字體形狀這個(gè)了解一下就行一般用不到字體字形微軟雅黑宋體楷文本、字體css樣式與前期英語(yǔ)單詞匯總 一、文本樣式(text)   1.顏色:color:red;   2.文本對(duì)齊方式:text-align:left/center/r...

      ingood 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <