CSS世界-第四章盒尺寸四大家族

最新推荐文章于 2019-07-27 16:14:52 发布

宝拉不想努力了

最新推荐文章于 2019-07-27 16:14:52 发布

阅读量637

点赞数

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

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

版权

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

37 篇文章 0 订阅

订阅专栏

css

25 篇文章 1 订阅

订阅专栏

盒尺寸的4个盒子：content box，padding box，border box，margin box

一深入理解 content

1.根据可替换性把元素分为替换元素和非替换元素

<img src="../img/flower1.jpg" alt="">

这种把src更改了，图片改变的。之后呈现的内容就可以替换的元素称为“替换元素”
img,object,video,iframe或者表单元素textarea和input都是典型的替换元素（还有下拉框select是替换元素）

2.替换元素除了内容可替换这一特性还有的特性

内容的外观不受页面上的css的影响
有自己的尺寸
在很多css属性上有自己的一套表现原则
3.所有替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以显示在一行的。但是替换元素默认的display值却是不同的。

4.input标签和button按钮标签的区别地方：两种按钮默认的white-space值不一样，前者pre，后者normal，所表示出来的现象差异就是：当按钮文字足够多的时候，input按钮不会自动换行，button可以。

5.替换元素的尺寸分类（从内到外）：固有尺寸，HTML尺寸，CSS尺寸

固有尺寸：替换内容原本的尺寸（如图片、视频作为一个独立文件存在的时候，都有自己的宽度和高度）
HTML尺寸：只能通过HTML原生属性改变，这些HTML原生属性包括<img>的width和height属性、input的size属性、textarea的cols和rows属性

<img width="300" height="100">
<input type="file" size="30">
<textarea cols="30" rows="10"></textarea>

CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content box

规则

1-1. 若没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高。

<img src="1.jpg" alt="">图片的宽高就是这个原尺寸

1-2. 若没有CSS尺寸则使用HTML尺寸作为最终的宽高

<img src="1.jpg" alt="" width="100" height="100">通过设置width和height限制图片HTML尺寸

1-3. 若有CSS尺寸，则最终尺寸由CSS属性决定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson-1</title>
    <style>
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<img src="1.jpg" alt="" width="100" height="100">
</body>
</html>

此时图片呈现的是CSS样式 200*200
1-4. 若“固有尺寸”含有固有的宽高比例，同时仅设置宽度或仅设置高度，则元素依然按照固有的宽高比例显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson-1</title>
    <style>
        img{
            width: 200px;
        }
    </style>
</head>
<body>
<img src="1.jpg" >
</body>
</html>

原图片宽高 256*192
现在只设置宽度200，则256/192=200/高，高 = 150px
1-5. 若上面的条件都不符合，则最终宽度表现为300像素，高度为150像素，宽高比2:1，例如<video></video>
1-6. 内联替换元素和块级替换元素使用上面同一套尺寸计算规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson-1</title>
    <style>
        img{
            display: block;
        }
    </style>
</head>
<body>
<img src="1.jpg" >
</body>
</html>

虽然此时img变为块级元素，但是尺寸规则还是和内联状态下一致，因此，图片呈现的宽高为256px*192px。这也是为何图片以及其他表单类替换元素设置display：block 宽度却没有100% 容器的原因

6.web开发的时候，为了提高加载性能以及节约带宽费用，首屏以下的图片就会通过滚屏加载的方式异步加载，然后，这个即将被异步加载的图片为了布局稳健、体验良好，往往会使用一张透明的图片占位。
实际上，这个透明的占位图片也是多余的资源，直接写.

配合css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson-1</title>
    <style>
        img{
            visibility: hidden;
        }
        img[src]{
            visibility: visible;
        }
    </style>
</head>
<body>
<img>
</body>
</html>

这里img没有src属性，再强调一遍！！！是直接没有，不是src="",src=""在很多浏览器下依然会有请求而且请求的是当前页面数据，当图片的src属性缺省的时候，图片不会有任何请求，是最高效的实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        img{
            width: 200px;
            height: 150px;
        }
        /*解决在Firefox浏览器纹丝不动仍是默认图片尺寸*/
        img{
            display: inline-block;
        }
    </style>
</head>
<body>
<img >
</body>
</html>

