csss中box-sizing的问题 元素在另一个元素中框框包含的问题
1.第一种是用calc来解决。
<style>
.container
{
border:10px solid red;
width:300px;
height:300px;
padding:0px;
}
.box
{
border:10px solid blue;
width:calc(100%-40px);
height:calc(300px-40px);
margin:0px;
}
</style>
<div class="container">
<div class="box"></div>
</div>
2.第二种是用box=-sizing来解决。
<style>
.container
{
width:300px;
height:300px;
border:10px solid red;
margin:0px;
padding:0px;
}
.box
{
box-sizing:border-box;
border:10px solid blue;
width:300px;
height:300px;
margin:10px;
}
</style>
当类box包含box-sizing时
设置的宽度包括width+border，不包括margin;当对元素类.box设置margin时，类box元素会从包含框中溢出。
3.
另一种情况是运用position进行居中：
<style>
.container
{
width:300px;
height:300px;
padding:0px;
margin:0px;
border:10px solid red;
position:relative;
}
.box
{
margin:0px;
padding:10px;
border:10px solid blue;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
其中那么此时的类box的du的margin+border+padding等于300px;
csss中box-sizing的问题 元素在另一个元素中框框包含的问题相关推荐
- php去除数组中的第一个元素,php如何删除数组的第一个元素和最后一个元素
对于一个php数组,该如何删除该数组的第一个元素或者最后一个元素呢?其实这两个过程都可以通过php自带的函数 array_pop 和 array_shift 来完成,下面就具体介绍一下如何来操作. ( ...
- javascript判断一个元素是另外一个元素的子元素
javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...
- kotlin List删除一个元素，添加一个元素
kotlin List移除一个元素,添加一个元素时没有 remove和add函数只有 -= 和 += 在kotlin ArrayList中才有remove和add函数 没有 -= 和 += kotli ...
- WPF 元素相对另外一个元素的 相对位置
原文:WPF 元素相对另外一个元素的 相对位置 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/koloumi/article/details/740 ...
- 一个元素位于另一个元素之上，点击上面的元素引发下面元素事件操作
一个元素位于另一个元素之上,点击上面的元素引发下面元素事件操作 <body><!-- 此布局为: 上面内容盒子覆盖在了上传文本区域之上--><!-- 想要点击'上面盒子内 ...
- matlab sheet名字,MATLAB得到excel多个非默认sheet名_怎样利用matlab去读取一个excel表中多个sheet的数据并导入一个sheet中？...
如何用matlab读取一个excel表格中的若干个工作表 如果数字: xlsread('e:/shiyanshuju/shiyanbiaoge','sheet1','B1:D1440') 最好个表格放 ...
- javaScript取得当前元素的下一个元素
如何取得当前元素的下一个元素呢? 例如,这有两个div <div id="wrap1" class="wrap">这是一个div</div&g ...
- pythonlist循环添加元素_list.append()在for循环中每次添加的都是最后的一个元素汗血宝马...
先贴出源码吧,这段代码我想返回一个list,list中的元素由N个dict组成, dict中会包含目录下文件的名称,大小和最后修改时间(ps.大小和最后修改时间没有贴出来) 1 2 3 4 5 6 7 ...
- Leetcode 34.排序数组中的第一个元素和最后一个元素
Time: 20190909 Type: Medium 题目描述 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度 ...
- 在带头结点单链表中查找最大值，将其与最后一个元素交换（交换值）
[问题描述] 在带头结点单链表中查找最大值,将其值与最后一个元素交换,输出交换后的单链表各元素. [输入形式] 循环输入若干个整数,以字母结束输入,建立带头结点的单链表. [输出形式] 输出最大值与最 ...
最新文章
- Autodesk MapGuide Enterprise 2011 Update 1 for Windows发布了
- Wait--查看等待
- 元素 context:component-scan 的前缀 context 未绑定。
- WKWebView get/set cookie小结
- DLL基础——Windows核心编程学习手札之十九
- 打开适配器并捕获数据包
- 中报表导出带表头_来看看Java是 如何优雅的导出 Excel的
- std::unique_lock与std::lock_guard区别示例
- String Modification CodeForces - 1316B(规律)
- 漫谈边缘计算（二）：各怀心事的玩家
- C中的位域与大小端问题
- Codeforces1005E1 - Median on Segments (Permutations Edition)（中位数计数）
- Oracle Sequence创建与使用
- 简单介绍Spring是什么？
- Android：图解四种启动模式 及 实际应用场景解说
- HTML转义字符表的使用
- js获取当前页面高度
- linux字体文件路径,Linux下安装字体
- -bash: unzip: 未找到命令
- JavaScript进阶 | DOM