css深入理解

最新推荐文章于 2024-09-17 16:35:25 发布

withwz_

最新推荐文章于 2024-09-17 16:35:25 发布

阅读量571

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_42519137/article/details/86705941

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

width:auto;

帮助明白的一些概念

display:inline-block; 应脑补成两个盒子外层盒子是 display:inline;内层盒子是 display:block；他既有块级盒子的宽高，又在一个 inline的盒子里具有行内元素的属性。

display:block;也应该脑补成display:block-block;

display:table;是display:block-table;

display:inline-table;是外层inline盒子内层table盒子;

块级元素的默认宽度是auto于包含块的；

a{
	display:block;
	width:100%;
}

width设置成100%是没必要的，反而会让结果变得麻烦。
所谓流动性，并不是看上去的宽度100%显示的这么简单，而是种/margin/border/padding和content内容区域自动分配水平空间的机制。

https://demo.cssworld.cn/3/2-3.php
设置width:100%;出现了不必要的麻烦。

首选最小宽度

当外部容器的宽度是0时，里边的内容宽度并非也是0，在css世界中，图片和文字的权重远大于布局，因此css的设计者不会让图文在width:auto时候宽度变成0的，此时表现出来的就是“首选最小宽度”。

东南亚文字(如中文)最小宽度是每个汉字的宽度。
西方文字的最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格、段横线、问号以及其他非英文字符等。如果想让英文字符和中文一样，可以使用css中的word-break:break-all。

可以用这个特性画出一个凹凸
https://demo.cssworld.cn/3/2-6.php

盒子模型

首先明确

内在盒子模型有content box、padding box、border box和margin box；

content box有content-box;
padding box有padding-box;
border box有border-box;

唯margin box没有css关键字名称？
because margin永远是透明的，就算设置了margin的值大小也不会决定盒子的尺寸。

div{width:100px}是怎么作用在盒子上的

当直接作用在盒子上没有margin、padding时候，此<div>的呈现的大小就是100px。
当设置了padding、border后结果就不一样了。

div{
width:100px;
padding:20px;
border:20px solid;
}

变成加上了两边padding和border后的宽高了。
这是因为css的div默认 box-sizing: content-box;
如果把box-sizing设置成box-sizing: border-box;
这样盒子的宽度就是按照这个border进行设置了。

流体布局下宽度分离

在前端领域，一提到分离，作用一定是便于维护。
表现、样式和行为分离
前后端分离

宽度分离：就是宽度设置在包含元素上，padding、border设置在子元素上。
为什么要这样做呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽度分离</title>
    <style>
        .box{
            width: 102px;
            height: 100px;
            padding: 5px;
            box-sizing: border-box;
            background: rgba(1,222,15,0.1);
        }
        .father{
            width: 102px;
            background: #cd3000;
        }
        .son{
            background: rgba(1,222,15,0.1);
            height: 100px;
            padding: 5px;
            border: 1px solid;
        }
    </style>
</head>
<body>

<div class="box">lorem</div>


<br>
<br>
<br>


<div class="father">
    <div class="son">lorem</div>
</div>
</body>
</html>

https://bb798sky.github.io/powerful-css/width-height细节/宽度分离.html
当我们业务需求给内容加padding时候width和border、padding写在一起会导致盒子被撑大，布局打乱。

新建一个包含元素包着呈现内容的子元素，这样再给内容加padding，只会缩小content的区域。

在ie10以上可以用box-sizing:border-box; 来代替宽度分离，如果想适配ie8那么还是需要用宽度分离来解决。

height:100%

div{
width:100%;/*多余的*/
height:100%;/*无效的*/
background:red;
}

要让height:100%起作用必需设置

html,body{
	height:100%;
}

单独设置body100%还不行。

再就是用绝对定位的方法，不过width也需要设置

比!important权重更大！

超越比!important权重更大

我把width属性设置成内联的又加上了!important还是干不过min-width;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>100%高度</title>
    <style>
        html,body{
            height: 100%;
        }
        .div1{
            background: red;
            height: 200px;
            min-width: 200px;
        }
    </style>
</head>
<body>
<div class="div1" style="width:100px;!important;"></div>
</body>
</html>

超越最大，不是“后来居上”。

   .container{
            height: 100px;
            min-width:200px;
            max-width:100px;
            background-color: blue;
        }

后来的max-width没干过min-width，因为min-width大。

幽灵空白节点

名词解释

内联盒子包含了许多的术语和概念，换句通俗的说法，包含了很多种盒子：
在这里插入图片描述
绿色框内的称为匿名内联盒子<em>里的是非匿名内联盒子；
红色框内称为行框盒子；
黄色的称为包含盒子；

在HTML5文档中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白借点”，这个节点是透明的不占宽度，但确实存在有高度。
https://bb798sky.github.io/powerful-css/height/幽灵空白节点.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幽灵空白节点</title>
<style>
    div{
        background-color: red;
    }
    span{
        display: inline-block;
    }
</style>
</head>
<body>
<div>
    <span></span>
</div>
</body>
</html>