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

資訊專欄INFORMATION COLUMN

css學(xué)習(xí)筆記（一）

dadong / 1740人閱讀

摘要：元素的高度文檔流文檔內(nèi)元素流動(dòng)的方向叫做文檔流。塊級(jí)元素高度一個(gè)元素的高寬度是由其內(nèi)容決定的，不到萬(wàn)不得已的時(shí)候一般不要設(shè)置寬高，塊級(jí)元素高度是由其內(nèi)部文檔流高度總和決定的，并不一定是等于，只是決定，例如設(shè)置字體是，但是它的元素高度卻不是。

position定位

CSS position屬性用于指定一個(gè)元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。

定位類型

定位元素（positioned element）是其計(jì)算后位置屬性為 relative, absolute, fixed 或 sticky 的一個(gè)元素。

相對(duì)定位元素（relatively positioned element）是計(jì)算后位置屬性為 relative 的元素。

絕對(duì)定位元素（absolutely positioned element）是計(jì)算后位置屬性為 absolute 或 fixed 的元素。

粘性定位元素（stickily positioned element）是計(jì)算后位置屬性為 sticky 的元素。

大多數(shù)情況下，height和width 被設(shè)定為auto的絕對(duì)定位元素，按其內(nèi)容大小調(diào)整尺寸。但是，被絕對(duì)定位的元素可以通過(guò)指定top和bottom ，保留height未指定（即auto），來(lái)填充可用的垂直空間。它們同樣可以通過(guò)指定left 和 right并將width 指定為auto來(lái)填充可用的水平空間。

除了剛剛描述的情況（絕對(duì)定位元素填充可用空間）：

如果top和bottom都被指定（技術(shù)上，而不是auto），top 勝出。

如果指定了left 和right兩側(cè)，則在direction為ltr（英語(yǔ)，水平日語(yǔ)等）時(shí)left 贏，并且在direction為rtl時(shí)right贏（阿拉伯文，希伯來(lái)文等）。

語(yǔ)法

position 屬性被指定為從下面的值列表中選擇的單個(gè)關(guān)鍵字。

取值

static
該關(guān)鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時(shí) top, right, bottom, left 和 z-index 屬性無(wú)效。

relative
該關(guān)鍵字下，元素先放置在未添加定位時(shí)的位置，再在不改變頁(yè)面布局的前提下調(diào)整元素位置（因此會(huì)在此元素未添加定位時(shí)所在位置留下空白）。position:relative 對(duì) table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效。

absolute
不為元素預(yù)留空間，通過(guò)指定元素相對(duì)于最近的非 static 定位祖先元素的偏移，來(lái)確定元素位置。絕對(duì)定位的元素可以設(shè)置外邊距（margins），且不會(huì)與其他邊距合并。

fixed
不為元素預(yù)留空間，而是通過(guò)指定元素相對(duì)于屏幕視口（viewport）的位置來(lái)指定元素位置。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。打印時(shí)，元素會(huì)出現(xiàn)在的每頁(yè)的固定位置。fixed 屬性會(huì)創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform 屬性非 none 時(shí)，容器由視口改為該祖先。

實(shí)例

position: fixed;相對(duì)于屏幕定位

.topNavBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}/*相對(duì)于屏幕左上角固定

絕對(duì)定位，在子元素寫position: absolute;在父元素寫position: relative;

.userCard .welcome {
    display: inline-block;
    position: relative;
}

.userCard .welcome .triangle {
    display: block;
    position: absolute;
    top: 100%;
    left: 4px;
}/*緊貼父元素下方，在父元素從左往右4px邊距
簡(jiǎn)單的幾種居中

這只是暫時(shí)用到的居中方法，在后面會(huì)專門更新一篇居中

讓 .xxx 子代中的內(nèi)聯(lián)元素居中

.xxx {text-align: center;}

div子標(biāo)簽水平居中

div{
  margin-left:auto;
  margin-right:auto;
}

div高度為30px，div標(biāo)簽內(nèi)大小為14px字垂直居中

div{
  font-size: 14px; 
  line-height: 30px;
}

或

div{
  font-size: 14px; 
  line-height: 24px; 
  padding: 3px 0;
}

行高等于高度，或者行高加上padding等于高度，就可以使div內(nèi)文字垂直居中，但是僅限于在font-size比較小的時(shí)候可以用line-height來(lái)控制內(nèi)聯(lián)元素所占的高度，太大就會(huì)容易出bug，如果需要一個(gè)特定的高度，可以在那基礎(chǔ)上添加padding來(lái)增加。

元素的高度 文檔流

文檔內(nèi)元素流動(dòng)的方向叫做文檔流。

內(nèi)聯(lián)元素從左往右流動(dòng)，如果寬度不夠就會(huì)另起一行，漢字的話一句話有可能會(huì)從中間，但是如果是英文，css如果沒(méi)有聲明 word-break: break-all; 英文是不會(huì)換行的。

塊級(jí)元素是從上往下流動(dòng)，每個(gè)塊占一行。

塊級(jí)元素高度

一個(gè)元素的高寬度是由其內(nèi)容決定的，不到萬(wàn)不得已的時(shí)候一般不要設(shè)置寬高，塊級(jí)元素高度是由其內(nèi)部文檔流高度總和決定的，并不一定是等于，只是決定，例如設(shè)置字體是100px，但是它的元素高度卻不是100px。

內(nèi)聯(lián)元素的高度

給內(nèi)聯(lián)元素設(shè)置寬高是無(wú)效的，設(shè)置 margin-top margin-bottom 也是無(wú)效的，內(nèi)聯(lián)元素的高度也是由文檔流內(nèi)部元素決定，居中對(duì)齊是由基線對(duì)齊的，而且由于瀏覽器會(huì)給不同字體一個(gè)建議的行高，這個(gè)內(nèi)聯(lián)元素的行高就是綜合建議行高和其他相關(guān)設(shè)計(jì)來(lái)決定的。

零散知識(shí)點(diǎn)

背景圖片居中：background-position: center center;

背景圖片按比例縮放：background-size: cover;

設(shè)置寬度可以設(shè)置最大寬度，這樣如果屏幕變小就可以自適應(yīng)。

設(shè)置display:inline block;后，外邊距margin不會(huì)合并。

想要并排，先在子元素float:left;然后在所有子元素的父元素上設(shè)置clearfix，后加上偽類。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

做半透層背景：background-color: rgba(0,0,0,0.8);/不要顏色（黑色），半透層背景/

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

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

相關(guān)文章

  • CSS Variables學(xué)習(xí)筆記

    摘要：注本文首發(fā)于個(gè)人博客學(xué)習(xí)筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學(xué)習(xí)筆記。使用自定義屬性來(lái)設(shè)置變量名，并使用特定的來(lái)訪問(wèn)。二學(xué)習(xí)筆記聲明調(diào)用聲明方式變量聲明的方式非常簡(jiǎn)單，如下，聲明了一個(gè)名叫的變量。 注：本文首發(fā)于個(gè)人博客 《CSS Variables學(xué)習(xí)筆記》。 最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學(xué)習(xí)筆記。 ...

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

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

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

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

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

  • 重學(xué)前端學(xué)習(xí)筆記（十）--CSS語(yǔ)法關(guān)于帶@的規(guī)則

    摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

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

  • SCSS學(xué)習(xí)筆記（一）

    摘要：的由來(lái)就是加強(qiáng)版的，要講那就一定要從講起英文全稱是一個(gè)最初由設(shè)計(jì)并由開(kāi)發(fā)的層疊樣式表語(yǔ)言。年發(fā)行，年版本穩(wěn)定，設(shè)計(jì)和開(kāi)發(fā)分開(kāi)進(jìn)行，讓這個(gè)語(yǔ)言的功能相當(dāng)完善。變量允許使用變量，所有變量以開(kāi)頭。 SCSS的由來(lái) SCSS就是加強(qiáng)版的CSS，要講SCSS那就一定要從SASS講起 SASS Sass（英文全稱：Syntactically Awesome Stylesheets）是一個(gè)最初由Ha...

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

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

0條評(píng)論

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