在这里插入图片描述
同理：span标签设置display: inline-block;就可以设置宽高了。
8.CSS世界中的替换元素的固有尺寸有一个很重要的特性，那就是“我们是无法改变这个替换原色内容的固有尺寸。平时的图片尺寸是“默认的宽高设置会覆盖固有尺寸””

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        div:before {
            content: url(images/1.jpg);
            display: block;
            width: 200px; height: 200px;
        }
    </style>
</head>
<body>

<div></div>
</body>
</html>

在这里插入图片描述
CSS世界中,图片资源的固有尺寸是无法改变的！

9.尺寸变化的本质并不是改变固有尺寸，而是采用填充作为适配HTML尺寸和CSS尺寸的方式，且在CSS3之前，此适配方式是不能修改的
10. css3 object-fit属性详细理解object-fit属性
11. img（本身为替换属性）的src属性去掉后，就和span类似的普通的内联标签，也就是一个非替换元素。img还有一个alt属性可以提供描述信息，但由于视觉效果不好被隐藏掉了
12. 基于伪元素的图片内容生成技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        img {
            display: inline-block;
            width: 256px; height: 192px;
            /* 隐藏Firefox alt文字 */
            color: transparent;
            position: relative;
            overflow: hidden;
        }
        img:not([src]) {
            /* 隐藏Chrome alt文字以及银色边框 */
            visibility: hidden;
        }
        img::before {
            /* 淡蓝色占位背景 */
            content: "";
            position: absolute; left: 0;
            width: 100%; height: 100%;
            background-color: #f0f3f9;
            visibility: visible;
        }
        img::after {
            /* 黑色alt信息条 */
            content: attr(alt);
            position: absolute;
            left: 0; bottom: 0;
            width: 100%;
            line-height: 30px;
            background-color: rgba(0,0,0,.5);
            color: white;
            font-size: 14px;
            transform: translateY(100%);
            /* 来点过渡动画效果 */
            transition: transform .2s;
            visibility: visible;
        }
        img:hover::after {
            transform: translateY(0);
        }
    </style>
</head>
<body>
<img alt="。。。笔记本。。。" data-src="images/5.jpg">
<p style="margin-top: 40px"><button>设置src属性显示图片</button></p>
<script>
    var eleButton = document.querySelector('button'),
        eleImg = document.querySelector('img');

    if (eleButton && eleImg) {
        var initValueButton = eleButton.innerHTML;
        // 图片地址
        var srcImage = eleImg.getAttribute('data-src');
        // 移除该属性
        eleImg.removeAttribute('data-src');
        // 按钮点击事件
        eleButton.addEventListener('click', function() {
            if (this.innerHTML == initValueButton) {
                this.innerHTML = '移除src属性';
                // 图片显示
                eleImg.setAttribute('src', srcImage);
            } else {
                this.innerHTML = initValueButton;
                // src属性移除
                eleImg.removeAttribute('src');
            }
        });
    }
</script>
</body>
</html>

在这里插入图片描述
鼠标滑过

点击按钮

13. content和src效果类似都是展示图片资源

    <img src="1.jpg">
    等效于
    <img>
    img:not([src]) {
        content: url(1.jpg);
    }

content可以把原图片src地址更换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .emoji:hover {
            content: url(images/553s80.png);
        }
    </style>
</head>
<body>
<img class="emoji" src="images/653s80.png">
</body>
</html>

在这里插入图片描述
鼠标滑过

15. content可以覆盖文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        h1 {
            content: url(images/553s80.png);
        }
    </style>
</head>
<body>
<h1>《CSS世界》</h1>
</body>
</html>

在这里插入图片描述
16. content和替换元素关系剖析
把content属性生成的对象称为“匿名替换对象”，被content替换的仅仅是视觉层。
content动态生成值无法获取。content是CSS属性，其中一个强大之处是 “计数器”效果，可以自动累加数值。
数字翻动效果object-position，object-fit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .box {
            width: 216px;
            padding: 10px;
            border: 10px solid #cd0000;
            margin: auto;
        }
        .box:empty {
            border-style: dashed;
        }
        /*.box:after {*/
            /*content: "伪元素生成内容";*/
        /*}*/
    </style>
</head>
<body>
<h4>有内容</h4>
<div class="box">有内容</div>
<h4>无内容</h4>
<div class="box"></div>
<h4>空格也算内容</h4>
<div class="box"> </div>
<h4>伪元素不算内容</h4>
<div class="box pseudo"></div>
</body>
</html>

