bootstrap基础

最新推荐文章于 2022-09-29 13:01:37 发布

檬是柠檬的檬826

最新推荐文章于 2022-09-29 13:01:37 发布

阅读量226

点赞数

文章标签： bootstrap 前端

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/124116949

版权

bootstrap基础

1.视口

（1）布局视口

布局视口（layout Viewport）：是网页的宽度，一般移动浏览器都默认设置了布局视口的宽度。

（2）视觉视口

视觉视口（visual Viewport）：用户正在看的网站的区域，这个区域的宽度通常等于移动设备浏览器窗口的宽度。

（3）理想视口

理想视口：浏览器窗口的宽度和设备屏幕的宽度相同。要加上 <meta>标签。

2.box-sizeing

box-sizing：用来更改盒子尺寸的计算方式。

（1）content-box

传统方式：content-box

盒子的宽度 = CSS中设置的width + border + padding

<style>
    div{
        width: 300px;
        height: 200px;
        background-color: red;
        box-sizing: content-box;
        border: 2px solid blue;
        padding: 15px;
    }
</style>
<body>
    <div>西安邮电大学</div>
</body>

在这里插入图片描述

（2）border-box

CSS新的计算方式：border-box

盒子的宽度 = CSS中设置的width

内部包含了border和padding，盒子的大小是固定的

<style>
    div{
        width: 300px;
        height: 200px;
        background-color: red;
        box-sizing: border-box;
        border: 2px solid blue;
        padding: 15px;
    }
</style>
<body>
    <div>西安邮电大学</div>
</body>