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

最新推荐文章于 2021-02-02 14:19:37 发布

宝拉不想努力了

最新推荐文章于 2021-02-02 14:19:37 发布

阅读量225

点赞数

分类专栏： css 书籍学习笔记

本文链接：https://blog.csdn.net/weixin_41056807/article/details/86708408

版权

书籍学习笔记同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

css

25 篇文章 1 订阅

订阅专栏

一块级元素

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二三事

1.自适应布局
对不需要设置width的元素，直接设置min-width/max-width
2.例如文章会出现的图片由用户上传产生的，这些图片尺寸会有大有小，为了避免图片在移动端展示过大影响体验，常常会有max-width的限制

img{
            max-width: 100%;
            height: auto !important;
        }

3.MDN和W3C维基文档上显示min-width/min-height的初始值为0.但是所有浏览器中的min-width/min-height是auto
4.超越 !important，超越最大
超越 !important：max-width会覆盖width

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        img {
            max-width: 500px;
        }
    </style>
</head>
<body>
<img src="images/1.jpg" style="width:1226px!important;">
</body>
</html>

效果：
在这里插入图片描述

四.内联元素

1.外在盒子有：inline、block、run-in三种水平
2.“内联元素”中“内联”特指“外在盒子”，和display为inline不是同一概念
inline-block和inline-table都是内联元素，因为他们的外在盒子都是“内联盒子”

3.内联元素
button，img，
　* a - 锚点
　　* abbr - 缩写
　　* acronym - 首字
　　* b - 粗体(不推荐)
　　* bdo - bidi override
　　* big - 大字体
　　* br - 换行
　　* cite - 引用
　　* code - 计算机代码(在引用源码的时候需要)
　　* dfn - 定义字段
　　* em - 强调
　　* font - 字体设定(不推荐)
　　* i - 斜体
　　* img - 图片
　　* input - 输入框
　　* kbd - 定义键盘文本
　　* label - 表格标签
　　* q - 短引用
　　* s - 中划线(不推荐)
　　* samp - 定义范例计算机代码
　　* select - 项目选择
　　* small - 小字体文本
　　* span - 常用内联容器，定义文本内区块
　　* strike - 中划线
　　* strong - 粗体强调
　　* sub - 下标
　　* sup - 上标
　　* textarea - 多行文本输入框
　　* tt - 电传文本
　　* u - 下划线
　　* var - 定义变量

4.内联世界深入的基础-内联盒模型

<p>这是一行普通的文字，这里有个 <em>em</em> 标签</p>

在这里插入图片描述
4-1 内容区域：是一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质是一个字符盒子
p标签里面的内容
4-2 内联盒子：不会让内容成块显示，而是成排显示，这里的“内联盒子”实际指元素的外在盒子，用来决定元素是内联还是块级。
这里的em标签就是
4-3行框盒子：每一行就是一个行框盒子，每个行框盒子又是由一个个“内联盒子”组成
如这里的p标签的内容
4-4 包含盒子：由一行行的“行框盒子”组成
如这里的整个p标签