在这里插入图片描述
17. content内容生成技术
content属性几乎用在：：before/：：after这两个伪元素中，因此“content内容生成技术”有时被称为“：：before/：：after伪元素技术”
此应用的核心不在于content生成的内容，而是伪元素本身。通常，我们会把content的属性设置为空字符串

.el :before{
            content: '';
        }

应用：“两端对齐”以及“垂直居中/上边缘/下边缘对齐”
演示-一个自动等宽布局且底部对齐的柱状图，默认4项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .box {
            width: 256px;
            height: 256px;
            border-bottom: 1px dashed #ccc;
            text-align: justify;
        }
        .box:before {
            content: "";
            display: inline-block;
            height: 100%;
        }
        .box:after {
            content: "";
            display: inline-block;
            width: 100%;
        }
        .bar {
            display: inline-block;
            width: 20px; height: 0;
        }
    </style>

</head>
<body>
<div id="box" class="box"><i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
</div>
<p><button id="button">再增加一条数据</button></p>
<script>
    if (document.querySelector) {
        var eleBox = document.getElementById('box');
        // 目前柱子元素和个数
        var eleBars = document.querySelectorAll('#box > i');
        var lenBar = eleBars.length;
        if (eleBox && lenBar) {
            for (var indexBar = 0; indexBar < lenBar; indexBar += 1) {
                // 柱形图的柱子高度和背景色随机
                eleBars[indexBar].style.height = Math.ceil(256 * Math.random()) + 'px';
                eleBars[indexBar].style.backgroundColor = '#' + (Math.random() + '').slice(-6);
            }
        }

        // 增加数据
        var eleBtn = document.getElementById('button');
        if (eleBtn && lenBar) {
            eleBtn.onclick = function() {
                // 随机高度和背景色
                var height = Math.ceil(256 * Math.random()) + 'px';
                var backgroundColor = '#' + (Math.random() + '').slice(-6);

                // 创建柱子元素
                var eleClone = eleBars[0].cloneNode();

                eleClone.style.height = height;
                eleClone.style.backgroundColor = backgroundColor;

                // 此处的字符替换为了兼容IE8下的演示效果
                eleBox.innerHTML = eleBox.innerHTML.replace(/I><I/ig, 'I> <I') + ' ' + eleClone.outerHTML;

                lenBar+=1;
                // 最多10条数据
                if (lenBar == 10) {
                    this.setAttribute('disabled', 'disabled');
                }
            };
        }
    }
</script>
</body>
</html>

在这里插入图片描述
实现原理：：before伪元素用于辅助实现底对齐，：after伪元素用于辅助实现两端对齐。
18. content字符内容生成
content字符内容生成是直接写入字符内容，中英文都可以，比较常见的应用就是配合@font-face 规则实现图标字体效果

icomoon图标的使用
 content字符生成与自定义图标字体实例页面
content字符生成强大之处就在于不仅普通字符随便插，Unicode字符也不在话下。
具体作用：换行
animation用来实现字符动画效果，动态加载页面内容的时候，使用“正在加载中…”
利用“\A”换行特性让“…”动起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        dot {
            display: inline-block;
            height: 1em;
            line-height: 1;
            text-align: left;
            vertical-align: -.25em;
            overflow: hidden;
        }
        dot::before {
            display: block;
            content: '...\A..\A.';
            white-space: pre-wrap;
            animation: dot 3s infinite step-start both;
        }
        @keyframes dot {
            33% { transform: translateY(-2em); }
            66% { transform: translateY(-1em); }
        }
    </style>
</head>
<body>
正在加载中<dot>...</dot>
</body>
</html>

在这里插入图片描述
解释：

dot标签是自定义标签，除了简约、语义化外，更重要的是方便向下兼容。
伪元素使用 ：：before同时display：block，是为了在高版本浏览器下原来的3个点推到最下面，不会影响content的3行内容显示，若使用 ：：after怕是效果就很难实现。
white-space: pre-wrap;和white-space: pre;相同
小技巧：‘\A’是不区分大小写的；其次‘\D’也能实现换行效果，但是想上下对齐，需要用在：：before伪元素上

content图片生成：直接用url功能符显示图片

div:before{
     content: url("img/flower1.jpg");
}

