请问css中的区块 inline inline-block block 三者有啥区别呢？

Posted 2023-05-05

请问css中的区块 inline inline-block block 三者有什么区别呢？要详细点哦，谢谢！

这样先讲内联元素和块级元素：
内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。
块级元素时可以控制宽和高、margin等，并且会换行。

inline：使用此属性后，元素会被显示为内联元素，元素则不会换行。
block：使用此属性后，元素会被现实为块级元素，元素会进行换行。
inline-block：是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。

要注意的是IE6 不支持inline-block 参考技术A 1.inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border
2.block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float
3.inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样，但是inline-block兼容性很差，要用需要写hack

inline-block的hack如下：

display: -moz-inline-stack;火狐2hack
display: inline-block;
vertical-align: top;撑出盒子的bug修复
zoom: 1;后面两行IE7hack
*display: inline;
使用例子 ul li display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;

inline-block有个好处，就是div设置浮动只能实现居左，或者居右，而inline-block可以通过上级容器设置text-align:center实现块元素居中 参考技术B block CSS1
块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
inline CSS1
内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block IE5.5
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 参考技术C 第一个是同行显示，第三个是换行显示。第二个没用过。

Sass--运算

数值运算

body{
    height: 800px;
    $smallBlockWidthAndHeight: 100px;

    .outside{
        background: gray;
        height: 500px;
        .smallBlock{
            width: $smallBlockWidthAndHeight;
            height: $smallBlockWidthAndHeight;
            background: red;
            display: inline-block;
            margin-left: 5px;
        }

        .resultBlock{
            width: $smallBlockWidthAndHeight / 2;
            height: $smallBlockWidthAndHeight / 2;
            background: blue;
            display: inline-block;
            margin-left: 5px;
        }
    }
}

 

 

 

字符串运算

实例 1

body{
    // $str: "70px" + "80px";
    $str: 70px + 80px;
    .outside{
        width: 500px;
        height: 300px;
        background: gray;

        margin-left: $str;
    }
}

 

编译后

body .outside {
  width: 500px;
  height: 300px;
  background: gray;
  margin-left: 150px; }

 

 

实例 2

body{
    $str: "70px" + "80px";
    .outside{
        width: 500px;
        height: 300px;
        background: gray;

        margin-left: $str;
    }
}

 

编译后

body .outside {
  width: 500px;
  height: 300px;
  background: gray;
  margin-left: "70px80px"; }

 

 

实例 3 

body{
    .outside{
        width: 500px;
        height: 300px;
        background: gray;

        &:after{
            content: "边距是：\\"" + (70px + 80px) + "\\"";
        }
    }
}

 

编译后

@charset "UTF-8";
body .outside {
  width: 500px;
  height: 300px;
  background: gray; }
  body .outside:after {
    content: ‘边距是："150px"‘; }

 

 

可以看出来，这个规则和JS运算挺像的