box-sizing 盒子模型
一、概念
box-sizing: content-box
box-sizing: border-box
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
③举例说明：下面有两个宽、高、内边距、外边距相同，box-sizing分别为content-box和border-box的盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.css2 {
width: 400px;
height: 400px;
background: rgb(233, 217, 217);
box-sizing: content-box;
padding: 20px;
border: 10px;
}
.css3 {
width: 400px;
height: 400px;
background: rgb(156, 164, 189);
box-sizing: border-box;
padding: 20px;
border: 10px;
}
</style>
</head>
<body>
<div class="css2">css2盒子</div>
<div class="css3">css2盒子</div>
</body>
</html>
二、box-sizing: border-box在移动端的使用
①在移动端中，因为宽高需要自适应，所以会使用流式布局，即宽度设置为100%，这样如果使用外加模式，当添加内边距和边框的时候，左右就会出现滚动条，如图所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.css2 {
width: 100%;
height: 400px;
background: rgb(233, 217, 217);
box-sizing: content-box;
padding: 20px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="css2">css2盒子</div>
</body>
</html>
②如果使用内减模式的话，就可以避免这样的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.css3 {
width: 100%;
height: 400px;
background: rgb(233, 217, 217);
box-sizing: border-box;
padding: 20px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div class="css3">css3盒子</div>
</body>
</html>
box-sizing 盒子模型的更多相关文章
- Box Model 盒子模型
Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的.称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi ...
- CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
- 盒子模型(Box Model)
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...
- CSS魔法堂：盒子模型简介
本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一.W3C标准的盒子模型 二.IE盒子模型 三.两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 ...
- DIV+CSS两种盒子模型（W3C盒子与IE盒子）
在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 浅谈 css3 box盒子模型以及box-flex的使用
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 一.使 ...
- CSS 盒子模型（Box model）中的 padding 与 margin
本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...
- CSS盒子模型（Box Model）
一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...
- CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
随机推荐
- asp.net core 3.1 中Synchronous operations are disallowed. Call FlushAsync or set AllowSynchronousIO to true instead
在Action中解决措施: var syncIOFeature = HttpContext.Features.Get<IHttpBodyControlFeature>(); if (syn ...
- SSM 前后端分离 这里controll层的返回值和之前那个不一样
1.先创建实体类: 2.创建mapper层 package cn.kgc.mapper; import cn.kgc.Account;import org.apache.ibatis.annotati ...
- 在Centos中安装.net core SDK
在Linux中运行.net core 项目必须要有.net core SDK 环境.之前配置过几次,但由于没有做总结.过了几天又配置的时候 感觉特别陌生,今天就记录一次.net core SDK 的安 ...
- dump net core lldb 安装
原文https://www.cnblogs.com/calvinK/p/9263696.html centos7下安装lldb,dotnet netcore 进程生成转储文件,并使用lldb进行分析 ...
- 2019 超级老板APPjava面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.超级老板等公司offer,岗位是Java后端开发,因为发展原因最终选择去了超级老板,入职一年时间了,也成为了面 ...
- 2019 映客直播java面试笔试题 （含面试题解析）
本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.映客直播等公司offer,岗位是Java后端开发,最终选择去了映客直播. 面试了很多家公司,感觉大部分公司考察的点 ...
- .net 后台以post方式调用微信公众平台接口
public class Fresult { public int errcode { get; set; } public string errmsg { get; set; } public st ...
- Vue父组件向子组件传值以及data和props的区别
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/xukongjing1/article/ ...
- 如何统一管理单个任务下所有API的同步情况?
如何统一管理单个任务下所有API的同步情况 1. 一分钟完成单个API配置 单个API的配置包含:API名称.URL地址.请求方式.参数设置.自定义高级设置. 参数允许用户填写:Text.WebSer ...
- weblogic unable to get file lock问题
非正常结束weblogic进程导致weblogic无法启动 由于先前服务器直接down掉了,所有进程都非正常的进行关闭了,也就导致了下次启动weblogic的时候报了以下错误: <2012-3- ...