url功能符中的图片地址可以是png，jpg，ico，svg文件以及base64URL地址，但是不支持CSS3渐变背景图
22. 只有不需要控制尺寸的图片才用content生成图片，所有能用的图片不多！
23. content图片生成技术实现新标签页链接标示的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            text-decoration: underline;
            color: #cd0000;
        }
        a[target="_blank"]:after {
            content: url(data:image/gif;base64,R0lGODlhBQAFAIABAM0AAAAAACH5BAEAAAEALAAAAAAFAAUAAAIHRIB2eKuOCgA7);
        }
    </style>
</head>
<body>
<p>下面这段话所有链接地址都是本实例。</p>
<p>点击
    <a href="">这个链接</a>
    当前页刷新，看看有没有标记；点击
    <a href="" target="_blank">这个链接</a>
    ，新标签页新打开一次本页面，看看有没有标记。
</p>
</body>
</html>

在这里插入图片描述
24. content支持的属性值中有一对不常用的open-quote开启引号和close-quote闭合引号

 q:before{
    content: '"';
}
q:after{
   content: '"';
}

css世界中有一个名为quotes的属性就是指定open-quote和close-quote具体是什么
quotes引号，实际功能是：我们可以指定几乎任意的字符，而且是任意数量的字符。
open-quote和close-quote看成是一种变量，理论上，这种设计要比直接字符输出更好维护，其原理更好维护，其原理等同于JavaScript中的变量

<script>
    var quotes = ['"','"'];
    var openQuote = quotes[0];
    var closeQuote = quotes[1];
</script>

content attr属性值内容生成

img::after{
   /*生成alt信息*/
   content: attr(alt);
}
.icon:before{
     content: attr(data-title);
}

attr功能中的属性值名称不能有引号

深入content计数器
CSS计数器2个属性（content-reset计数器重置和counter-increment）和一个方法（counter（）和/counters（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .counter {
            counter-reset: wangxiaoer 2;
            font-size: 32px;
            font-family: Arial Black,serif;
            color: #cd0000;
        }
        .counter:before {
            content: counter(wangxiaoer);
        }
    </style>
</head>
<body>
<p>我叫王小二，字如其名，下面要出现的数字是：</p>
<p class="counter"></p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .counter {
            counter-reset: wangxiaoer 2 wangxiaosan 3;
            font-size: 32px;
            font-family: Arial black;
            color: #cd0000;
        }
        .counter:before {
            content: counter(wangxiaoer);
        }
        .counter:after {
            content: counter(wangxiaosan);
        }
    </style>
</head>
<body>
<p>我叫王小二，万万没想到，会出现另外一个数字：</p>
<p class="counter"></p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .counter {
            counter-reset: wangxiaoer 2;
            counter-increment: wangxiaoer;
            font-size: 32px;
            font-family: Arial black,serif;
            color: #cd0000;
        }
        .counter:before {
            content: counter(wangxiaoer);
        }
        
    </style>
</head>
<body>
<p>我本名王小二，万万没想到，我现在居然成了王小...</p>
<p class="counter"></p>
</body>
</html>

在这里插入图片描述
这里counter-reset值增加，默认递增1，余数计数从设置的初始值2变为3，wangxiaoer就是这里的计数器，自然伪元素content（wangxiaoer）就是3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .counter {
            counter-reset: wangxiaoer 2;
            counter-increment: wangxiaoer;
            font-size: 32px;
            font-family: Arial black,serif;
            color: #cd0000;
        }
        .counter:before {
            content: counter(wangxiaoer);
            counter-increment: wangxiaoer;
        }
    </style>
</head>
<body>
<p>我叫王小二，万万没想到，我现在居然成了王小...</p>
<p class="counter"></p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .counter {
            counter-reset: wangxiaoer 2;
            font-size: 32px;
            font-family: Arial black,serif;
            color: #cd0000;
        }
        .counter:before,
        .counter:after {
            content: counter(wangxiaoer);
            counter-increment: wangxiaoer;
        }
    </style>
</head>
<body>
<p>我叫王小二，万万没想到，兄弟情深，计数递增！</p>
<p class="counter"></p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .counter {
            counter-reset: wangxiaoer 2;
            font-size: 32px;
            font-family: Arial black,serif;
            color: #cd0000;
        }
        .counter:before,
        .counter:after {
            display:block;
            content: counter(wangxiaoer, lower-roman);
            counter-increment: wangxiaoer;
        }
    </style>
