CSS复习--行内元素的盒模型、盒子的尺寸和轮廓&圆角

Loery1314

已于 2022-03-04 21:10:33 修改

阅读量247

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-03-04 20:55:54 首次发布

本文链接：https://blog.csdn.net/Loery1314/article/details/123285019

版权

本文复习了CSS中的行内元素盒模型，详细讲解了盒子的尺寸设定，并探讨了如何实现轮廓和圆角效果。

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

行内元素的盒模型

盒子的尺寸

轮廓和圆角

行内元素的盒模型：

/* 
行内元素的盒模型：
    -行内元素不支持设置宽度和高度
    -行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
    -行内元素可以设置border，垂直方向的border不会影响页面的布局
    -行内元素可以设置margin，垂直方向的margin不会影响布局
*/

/* 
display 用来设置元素显示的类型
    可选值：
        inline 将元素设置为行内元素
        block 将元素设置为块元素
        inline-block 将元素设置为行内块元素
            行内块，既可以设置宽度和高度又不会独占一行
        table 将元素设置为一个表格
        none 元素不在页面中显示

visibility 用来设置元素的显示状态
    可选值：
        visible 默认值，元素在页面中正常显示
        hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置
*/

盒子的尺寸：

/* 
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
    box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
        可选值：
            content-box 默认值，宽度和高度用来设置内容区的大小
            border-box 宽度和高度用来设置整个盒子可见框的大小
                wid