box-sizing属性与元素居中 -

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > box-sizing属性与元素居中

博主信息

博文 37

粉丝 1

访问量 41456

专题推荐

更多>

一：box-sizing

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度,盒子模型由四个部分组成，内容: Content、内边距: Padding 、边框: Border 、外边框边界:Margin 。

box-sizing分为标准盒模型和IE盒模型：
标准盒模型 box-sizing: content-box；
IE盒模型 box-sizing: border-box；
他们的区别是：
标准盒子的width和hight不把padding,border包括在内
IE盒模型的width=content+padding+border,height=content+padding+border
举例说明：

    <style>
        .box1 {
            /* 使用box-sizing:border-box;盒子实际大小达到理想中的100px*100px */
            box-sizing: border-box;
            width:100px;
            height: 100px;
            padding: 20px;
            background-color: #f00;
            border: 1px solid #000;
        }
        .box2 {
            /* 没有使用box-sizing:border-box;box-sizing的默认值是:content-box，俗称标准盒子，
            盒子实际大小是：100+20*2+1*2=142px；
             */
            width:100px;
            height: 100px;
            padding:20px;
            background-color: #f00;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

运行结果如下：

二：常用元素居中方法：

1.行级元素，水平居中使用：text-align: center，垂直居中：line-height:父元素的高度;
2.块级元素，水平居中：margin: 0 auto;垂直居中：父元素不要给高度，让子元素的上下padding自动撑起来，例如padding: 5em 0;
例子：

 <style>
        .box {
            width:600px;
            height: 380px;
            border-radius: 10px;
            background-color: #F6F1E7;
        }
        p {
            /*行内元素居中：  */
            text-align: center;
            /* display: block; */
            height: 50px;
            line-height: 50px;
        }
        .content {
            width:400px;
            /* 块元素居中： */
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="title">电影没死，只是电影的时代要结束了</p>
    <div class="content">
        大导演克里斯托弗·诺兰在2020年底被长期合作的华纳电影彻底激怒了。
12月8日，诺兰批评了影视巨头华纳兄弟的一项重磅决定，并称华纳主导的HBO Max是“最烂的流媒体”。
在此之前，华纳宣布将其2021年上映的全部17部电影，采取线上线下同步首映的方式登陆流媒体HBO Max。
也就是说，HBO Max会员可以第一时间在网上点播《黑客帝国4》《自杀小队2》《沙丘》《真人快打》《哥斯拉大战金刚》《猫和老鼠》《高地人生》等重磅制作。
华纳方面称，是疫情促使他们做出这一决定，这是“电影爱好者和放映者的双赢”。
但诺兰在社交媒体上说道：“我们行业中最伟大的制片人和最出色的演员们在睡觉前还认为自己是在为最棒的电影公司工作，早上醒来就却发现，他们是在为最烂的流媒体工作！”
</div>
</div>
</body>