</head>
<body>
<p>我叫王小二，万万没想到，我变成了罗马人！</p>
<p class="counter"></p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .counter {
            counter-reset: wangxiaoer 2 wangxiaosan 3;
            font-size: 32px;
            font-family: Arial black,serif;
            color: #cd0000;
        }
        .counter:before {
            content: counter(wangxiaoer) '\A' counter(wangxiaosan);
            white-space: pre;
        }
    </style>
</head>
<body>
<p>我叫王小二，万万没想到，我还有一个兄弟！</p>
<p class="counter"></p>
</body>
</html>

在这里插入图片描述

content计数值的那个DOM元素在文档流中的位置一定要在counter-increment元素后面，否则没有计数效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .reset {
            padding-left: 20px;
            counter-reset: wangxiaoer;
        }
        .counter:before {
            content: counters(wangxiaoer, '-') '. ';
            counter-increment: wangxiaoer;
        }
    </style>
</head>
<body>
<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述
27. content内容生成的混合特性

若希望在伪元素中同时显示图片和文字排列效果，只需要一个：before或者一个：after就可以，完全不需要两个同时上阵、分别负责一个类型

二.温和的padding属性

1.padding指盒子的内补间

width=padding+width

内联元素的padding在垂直方向同样会影响布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            padding: 50px;
            background-color: #cd0000;
            color: #fff;
        }
    </style>
</head>
<body>
<a href="">链接</a>
</body>
</html>

在这里插入图片描述
没有padding的时候

2.css中还有很多其他场景或属性会出现这种不影响其他元素布局而是出现层叠现象。比如，relative元素的定位、盒阴影box-shadow以及outline等。这些层叠分两种：①纯视觉层叠，不影响外部尺寸（box-shadow，outline）②会影响外部尺寸（inline，padding）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h3{
            line-height: 30px;
            font-size: 14px;
        }
        h3>span{
            padding-top: 58px;
        }
        既不影响原来布局和定位，同时#hash定位位置往下移动50px
    </style>
</head>
<body>
<h3><span id="hash">Title</span></h3>
</body>
</html>

在这里插入图片描述
3.padding百分比值
padding和margin属性不同，padding属性不支持负值，padding支持百分比值，但是height等属性的百分比计算规则有些差异，差异在于：padding百分比值无论水平方向还是垂直方向均相对宽度计算

改变浏览器宽度即可感受等比例的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            padding: 10% 50%;
            position: relative;
        }
        .box > img {
            position: absolute;
            width: 100%; height: 100%;
            left: 0; top: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img/flower1.jpg">
</div>
</body>
</html>

在这里插入图片描述

4.标签元素内置的padding

ol、ul列表内置padding-left，但是单位px不是em。
很多表单元素都内置padding （input和textarea输入框内置padding，button内置padding，select下拉内置padding，radio/CheckBox单复选框无内置padding。其中button的padding最难控制）
在表单中，有时候按钮是自带交互行为的，这是a标签无法模拟的

使用label：label元素的for属性要和button的id值对应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            position: absolute;
            clip: rect(0 0 0 0);
        }
        label{
            display: inline-block;
            line-height: 20px;
            padding: 10px;
        }
    </style>
</head>
<body>
<button id="btn"></button>
<label for="btn">按钮</label>
</body>
</html>

在这里插入图片描述

三.激进的margin属性

1.margin可以改变元素的可视尺寸，因为只要宽度设定，margin就无法改变元素尺寸，这和padding是不一样的。无论垂直方向还是水平方向，都可以通过margin改变大小

图片左侧定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            overflow: hidden;
        }
        .box > img{
            float: left;
        }
        .box > p{
            margin-left: 140px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img/flower1.jpg" alt="" width="200">
    <p>文字内容...</p>
</div>
</body>
</html>

在这里插入图片描述
形成自适应布局效果

2.元素在DOM文档流中的前后顺序和视觉表现上的前后顺序不一致，可以借助margin负值定位实现

图片右侧定位，同时顺序一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            overflow: hidden;
        }
        .full{
            width: 100%;
            float: left;
        }
        .box > img{
            float: left;
            margin-left: -128px;
        }
        .full > p{
            margin-right: 140px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="full">
        <p>文字内容...</p>
    </div>
    <img src="img/flower1.jpg" alt="" width="100">

</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            overflow: hidden;
        }
        .img {
            width: 128px; height: 96px;
        }
        /* 左浮动 */
        .box-left > img {
            float: left;
        }
        .box-left > p {
            margin-left: 140px;
        }
        /* 右浮动，但图片DOM在前 */
        .box-right > img {
            float: right;
        }
        .box-right > p {
            margin-right: 140px;
        }
        /* 右浮动，图片DOM在后，和视觉表现一致 */
        .box-right-same > .full {
            width: 100%;
            float: left;
        }
        .box-right-same > .full > p {
            margin-right: 140px;
        }
        .box-right-same > img {
            float: left;
            margin-left: -128px;
        }
    </style>
