day40 css

時間 2019-11-30

標籤 day40 day css 欄目 CSS 简体版

原文原文鏈接

day40 css

內容回顧:

1.浮動

非標準文檔流

做用:實現元素並排: 第一個盒子會貼父盒子的邊, 第二個盒子會貼第一個盒子的邊

特性:只要浮動了, 就脫離標準文檔流

只要浮動, 就有一個收縮效果, 就好像是把塊搞成行內塊的效果(由於你浮動,脫離了標準流,不具有了標準標籤的塊特徵)

字圍: 最開始的浮動就是作這個的

只要浮動了, 任意的標籤均可以設置寬高

浮動帶來的影響:

若是父盒子不設置高度, 子盒子浮動了, 由於子盒子脫離了標準文檔流, 浮動不在頁面中佔位置, 撐不地父盒子的高度.

注意: 要浮動一塊兒浮動, 有浮動,清除浮動(4種方式)

一.給父盒子設置固定高度, 後期很差維護

二.內牆法, 給浮動元素的後面加一個空的塊級標籤, 類名通常爲clearfix, 設置該屬性爲: clear:both;清除左邊右邊浮動給我帶來的影響

三.僞元素清除法

.clearfix:after{

content:'.';

clear:both;

display:block;

visibility:hidden;

height:0;

}

四.父標籤加屬性: overflow:hidden; 造成BFC

2.display

inline: 在一行顯示, 不能設置寬高

block: 獨佔一行, 能夠設寬高

inline-block: 在一行顯示, 能夠設寬高

none: 隱藏:不佔位置

3.visibility: hidden :佔位置

今日內容

一.浮動的特性:

1.浮動的元素脫標

2.浮動的元素互相貼靠

3.浮動的元素有字圍的效果

4.收縮的效果

margin塌陷問題:

margin:若是不浮動,在標準文檔流下, 垂直方向會出現塌陷問題

margin: 若是浮動了, 垂直方向就不會出現塌陷問題

margin的盒子居中問題, 水平居中:

margin 0 auto; 若是不浮動, 在標準文檔流下,盒子水平居中

margin 0 auto: 若是浮動了, 就不起做用(如何解決: 把浮動盒子放在新加入的隱藏的父盒子裏面)

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
      <style> 
 
          *{ 
 
              padding: 0; 
 
              margin: 0; 
 
          } 
 
          .box1{ 
 
              width: 400px; 
 
              height: 400px; 
 
          } 
 
          /*把浮動盒子放在新加入的隱藏的父盒子裏面, 讓父盒子居中*/ 
 
          .main{ 
 
              width: 100px; 
 
              overflow: hidden; 
 
              margin: 0 auto; 
 
          } 
 
          .box2{ 
 
              width: 100px; 
 
              height: 100px; 
 
              margin: 0 auto;            #子盒子margin這句就沒做用了, 能夠刪掉 
 
              float: left; 
 
          } 
 
      </style> 
 
  </head> 
 
  <body> 
 
  <div class="box1"> 
 
      <div class="main"> 
 
      <div class="box2"></div> 
 
      </div> 
 
  </div> 
 
  </body> 
 
  </html>

文本的水平居中:text-align: center;

文本的垂直居中:行高=盒子的高度

多行文本垂直居中: 算出多行文本的高度, 用padding-top: 頂下來

css中有三種方式讓盒子脫標: 浮動, 絕對定位, 固定定位

二.經常使用css的屬性

1.文本屬性:

文本對齊: text-align: right; (left, center, justify: 兩端對齊,只適用於英文)

首行縮進: text-indent: 2em;

文本修飾: text-decoration: none; #經常使用作清除a標籤默認的下劃線(dicoration: 裝飾)

: text-decoration: underline; #加下劃線

: text-decoration: overline; #加上劃線

: text-decoration: line-through; #加刪除線

: text-decoration: inherit; #繼承父標籤的此屬性(默認text-xxx就是繼承父標籤的,能夠省略)

行高: line-height: 40px;(單行文本居中ling-height=height的值)

2.字體屬性

字體大小: font-size: 16px;

字體粗細: font-weight: 400; (默認400沒有px, 範圍100~900: 400=normal,hold=700)

border:

bold:

normal:

lighter:

inherit:

字體系列: font-family: "華文行楷", "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif;

多個字體用逗號分隔, 表示從前日後在你的電腦上找這些字體, 若是都沒有, 默認是宋體展現

sans-serif: 無襯線 serif: 有襯線

3.綜合設置:

font: 14px/1.5 "華文行楷"

font: 14px/21px "華文行楷" #這兩同樣的效果

4.背景設置:(背景: background)

背景色設置有三種方式:

red;

background-color: rgb(255,0,0); #red green blue(0~255每種顏色都有256個)

background-color: rgba(0,0,0,.5); #透明度 #0,0,0黑色, 255,255,255白色 #.5透明度

background-color: #ff0000; #就是rgb的十六進制表示

background-color: #f00; #兩兩分組, 若是三個小組裏的都同樣, 那麼能夠縮寫

背景圖片設置:

background-image: url(); #默認背景圖填不滿時: 爲平鋪

background-repeat: no-repeat; #不重複, 填不滿那無論; repeat: 這個是默認的; repeat-x: 只橫向平鋪; repeat-y: 只縱向平鋪

background-position: 0 0; #兩個值, x軸和y軸;

background-position-x:0;

background-position-y:0;

background-position: center top; #讓一個大圖在一個頁面頂部居中顯示: center(中心顯示)

用background-position作個截圖: (精靈圖技術: 作圖片的性能優化, 把不少的小圖片放在一張大圖上, 用css的截圖來切你須要的小圖(由於img的src每次都發一次請求, 浪費資源))

圖片大小: 父盒子的寬高來搞

x,y的起始位置: 用background-position:負數; 來搞

background-attachment: fixed; #(附件: 固定) #背景圖固定, 不隨滾輪滾動

background:(綜合屬性: 可以使代碼變少, 簡化代碼)

background: url() no-repeat 0 -162px;

三.定位

有4種:

1.默認是: position:static; 靜態定位

2. position: relative; 相對定位

標準文檔流下的相對定位:

單獨設置盒子的相對定位不會對這個盒子有任何影響

一個盒子有了相對定位屬性:就能夠用top, left, right, bottom屬性

若是兩個相鄰的盒子都有相對定位: 後寫的層級壓蓋權重大; 可是能夠用 z-index: 5; 來調整

不脫標

先要找個參考點: 它的參考點是它原來的位置, 可是它的殼還在原來的地方(形影分離);

做用: 1.層級提升, 能夠作壓蓋, (可是不建議這樣搞)

2.佈局方案, 作子絕父相的參考

3.position: absolute; 絕對定位

非標準文檔流下的絕對定位:

position: absolute;

脫標了; 不佔位置

層級提升了

position: absolute:

top: 0;

left: 0;

css中: 調整層級使用絕對定位

先找個參考點:

單個盒子: 若是以 top描述: 它的參考點是頁面的左上角, 座標軸的(0,0)點

若是以bottom描述: 它的參考點是瀏覽器的最下邊

通常應用: 子絕父相

父盒子設置相對定位

子盒子設置絕對定位, top時, 定位是父盒子的左上角

浮動和定位之間不受影響:

通常大盒子用浮動, 每一個盒子的內部進行定位調整

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
      <style> 
 
          *{ 
 
              padding: 0; 
 
              margin: 0; 
 
          } 
 
          .father{ 
 
              width: 1226px; 
 
              height: 300px; 
 
              position: relative; 
 
              margin: 0 auto; 
 
          } 
 
          .b{ 
 
              position: absolute; 
 
              width: 30px; 
 
              height: 30px; 
 
              line-height: 30px; 
 
              text-align: center; 
 
              color: #fff; 
 
              top: 50%; 
 
              right: 0; 
 
          } 
 
          .a{ 
 
              position: absolute; 
 
              width: 30px; 
 
              height: 30px; 
 
              line-height: 30px; 
 
              text-align: center; 
 
              color: #fff; 
 
              top: 50%; 
 
              left: 0; 
 
          } 
 
      </style> 
 
  </head> 
 
  <body> 
 
      <div class="father"> 
 
          <span class="a"><</span> 
 
          <span class="b">></span> 
 
      </div> 
 
  </body> 
 
  </html>

4.position: fixed; 固定定位

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。