CSS 基本视觉格式化

最新推荐文章于 2023-02-25 03:14:45 发布

Daniel799

最新推荐文章于 2023-02-25 03:14:45 发布

阅读量190

点赞数

分类专栏： CSS 文章标签： CSS 基本视觉格式化

本文链接：https://blog.csdn.net/u012664198/article/details/97879497

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的基本框模型，包括内容区、内边距、边框和外边距。此外，还探讨了水平和垂直格式化的规则，如元素宽度计算、居中对齐方法以及如何通过调整margin实现子元素宽度大于父元素。同时，讲解了display属性用于改变元素显示方式，特别是inline-block特性，使得元素同时具备行内元素和块级元素的特点。

摘要由CSDN通过智能技术生成

基本框

元素由内容区，内边距（padding），边框(border)，外边距(margin)组成，这也就是元素的基本框。

边框的颜色默认取内容的前景色。

水平格式化

元素的width定义为内容区的宽度。所以元素的实际宽度是：width+(padding+border+margin)*2

元素存在水平属性设置为auto时，其实际宽度是父元素的width值。

元素的水平属性：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right。其中，width和margin可以设置为auto,其他默认值为0.

让元素居中于父元素：将子元素margin-left和margin-right设置为auto，再设置其width.

div{width: 400px;background: green}
p{margin-left: auto;margin-right: auto; width:100px;background: purple};

让子元素宽度大于父元素：设置子元素宽度为auto,将margin的值设置为负数。由于在由auto的情况下，子元素的实际宽度等于父元素的宽度（代数和相等）。所以在子元素存在负值的情况下，实际宽度会大于父元素。

div{width: 400px;border: 3px solid black}
p{margin-left: 10px;margin-right: -50px; width:auto;background: purple};

垂直格式化

元素的height定义为内容区的高度。所以元素的实际高度是：height+(padding+border+margin)*2

元素的垂直属性：margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom。其中，height和margin可以设置为auto,其他默认值为0.

合并垂直外边距：当上下行都有外边距时，则上下行其外边距是上行下边距和下行的上边距的合并。合并是指取其较大的边距。

改变元素显示display

关键字：inline(默认值，使元素变为行内元素) block(使元素变为块级元素) inline-block

<html>
    <meta charset="UTF-8">
    <head>
        <style>
            #rollcall li{display: inline;border-right: 1px solid;padding: 0 0.33em}
            #rollcall li:first-child{border-left: 1px solid}
        </style>
    </head>
    <body>
        <ul id="rollcall">
            <li>Bob C.</li>
            <li>Marcio G.</li>
            <li>Eric M.</li>
            <li>Kat M.</li>
        </ul>      
    </body>
</html>

行内块元素inline-block

行内块元素和块元素一样，有width和height属性。

Daniel799

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基本视觉格式化

基本框元素由内容区，内边距（padding），边框(border)，外边距(margin)组成，这也就是元素的基本框。边框的颜色默认取内容的前景色。水平格式化元素的width定义为内容区的宽度。所以元素的实际宽度是：width+(padding+border+margin)*2元素存在水平属性设置为auto时，其实际宽度是父元素的width值。元素的水平属性：margin-...
复制链接

扫一扫

专栏目录