</head>
<body>
<h4>左侧固定</h4>
<div class="box box-left">
    <img src="img/flower1.jpg" class="img" width="200">
    <p>DOM文档流中，图片定宽在左侧，文字内容在右侧，和视觉呈现的前后顺序一致。</p>
</div>

<h4>右侧固定-DOM顺序相反</h4>
<div class="box box-right">
    <img src="img/flower1.jpg" class="img" width="200">
    <p>DOM文档流中，图片定宽在左侧，视觉上却在右侧，顺序表现不一致。</p>
</div>

<h4>右侧固定-DOM顺序和视觉一致</h4>
<div class="box box-right-same">
    <div class="full">
        <p>DOM文档流中，图片定宽在右侧，视觉呈现也在右侧，顺便表现此时一致。</p>
    </div>
    <img src="img/flower1.jpg" class="img" width="200">
</div>
</body>
</html>

在这里插入图片描述

3.通过给父容器添加margin属性，增加容器的可用宽度来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            margin-right: -20px;
        }
        ul > li{
            float: left;
            width: 100px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

在这里插入图片描述

4.margin合并
块级元素的上边距与下边距有时候会合并（块级元素，只在垂直方向）

相邻兄弟元素margin合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            margin: 1em 0;
        }
    </style>
</head>
<body>
<p>first</p>
<p>second</p>
</body>
</html>

