css基礎2

時間 2019-12-14

標籤 css 基礎欄目 CSS 简体版

原文原文鏈接

今天是2019年6月19日星期三，在這裏跟你們分享css基礎的第二部分單位、尺寸、溢出和邊框，下面是詳細的內容，請各位大佬積極改正！css

1、單位html

尺寸單位：
- px（像素）
- cm mm pt
- em：當前字體的大小
- rem：根字體的大小（Html標籤字體的大小）
顏色單位：
- 三基色：紅綠藍 rgb（x1,x2,x3）取值爲0-255
  - rgb（255,0,0）純紅
  - rgb（0，0，0）黑色
  - rgb（255,255,255）白色
- rgba：（x1,x2,x2,a）a表明的是透明度，取值爲0-1之間
  - 0表示全透明
  - 1表示徹底不透明
- 十六進制：#rrggbb
  - #ff0000：正紅色
  - #ffffff：白色
  - #000000：黑色
- 簡寫：當三基色、十六進制每一位的色值兩位的值都是相同的話能夠省略一個值！
  - #aabbcc 能夠縮寫爲 #abc
  - #ff0000 能夠縮寫爲 #f00

2、尺寸屬性字體

寬度屬性：width：寬度單位有px和百分比
- max-width：最大寬度
- min-width：最小寬度
高度屬性：height：高度單位有px和百分比
- max-height：最大高度
- min-height：最小高度
注意：
- 塊元素能夠設置寬高，行內元素不能夠設置寬高
- 快元素寬度默認值是100%
- 高度若是沒有設置，默認值是auto，由內容撐開

3、溢出spa

定義：當咱們給一個元素設置了寬高，若是內容的面積超出了你設置的尺寸的面積，就會產生溢出！溢出屬性定義了元素內容溢出時怎麼處理。
溢出屬性：overflow

visible：可見，默認值
hidden：溢出部分隱藏
scroll：滾動默認顯示滾動條，在內容溢出時可用
auto：自動若是內容沒有溢出，就不顯示滾動條。內容溢出，顯示滾動條並可用。

單向溢出：
- overflow-x：控制x軸方向內容溢出時的處理
- overflow-y：控制y軸方向內容溢出時的處理
注意：當咱們只給一個方向設置溢出屬性時，另外一個方向的值默認是auto。

sample：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>溢出屬性</title>
        <style>
            #box {
                width: 150px;
                height: 150px;
                border: 1px solid #333;
                overflow: hidden;
                /*overflow: scroll;
                overflow: auto;*/
            }
        </style>
    </head>
    <body>
        <div id="box">
            zhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhy
            zhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhyzhy
            zhyzhyzhyzhyzhyzhyzhyzhyzhyzhy
            zhyzhyzhyzhyzhyzhy
        </div>
    </body>
</html>

4、邊框code

邊框屬性：border

值：width style color
- width：寬度單位px
- style：線條樣式
  - solid 實線
  - dotted 虛線實心圓
  - dashed 虛線實心方塊
- color：顏色合法的顏色值

sample：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>邊框</title>
        <style>
            #box {
                width: 400px;
                height: 400px;
                border: 10px solid orange;
                /*border: 10px dotted orange;
                border: 10px dashed orange;*/
            }
        </style>
    </head>
    <body>
        <div id="box">我是div</div>
    </body>
</html>

單方向定義

方向：上下左右（top bottom left right）
格式：border-方向值：同上

sample：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>單項邊框</title>
        <style>
            #box {
                width: 300px;
                height: 300px;
                border-left: 10px solid #666;
                border-top: 10px dotted #456;
                border-right: 10px dashed #000;
                border-bottom:10px dotted #800080;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

單屬性定義：同時控制上下左右四條邊框單屬性

語法：border-屬性：值

sample：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>單邊框</title>
        <style>
            #box {
                width: 300px;
                height: 300px;
                border: 5px solid orange;
                border-color: #FF0000;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

單邊單屬性：border-方向-屬性

sample：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>單邊框單屬性</title>
        <style>
            #box {
                width: 400px;
                height: 400px;
                border: 5px solid #008000;
                border-top-color: #800080;
                border-right-color: #E4393C;
                border-bottom-color: #FFA500;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

注意：
- 邊框顏色除了合法的顏色值以外還能夠是transparent。
- 使用場景：某種狀態下，加上邊框尺寸，致使元素抖動；在變化前加上邊框顏色透明，保證先後狀態尺寸無變化。
邊框組成：邊框是由三角形或者梯形組成

邊框倒角：border-radius

取值：px或者百分比
- 注意：同時控制四個角的角度

單獨定義每一個角的角度：border-垂直方向-水平方向-radius

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>單邊倒角</title>
        <style>
            #box {
                width: 300px;
                height: 300px;
                background: orange;
                border-top-left-radius: 20px;
                border-radius: 5px 20px 40px 100px;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

border-radius：當取值爲四個值時，從左上角開始，順時針旋轉。四個值之間以空格分割！

邊框陰影：box-shadow

值列表：offsetx offsety blur spread color inset
- offsetx：水平偏移距離（必選）
- offsety：垂直偏移距離（必選）
- blur：模糊距離（必選）
- spread：陰影超出面積（默認是0）
- color：陰影顏色（必選）
- inset：外部該內部陰影
推薦經常使用：offsetx offsety blur color；

sample

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>邊框陰影</title>
        <style>
            #box {
                width: 300px;
                height: 300px;
                background: orange;
                box-shadow: 10px 10px 10px rgb(93,145,77);
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

未完，待續！等待下次更新。。。。。。htm

相關標籤/搜索

每日一句

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