css盒模型

本文介绍了CSS盒模型中内边距、外边距的概念及设置方法,并详细解释了如何通过box-sizing属性控制尺寸样式,同时涵盖了处理内容溢出、元素可见性及盒类型的设置等关键知识点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.内边距
    padding-top
    padding-right
    padding-bottom
    padding-left
    padding
    如果使用百分数值指定内边距,百分数总是跟包含块的宽度有关,高度不考虑在内

2.外边距
    margin-top
    margin-botom
    margin-left
    margin-right
3.设置一定尺寸的盒模型
    box-sizing  属性允许指定尺寸样式应用到元素盒子的具体区域
4.处理溢出内容
    overflow-x    处理水平方向的溢出方式
    overflow-y    处理垂直方向的溢出方式
    overflow    
            溢出属性    
    hidden        只显示盒里面的内容,多余部分直接剪掉
    no-content    如果内容无法显示全部,就移除
    scroll        添加滚动条
    visible        默认,不管溢出与否,直接显示
5.控制元素可见性
    visibility    控制元素可见性,属性值如下
        collapse    元素不可见,不占空间
        hidden        不可见,占据空间
        visible        默认,可见
6.设置元素的盒类型
    inline        盒子显示为文本行
    block        显示为块
    inline-block    显示为文本行,但是具有长宽高
    list-item    显示为列表项
    run-in        取决于周围元素
    flexbox        弹性盒模型
    table        跟表格中的元素布局有关
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值