父级和第一个/最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            max-width: 1920px;
            height: 384px;
            background: url(img/flower1.jpg) no-repeat center;
        }
        .container > h2 {
            font-size: 128px;
            margin-top: 100px;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>CSS世界</h2>
</div>
</body>
</html>

在这里插入图片描述

空块级元素margin合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .column-left,
        .column-right {
            margin-bottom: -9999px;
            padding-bottom: 9999px;
        }
        .column-left {
            background-color: #34538b;
        }
        .column-right {
            background-color: #cd0000;
        }
    </style>
</head>
<body>
<div id="colLeft" class="column-left">
    <h4>正方观点</h4>
    <p>观点1</p>
</div>
<div id="colRight" class="column-right">
    <h4>反方观点</h4>
    <p>观点1</p>
</div>

<input type="button" id="leftMore" value="更多正方观点">
<input type="button" id="rightMore" value="更多反方观点">

<script>
    var $ = function (id) {
        return document.getElementById(id);
    };
    // 分栏元素
    var colLeft = $('colLeft'), colRight = $('colRight');
    // 按钮元素
    var leftMore = $('leftMore'), rightMore = $('rightMore');

    // 序号
    var indexLeft = 1, indexRight = 0;

    if (colLeft && colRight && leftMore && rightMore) {
        leftMore.onclick = function () {
            indexLeft = indexLeft + 1;
            colLeft.insertAdjacentHTML('beforeend', '<p>观点'+ indexLeft +'</p>');
        };
        rightMore.onclick = function () {
            indexRight = indexRight + 1;
            colRight.insertAdjacentHTML('beforeend', '<p>观点'+ indexRight +'</p>');
        };
    }
</script>
</body>
</html>

在这里插入图片描述

5.margin合并的计算规则
（1）正正取大值
（2）正负值相加
（3）负负最负值
6.父子margin合并的意义在于：在页面中任何地方嵌套或直接放入任何裸<div>，都不会影响原来的块级布局
7.margin：auto
（1）有时候元素就算没有设置width或height，也会自动填充
（2）有时候元素就算没有设置width或height，也会自动填充对应的方位
margin：auto规则：a若一侧定值，一侧auto，则auto为剩余空间大小
b若两侧规则均是auto，则平均剩余空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            width: 300px;
            background-color: #f0f3f9;
        }
        .son {
            width: 200px; height: 120px;
            margin-right: 80px;
            margin-left: auto;
            background-color: #cd0000;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述

margin：auto居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            width: 300px; height: 150px;
            background-color: #f0f3f9;
            position:relative;
        }
        .son {
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            width: 200px; height: 100px;
            background-color: #cd0000;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述

8.margin无效情形解析
（1）display计算值inline的非替换元素的垂直margin是无效的
（2）表格中tr，td或者设置display计算值是table-cell，table-row的margin元素无效
（3）margin合并的时候，更改margin值可能是没有效果
（4）绝对定位元素非定位方位的margin值“无效”img {top 10%;margin-left:30px;}
（5）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”
（6）鞭长莫及导致的margin无效
（7）内联特性导致的margin无效
9.border-width不支持百分比
border-width：thin/medium/thick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .add {
            display: inline-block;
            width: 76px; height: 76px;
            color: #ccc;
            border: 2px dashed;
            text-indent: -12em;
            transition: color .25s;
            position: relative;
            overflow: hidden;
        }
        .add:hover {
            color: #34538b;
        }
        .add::before, .add::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .add::before {
            width: 20px;
            border-top: 4px solid;
            margin: -2px 0 0 -10px;
        }
        .add::after {
            height: 20px;
            border-left: 4px solid;
            margin: -10px 0 0 -2px;
        }
    </style>
</head>
<body>
<a href class="add" title="继续上传">
    添加图片
</a>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="search"] {
            width: 200px; height: 40px;
            padding: 10px 40px 10px 10px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .icon-clear {
            width: 16px; height: 16px;
            margin: 1px 0 0 -38px;
            border: 11px solid transparent;
            border-radius: 50%;
            background: #999;
            color: white;
            position: absolute;
            visibility: hidden;
        }
        .icon-clear:before {
            content: "×";
        }
        input:valid + .icon-clear {
            visibility: visible;
        }
    </style>
</head>
<body>
<input id="search" type="search" value="我是初始值" required>
<label for="search" class="icon-clear"></label>

<script>
    var eleLabel = document.querySelector('label[for="search"]'),
        eleSearch = document.getElementById('search');

    if (eleLabel && eleSearch) {
        eleLabel.onclick = function() {
            eleSearch.value = '';
        };
    }
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .button {
            display: inline-block;
            line-height: 36px;
            padding: 0 40px;
            color: #fff;
            background-color: #cd0000;
            position: relative;
            text-decoration: none;
        }
        .button:before,
        .button:after {
            content: "";
            position: absolute;
            left: 0; right: 0;
            border-style: solid;
        }
        .button:before {
            top: -2px;
            border-width: 0 2px 2px;
            border-color: transparent transparent #cd0000;
        }
        .button:after {
            bottom: -2px;
            border-width: 2px 2px 0;
            border-color: #cc0000 transparent transparent;
        }
    </style>
</head>
<body>
<a href class="button">我是按钮</a>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 导航背景区border创建 */
        .box {
            border-left: 150px solid #333;
            background-color: #f0f3f9;
        }
        /* 清除浮动影响，不能使用overflow:hidden */
        .box:after {
            content: "";
            display: block;
            clear: both;
        }
        /* 布局主结构 */
        .box > nav {
            width: 150px;
            margin-left: -150px;
            float: left;
        }
        .box > section {
            overflow: hidden;
        }
        /* 导航列表和模块列表 */
        .nav {
            line-height: 40px;
            color: #fff;
        }
        .module {
            line-height: 40px;
        }
    </style>
</head>
<body>
<div class="box">
    <nav>
        <h3 class="nav">导航1</h3>
    </nav>
    <section>
        <div class="module">模块1</div>
    </section>
</div>

<input type="button" id="navMore" value="更多导航">
<input type="button" id="moduleMore" value="更多模块">
<script>
    var navMore = document.getElementById('navMore'),
        moduleMore = document.getElementById('moduleMore');

    if (navMore && moduleMore) {
        var nav = document.querySelector('nav'),
            section = document.querySelector('section');
        var navIndex = 1, sectionIndex = 1;
        var rand = function() {
            return 'f' + (Math.random() + '') .slice(-1);
        };
        navMore.onclick = function() {
            navIndex++;
            nav.insertAdjacentHTML('beforeEnd',
                '<h3 class="nav">导航'+ navIndex +'</h3>');
        };
        moduleMore.onclick = function() {
            sectionIndex++;
            section.insertAdjacentHTML('beforeEnd',
                '<div class="module" style="background:#'+ [rand(), rand(), rand()].join('') +'">模块'+ sectionIndex +'</div>');
        };
    }
</script>
</body>
</html>