CSS世界-第三章 流、元素與基本尺寸

原創 淡淡的芦苇 2019-02-02 01:42

一 塊級元素

1.HTML標籤分爲兩類：塊級元素，內聯元素
2.常見塊級元素：div，li，table

補充div、p、h1~h6、ul、ol、dl、li、dd、table、hr、
blockquote、address、table、menu、pre，
HTML5新增的header、section、aside、footer等

注意：塊級元素和display=block不是一個概念。裏默認display=list-item，table默認display=table，但他們都是塊級元素。即一個水平線上只能單獨顯示一個元素，多個塊級元素則換行顯示

3.塊級元素有換行的特性。可以配合clear屬性清除浮動帶來的影響
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .box {
            /*盒子中圖片與背景的間隔*/
            padding: 10px;
            background-color: #83c44e;
            border-bottom: 1px solid #2e2e2e;
        }
        .box > img {
            float: left;
        }

        .clear:after {
            content: "";
            /*這裏也可以用block，list-item*/
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
<div class="box clear">
    <img src="images/xmad_14926528960147_wJMsC.png">
</div>
<div class="box clear">
    <img src="images/xmad_14926528960147_wJMsC.png">
</div>
</body>
</html>

在這裏插入圖片描述
注意：要是用display：list-item會多一個前面的圓圈字符

塊級盒子負責結構，內聯盒子負責內容

4.值爲block的元素的盒子實際由外在的“塊級盒子”和內在的“塊級容器盒子”組成，
值爲：inline-block的元素則由外在的“內聯盒子”和內在的“塊級容器盒子”組成，
值爲inline的元素則內外均是“內聯盒子”
inline-block的元素既能和圖文一行顯示，又能直接設置width/height（因爲有兩個盒子，外面盒子是inline級別，裏面盒子是block級別）
外在盒子除了inline-block還有run-in

5.display：inline-table，文字和表格在一行（沒有使用浮動的情況）
代碼：
正常情況下：

和文字平起平坐的表格：<div class="inline-table">
    <p>第1列</p>
    <p>第2列</p>
</div>

在這裏插入圖片描述
增加display：inline-table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .inline-table {
            display: inline-table;
            width: 128px;
            margin-left: 10px;
            border: 1px solid #cad5eb;
        }
        .inline-table > p {
            display: table-cell;
        }
    </style>
</head>
<body>
和文字平起平坐的表格：<div class="inline-table">
    <p>第1列</p>
    <p>第2列</p>
</div>
</body>
</html>

在這裏插入圖片描述

二.width/height作用在哪個盒子上

1.塊級元素的流體特性主要體現在水平方向上
2.width默認auto
3.限制（收縮到最小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        table {
            width: 280px;
            margin: 0 auto;
            text-align: left;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>就1列就1列就1列就1列就1列</td>
        <td>當父級relative，且寬度很小的時候，例如{position:relative; width:20px;}，absolute元素也會出現一柱擎天的情況；</td>
        <td>當父級relative，且寬度很小的時候，例如...</td>
    </tr>
</table>
</body>
</html>

在這裏插入圖片描述
4.超出容器限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .father {
            width: 150px;
            padding: 10px;
            background-color: #cd0000;
            white-space: nowrap;
        }
        .child {
            display: inline-block;
            padding: 5px;
            background-color: #f0f3f9;
        }
    </style>
</head>
<body>
<div class="father">
    <span class="child">恰如一江春水向東流，流到斷崖也不回頭</span>
</div>
</body>
</html>

在這裏插入圖片描述

5.a標籤默認是display：inline，設置爲block使其塊狀化也就不用寫width：100%。
外部尺寸與流體特徵：
（1）正常流寬度
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .width {
            width: 100%;
        }

        .nav {
            background-color: #cd0000;
        }

        .nav-a {
            text-decoration: none;
            display: block;
            margin: 0 10px;
            padding: 9px 10px;
            border-bottom: 1px solid #b70000;
            border-top: 1px solid #de3636;
            color: #fff;
        }

        .nav-a:first-child {
            border-top: 0;
        }

        .nav-a + .nav-a + .nav-a {
            border-bottom: 0;
        }
    </style>
</head>
<body>
<h4>無寬度，藉助流動性</h4>
<div class="nav">
    <a href="" class="nav-a">導航1</a>
    <a href="" class="nav-a">導航2</a>
    <a href="" class="nav-a">導航3</a>
</div>
<h4>width:100%有尺寸超出的問題</h4>
<div class="nav">
    <a href="" class="nav-a width">導航1</a>
    <a href="" class="nav-a width">導航2</a>
    <a href="" class="nav-a width">導航3</a>
</div>
</body>
</html>

在這裏插入圖片描述
（2）格式化寬度
僅出現在“絕對定位模型”中，也就是出現在position屬性值爲absolute或fixed中。
格式化寬度具有完全的流體性，也就是margin，border，padding，content內容區域會自動分配水平（和垂直）空間

6.內部尺寸與流體特性
6-1（包裹性）
自適應性：是指元素尺寸由內部元素決定，但永遠小於“包含塊”容器的尺寸。
包裹性元素中 max-width：100%
按鈕是css世界中極具代表性的inline-block元素，極具有包裹性，具體表現：按鈕文字越多寬度越寬（內部尺寸特性），但若文字過多，則會在容器的寬度處自動換行。

只有<button>才能自動換行，<input>不能換行

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .box {
            width: 240px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="box">
    <button>按鈕</button>
</div>
<div class="box">
    <button>文字再多一點</button>
</div>
<div class="box">
    <button>按鈕是css世界中極具代表性的inline-block元素，極具有包裹性，具體表現：按鈕文字越多寬度越寬（內部尺寸特性）</button>
</div>
</body>
</html>

在這裏插入圖片描述

代碼：增加js功能每次點擊按鈕 按鈕的內容會增加！！，隨寬度會自動換行！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .box {
            padding: 10px;
            background-color: #eee;
            text-align: center;
        }
        .content {
            display: inline-block;
            text-align: left;
        }
    </style>
</head>
<body>
<div class="box">
    <p id="conMore" class="content">文字內容</p>
</div>
<!-- 按鈕 -->
<p><button id="btnMore">更多文字</button></p>
</body>
<script>
    var btn = document.getElementById('btnMore'),
        content = document.getElementById('conMore');

    if (btn && content) {
        btn.onclick = function() {
            content.innerHTML += '-新增文字';
        };
    }
</script>
</html>

初始狀態
在這裏插入圖片描述

點擊按鈕之後的狀態
在這裏插入圖片描述
注意：除了inline-block元素，浮動元素以及絕對定位元素都具有包裹性，均具有類似的智能寬度

6-2首選最小寬度，是元素最適合的最小寬度。
類似圖片這樣的替換元素的最小寬度就是該元素內容本身的寬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .ao, .tu {
            display: inline-block;
            width: 0;
            font-size: 14px;
            line-height: 18px;
            margin: 35px;
            color: #fff;
        }
        .ao:before, .tu:before {
            outline: 2px solid #cd0000;
            font-family: Consolas, Monaco, monospace;
        }
        .ao:before {
            content: "love你love";
            color: #0c80dc;
        }
        .tu {
            direction: rtl;
        }
        .tu:before {
            content: "我love你";
            color: green;
        }
    </style>
</head>
<body>
<span class="ao"></span>
<span class="tu"></span>
</body>

</html>

在這裏插入圖片描述

6-3 最大寬度
若內部沒有塊級元素或者塊級元素沒有設定寬度值，則“最大寬度”實際上是最大的連續內聯盒子的寬度
br處換行，即不再連續

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>

    </style>
</head>
<body>
    <div>
        "I am word!"
        <span>我在inline標籤內</span>
        <button>我是按鈕</button>
        <img src="images/5Battery1.jpg" alt="我是圖片">
        <br>
        "I am next word!"
        <p>我是一段描述</p>
    </div>
</body>

</html>

在這裏插入圖片描述

IScroll實現平滑的滾動效果
引入iscroll.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .wrap {
            width: 300px; height: 320px;
            position: relative;
            overflow: hidden;
        }
        .wrap > ul {
            position: absolute;
            white-space: nowrap;
        }
        .wrap li {
            display: inline-block;
        }
    </style>
    <script src="iscroll.js"></script>
</head>
<body>
<div id="wrap" class="wrap">
    <ul>
        <li><img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png"></li>
        <li><img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png"></li>
        <li><img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png"></li>
        <li><img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png"></li>
        <li><img src="images/5e2eb710-a99f-4235-ac5c-1b20b1e6c3b6.png"></li>
    </ul>
</div>
</body>
<script>
    new IScroll('#wrap', {
        scrollbars: true,
        scrollX: true,
        scrollY: false
    });
</script>
</html>

實現滑動效果
在這裏插入圖片描述

7.width值作用的細節
width作用在內在盒子，內在盒子分成4個（content-box，padding-box，border-box，margin-box）

width：100px作用在content-box上，
由於div元素的默認padding、border、margin都是0，
因此div呈現的寬度就是100px

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .div {
            width: 100px;
            padding: 20px;
            border: 20px solid;
            margin: auto;
        }
    </style>
    <script src="iscroll.js"></script>
</head>
<body>
<div class="div">
    此時元素的offsetWidth是：<span id="divWidth"></span>
</div>
</body>
<script>
    var eleShowWidth = document.getElementById('divWidth');
    if (eleShowWidth) {
        eleShowWidth.innerHTML = eleShowWidth.parentNode.offsetWidth;
    }
</script>
</html>

在這裏插入圖片描述

在這裏插入圖片描述

在這裏插入圖片描述

在這裏插入圖片描述

8.CSS流體佈局下的寬度分離原則

寬度分離原則就是css中的width屬性不與影響寬度的padding、border和margin
寫法：分離，width 獨佔一層標籤，而padding、border、margin利用流動性在內部自適應呈現

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
       .father{
           width: 180px;
       }
        .son{
            margin: 0 auto;
            padding: 20px;
            border: 1px solid ;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

在這裏插入圖片描述

在這裏插入圖片描述

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .container {
            width: 280px;
            margin: 0 auto;
            padding: 40px 0;
            background-color: #f0f3f9;
            animation: width 2s infinite alternate;
        }

        @keyframes width {
            from { width: 200px; }
            to { width: 280px; }
        }

        .textarea {
            padding: 9px 8px;
            border: 1px solid #d0d0d5;
            border-radius: 4px;
            background-color: #fff;
        }

        .textarea > textarea {
            width: 100%;
            line-height: 20px;
            padding: 0;
            border: 0 none;
            outline: 0 none;
            background: none;
            resize: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="textarea">
        <textarea rows="2" placeholder="色塊是容器"></textarea>
    </div>
</div>
</body>
</html>

在這裏插入圖片描述

在這裏插入圖片描述

9.box-sizing被髮明出來最大的初衷是解決替換元素寬度自適應問題
10.height：auto也有外部尺寸特性，僅存在於絕對定位中，也就是“格式化高度”，與格式化寬度類似。
11.height：100%是無效的，width：100%纔有效
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .box {
            display: inline-block;
            white-space: nowrap;
            background-color: #cd0000;
        }
        .text {
            display: inline-block;
            width: 100%;
            background-color: #34538b;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/xmad_14926528960147_wJMsC.png">
    <span class="text">紅色背景是父級</span>
</div>
</body>
</html>

在這裏插入圖片描述

12.想讓height：100%有效的方法

  • 設定顯式的高度值
  • 使用絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .box {
            height: 160px;
            padding: 30px;
            box-sizing: border-box;
            background-color: #beceeb;
            /*border-bottom: 1px solid #0c80dc;*/
        }
        .child {
            height: 100%;
            background: #cd0000;
        }
        .rel {
            position: relative;
        }
        .rel > .child {
            width: 100%;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child">高度100px</div>
</div>
<div style="margin-top: 10px"></div>
<div class="box rel">
    <div class="child">高度160px</div>
</div>
</body>
</html>

在這裏插入圖片描述

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .box {
            display: inline-block;
            position: relative;
        }
        .prev,
        .next {
            width: 50%; height: 100%;
            position: absolute;
            top: 0;
            opacity: .5;
            color: black;
            text-decoration: none;
            font-size: 2rem;
        }
        .prev {
            left: 0;
            background-color: #cd0000;
        }
        .next {
            right: 0;
            background-color: #34538b;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="javascript:" class="prev" title="上一張">上一張</a>
    <a href="javascript:" class="next" title="下一張">下一張</a>
    <img src="images/xmad_14926528960147_wJMsC.png">
</div>
</body>
</html>

在這裏插入圖片描述

三.CSS min-width/max-width和min-height/max-height二三事

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

[轉]css父元素背景覆蓋其子元素背景， 正常一般是子元素的背景會覆蓋父元素的背景

原文：https://www.cnblogs.com/zouqin/p/5498495.html 問題： 怎麼實現 父元素的背景覆蓋子元素的背景呢？   ———————————————————————————— <!DOCTYPE htm

牛頓的小腦 2020-11-17 13:54:11

html+css 選項卡

  <style type=text/css>td {   font-size: 12px;  color: #000000;  line-heig

bluelazyboy 2020-07-08 12:23:28

position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）

絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie

ddx2019 2020-07-08 11:55:42

css每日一報（自己積累平時寫法）

1、pc端共用的樣式： *{padding:0px;margin:0px;outline:0 none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-s

空手走-web 2020-07-08 11:54:55

vue開發的手機購物商城APP東京大藥房(帶數據庫，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

qq_36824777 2020-07-08 11:50:38

原生JS實現樹狀結構列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始數據結構  原始數據

wendZzz 2020-07-08 11:27:37

web前端複習第七課

                                           二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

思丰百年 2020-07-08 10:46:31

網頁設計中常見的兼容性問題

常見兼容性問題 1、png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8. 2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的 *{margin:0;padding:0;}來統一。 3、IE6

LFWMP 2020-07-08 10:28:29

CSS預處理器和後處理器

css預處理器 一、什麼是css預處理器？ CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增加了一些編程的特性，將CSS作爲目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS

我的绝伦大人 2020-07-08 09:19:30

css剩餘部分

一、link和@import的區別 頁面中引入的方式有三種： 1.在行內定義style屬性 2.頁面頭部內嵌<style>標籤 3.通過link和@import鏈接樣式表 <link rel="styles

我的绝伦大人 2020-07-08 09:19:30

HTML+css做炫酷的3d盒子反轉

3d盒子反戰 效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

文情战 2020-07-08 09:12:55

幾個簡單的css動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi

哀木i 2020-07-08 08:40:28

css消息數量，圓圈數字，購物車數量。

  html:  <a href="index.html" class="nav">未讀留言<div class="nav-counter nav-counter-blue">4</div></a> css:  .nav{

blueBings 2020-07-08 07:33:49