1. 程式人生 > >10.8 10.9知識點

10.8 10.9知識點

方向 自己 pad 基本 display 連續 pla abs slide

10.8

1.去滾動條的屬性 overflow:hidden;

overflow-x:hidden; 水平超出的隱藏。

2.z-index 層次疊加 元素重疊 誰的值大誰在上面

  (1) 父級出現position:relative;時候z-index失效

  (2) 層疊元素出現float的時候會失效

  (3) 層疊元素也得設置position:absolute/fixed.

3.background-position:100px 300px;

Background-position:0% 50%; 50% 0;

Background-position:center center;

4.absolute 絕對定位

  使用這個屬性之後,這個元素不會占位了,脫離標準文檔流,同時元素本身也變成了行級塊元素。往往需要設置width為100%;

5.marquee 滾動標簽

  他身上所具有的功能有標簽屬性決定。

  Direction 決定滾動方向 默認是left right up down

  Behavior 決定滾動的方式 scroll連續滾 slide 滾動一次 alternate 來回滾動

  Loop 循環的次數 默認是無數次

  Scrollamount 運動速度 默認是6

  Scrolldelay 表示停頓的時間 單位是毫秒 1秒=1000毫秒

  Aligin 元素的垂直對齊方式 top middle bottom

  Width height 表示區域的大小

  Hspace vspace 表示元素在區域邊界的水平距離和垂直距離

10.9

一 單位

  1.px 就是一個基本的單位 像素

  2.em 也是一個單位 用父級元素的字體大小乘以em前面的數字。如果父級沒有就繼承上一個父級直到body,如果body沒有那就默認是16px。

  3.rem 也是一個單位,只跟根節點<html>的字體大小有關,如果沒有默認是16px。

  4.line-height 行高 line-height:2; 行高值 是當前數字2乘以元素字體大小。

二 瀏覽器

  瀏覽器和瀏覽器之間是由差距的,這個差距是由瀏覽器自身的內核決定的。

  每個瀏覽器都有自己的前綴,主要解決css3中的兼容問題。

  Chrome(谷歌) 的前綴 -webkit-

  Firefox(火狐) 的前綴 -moz-

  Ie 的前綴 -ms-

  Opera(歐朋) 的前綴 -o-

  國內的瀏覽器的內核是谷歌。

三 布局

  1. 流式布局 float+margin
  2. 定位
  3. 雙飛翼
  4. 聖杯
  5. 彈性盒子布局 移動端布局

    全稱叫彈性和模型:是由父級的彈性容器和子級的彈性子元素兩者構造。

    Display:flex;這個屬性決定誰是彈性容器,他裏面的子元素就是彈性子元素。

    Flex 是彈性子元素在彈性容器中所占的份數。屬性值是數字

  6.表格布局

  7.box-sizing:border-box;這個屬性 讓元素的實際寬度就等於設置width,即便有了padding和border只會向內擠壓,元素的可利用空間變小。

10.8 10.9知識點