前端CSS屬性相關

時間 2019-11-19

標籤前端 css 屬性相關欄目 CSS 简体版

原文原文鏈接

CSS屬性相關

寬和高

width屬性能夠爲元素設置寬度html

height屬性能夠爲元素設置高度瀏覽器

塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定ide

字體屬性

文字字體

body {
 font-family:"Microsoft Yahei","微軟雅黑","Arial",sans-serif
}

字體大小

p {
  font-size:14px;
}

若是設置成了inherit表示繼承父元素的字體大小值佈局

字重(粗細)

font-weight用來設置字體的粗細性能

文本顏色

顏色屬性被用來設置文字的顏色。字體

顏色是經過CSS最常常的指定：網站

　　十六進制如 #FFF000ui

　　一個RGB 如 RGB(255,0,0)url

顏色的名稱如 redspa

還有rgba(255,0,0,0.3) 第四個值爲alpha，制定了色彩的透明度/不透明度,他的範圍爲0~1之間

文字屬性

文字對齊

text-align屬性規定元素中的文本的水平對齊方式

文字裝飾

texr-decoration 屬性用來給文字添加特殊效果

經常使用的去掉a標籤默認的下劃線：

a {
  text-decoration:none;
}

首行縮進

將段落的第一行縮進32像素:

p {
  text-indent:32px;
}

背景屬性

/*背景顏色*/
background-color:red;
/*背景圖片*/
background-image:url('1.jpg')
/*
 背景重複
 repeat(默認):背景圖片平鋪排滿整個網頁
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

簡寫：
background:#336699 url('1.png') no-repeat left top;

使用背景圖片的一個常見案例就是不少網站會把不少小圖標放在一張圖片上，而後根據位置去顯示圖片。減小圖片的請求。

background-attachment屬性這個例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg")  center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

圖片不動

邊框

邊框屬性

#i1 {
    border-width:2px;
    border-style:solid;
    border-color:red;  
}

一般用的簡寫方式：

#i1 {
  border: 2px soild red;
}

邊框樣式

border-radius

用這個屬性能實現圓角邊框的效果

將border-radius設置爲長或高的一半便可獲得一個圓

display屬性

用於控制HTML元素的顯示效果。

display:"none" 與 visibility:hidden的區別：

visibility:hedden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none:能夠隱藏某個元素，但隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來的佔用空間也從佈局上消失。

CSS盒子模型

　　margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隙，從視覺的角度上達到相互隔開的目的。

　　padding:　　用於控制內容與邊框之間的距離.

　　border(邊框):　　圍繞在內邊距和內容外的邊框

　　content（內容）　　盒子的內容，顯示文本和圖像

圖片以下：

margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推薦使用簡寫：

.margin-test {
    margin:5px 10px 15px 20px;
}

順序是：順時針上右下左

常見居中：

.mycenter {
   margin:0 auto;
}

padding內填充

.padding-test {
   padding-top:5px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:20px; 
}

推薦使用簡寫:

.padding-test {
  padding:5px 10px 15px 20px;
}

補充padding的經常使用簡寫方式：

　　提供一個,用於四邊；

　　提供兩個，第一個用於上下，第二個用於左右

　　提供三個，第一個用於上，第二個用於左右第三個用於下

　　提供四個，就是順時針上右下左

float

在CSS中，任何元素均可以浮動。

浮動元素會生成一個塊級框，而不論他自己是何種元素。

關於浮動的兩個特色：

　　浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

　　因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

三種取值

left: 向左浮動

right:向右浮動

none:默認值，不浮動

clear

clear屬性規定元素的哪一側不容許其餘的浮動元素。

注意：clear屬性只會對自身起做用，而不會影響其餘元素

清除浮動

清除浮動的反作用(父標籤塌陷問題)

主要有三種方式：

　　固定高度

　　僞元素清除法

　　overflow:hidden

僞元素清除法(使用較多):

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

overflow溢出屬性

　　overflow(水平和垂直均設置)

　　overflow-x(設置水平方向)

　　overflow-y（設置垂直方向）

定位（position）

static

static 默認值，無定位，不能看成就對定位的參照物，而且設置標籤對象的left,top等值是不起做用的。

relative(相對定位)

相對於標籤自身原來的位置

absolute(絕對定位)

相對於已經定位過的父標籤

但只給你一個父標籤的長寬讓你作定位

fixed(固定定位)

相對於瀏覽器窗口固定在某個位置

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回頂部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>

返回頂部按鈕樣式示例

返回頂部按鈕樣式示例

是否脫離文檔流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1 {
             height: 50px;
            width: 100px;
            background-color: dodgerblue;
        }
        .c2 {
             height: 100px;
            width: 50px;
            background-color: orange;
            position: relative;
            left: 100px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div style="height: 100px;width: 200px;background-color: black"></div>
</body>
</html>

相對定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1 {
            height: 50px;
            width: 100px;
            background-color: red;
            position: relative;
        }
        .c2 {
            height: 50px;
            width: 200px;
            background-color: green;
            position: absolute;
            left: 50px;
        }
    </style>
</head>
<body>
<div class="c1">購物車
    <div class="c2">空空如也~</div>
    <div style="height: 50px;width: 100px;background-color: deeppink"></div>
</div>

</body>
</html>

絕對定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="c1" style="height: 50px;width: 500px;background-color: black"></div>
<div class="c2" style="height: 50px;width: 100px;background-color: deeppink;position: fixed;right: 10px;bottom: 20px"></div>
<div class="c3" style="height: 10px;width: 100px;background-color: green"></div>

</body>
</html>

固定定位

上述例子可知：

脫離文檔流：

　　浮動元素都是脫離文檔流

　　絕對定位

　　固定定位

不脫離文檔流：

　　相對定位

z-index

#i2 {
   z-index:999;  
}

設置對象的層疊順序。

z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

自定義模態框示例