CSS过渡约束的计算
CSS过度约束性质
什么是CSS过度约束
简单的来说就是,父子元素的情况下,子元素的位置是依据一定条件进行计算的,以下则对这些条件进行详细的说明
当没有开启绝对定位或固定定位时
水平布局必须要满足以下等式
子元素在父元素中的水平布局必须要满足以下等式
margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right = 包含块的内容区的width
探寻能够设置成auto的CSS属性
这里七个值在中能设置auto的属性有
width: auto;
margin-left: auto;
margin-right: auto;
等式不成立(过度约束)时的几种情况
当margin与width都没有设置为auto
浏览器自动计算margin-right
<style>
.box1{
width: 800px;
height: 200px;
border: 1px red solid;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
/* margin-right无论设置多少都没用,因为浏览器会自动计算此值 */
margin-right: 2000px;
/* 此时margin-right = 600px
margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right = 包含块的内容区的width
0 + 0 + 0 + 200 + 0 + 0 + margin-right = 800
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
当margin或width中有一个被设置为auto
会自动调整那个被设置为auto的属性
<style>
.box1{
width: 800px;
height: 200px;
border: 1px red solid;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
margin-left: auto;
/* 此时margin-right = 0px
margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right = 包含块的内容区的width
auto + 0 + 0 + 200 + 0 + 0 + margin-right = 800
会自动调整那个被设置为auto的属性
600px + 0 + 0 + 200 + 0 + 0 + margin-right = 800
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
当margin与width都被设置为auto
宽度会被调整到最大,外边距为0
<style>
.box1{
width: 800px;
height: 200px;
border: 1px red solid;
}
.box2{
width: auto;
height: 200px;
background-color: orange;
margin-left: auto;
margin-right: auto;
/* 此时width会是800px
margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right = 包含块的内容区的width
auto + 0 + 0 + auto + 0 + 0 + auto = 800
宽度会被调整到最大,外边距为0
0 + 0 + 0 + width=auto=>800px + 0 + 0 + 0 = 800
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
当margin都被设置为auto,width是固定值时
会自动平均分配给两个为auto的margin
这也是元素水平居中的原理
<style>
.box1{
width: 800px;
height: 200px;
border: 1px red solid;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
margin-left: auto;
margin-right: auto;
/* margin-left = margin-right = 300px
margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right = 包含块的内容区的width
auto + 0 + 0 + 200 + 0 + 0 + auto = 800
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
当开启绝对定位或固定定位时
水平布局必须要满足以下等式
子元素在父元素中的水平布局必须要满足以下等式
left + margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right + right = 包含块的内容区的width
垂直布局必须要满足以下等式(没开定位时垂直布局不受约束)
子元素在父元素中的垂直布局必须要满足以下等式
top + margin-top + border-top + padding-top + height + paddind-bottom + border-bottom + margin-bottom + bottom = 包含块的内容区的height
垂直布局的情况与水平布局一致
探寻可以设置为auto的CSS属性
left: auto;
right: auto;
margin-left: auto;
margin-right: auto;
width: auto;
当都没有设置auto时
会自动调整right值以使等式满足,注意: 没开启定位时,是自动调整margin-right
<style>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
/* 水平布局必须要满足以下等式
left + margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right + right = 包含块的内容区的width
*/
left: 0;
right: 0; /* right将不会生效,因为需要满足过度约束*/
/* 0 + 0 + 0 + 0 + 200px + 0 + 0 + 0 + right = 500px
right => 300px
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
当其中有一个属性被设置auto时
自动调整auto的值使等式成立
<style>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: auto;
height: 200px;
background-color: orange;
position: absolute;
/* 水平布局必须要满足以下等式
left + margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right + right = 包含块的内容区的width
*/
left: 0;
right: 0;
/* 0 + 0 + 0 + 0 + auto + 0 + 0 + 0 + 0 = 500px
auto => 500px
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
当width和margin被设置auto时(与其他水平布局一样当同时存在总是优先调整width)
会调整width,并将margin设置为0
<style>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: auto;
height: 200px;
background-color: orange;
position: absolute;
margin-left: auto;
margin-right: auto;
/* 水平布局必须要满足以下等式
left + margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right + right = 包含块的内容区的width
*/
left: 0;
right: 0;
/* 0 + auto + 0 + 0 + width + 0 + 0 + auto + 0 = 500px
auto => 0px
width => 500px
当width和margin被设置auto时只会调整width
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
当margin left right被设置auto时
因为left,right两个属性的默认值是auto,所以会优先调整left和right
<style>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
margin-left: auto;
margin-right: auto;
/* 水平布局必须要满足以下等式
left + margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right + right = 包含块的内容区的width
*/
/* 不指定时left与right默认值就是auto*/
/* left: auto;
right: auto; */
/* auto + auto + 0 + 0 + 200px + 0 + 0 + auto + auto = 500px
优先调整left或right(相当于回到第一种情况==>优先调整right)
0 + 0 + 0 + 0 + 200px + 0 + 0 + 0 + 300px = 500px
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
所以实现水平居中时需要显式的指定left和right的值
<style>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
margin-left: auto;
margin-right: auto;
/* 水平布局必须要满足以下等式
left + margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right + right = 包含块的内容区的width
*/
/* 水平居中时需要显式的指定left和right的值*/
left: 0;
right: 0;
/* 0 + auto + 0 + 0 + 200px + 0 + 0 + auto + 0 = 500px
调整margin-left和margin-right
0 + 150px + 0 + 0 + 200px + 0 + 0 + 0 + 150px = 500px
*/
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
集合开启定位后水平与垂直方向的过度约束的知识实现在父元素中垂直水平居中
<style>
.father{
width: 500px;
height: 500px;
background-color: #bfa;
}
.son{
width: 200px;
height: 200px;
background-color: orange;
}
/* 实现在父元素中垂直水平居中 */
/* ====================水平居中样式开始================= */
.father{
position: relative; /* 确定father为包含块,不然定位就会以html为原点 */
}
.son{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
/*
此时条件约束等式为
left + margin-left + border-left + padding-left + width + paddind-right + border-right + margin-right + right = 包含块的内容区的width
0 + auto + 0 + 0 + 200px + 0 + 0 + auto + 0 = 500px
auto => 150px
*/
/* ====================水平居中样式结束================= */
/* ====================垂直居中样式开始================= */
.father{
position: relative;
}
.son{
position: absolute; /* 只有开启定位才受过度约束 */
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}
/*
此时条件约束等式为
top + margin-top + border-top + padding-top + height + paddind-bottom + border-bottom + margin-bottom + bottom = 包含块的内容区的height
0 + auto + 0 + 0 + 200px + 0 + 0 + auto + 0 = 500px
auto => 150px
*/
/* ====================垂直居中样式结束================= */
/* 实现在父元素中垂直水平居中 */
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
CSS过渡约束的计算的更多相关文章
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
- Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
- 047——VUE中css过渡动作实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- Vue css过渡 和 js 钩子过渡
css过渡 <transition name="slide"> <div v-show="!showChatInput" class=&quo ...
- 看完就懂--CSS选择器优先级的计算
CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...
- CSS过渡、CSS动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...
- CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- 深入理解CSS选择器优先级的计算
选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...
随机推荐
- 【奇淫巧技】Bypass阿里云注入
序言 我:摸鱼一时爽,一直摸鱼一时爽啊:relieved:大佬:还摸鱼,快来搞个注入.我:... 拿到数据包 GET /wxapp.php?i=undefined&t=undefined&am ...
- IDLE怎么修改背景？
摘要:IDLE默认为白色,可能有的人喜欢其他颜色,那么怎么修改呢? 颜色喜好,因人而异.不想千篇一律使用默认的白色,可以通过以下操作修改IDLE的背景颜色以及其他设置. 打开Python官方自带的ID ...
- hdu 6268 Master of Subgraph(点分治+bitset)
You are given a tree with n nodes. The weight of the i-th node is wi. Given a positive integer m, no ...
- 最短路径问题---Floyed（弗洛伊德算法），dijkstra算法，SPFA算法
在NOIP比赛中,如果出图论题最短路径应该是个常考点. 求解最短路径常用的算法有:Floyed算法(O(n^3)的暴力算法,在比赛中大概能过三十分) dijkstra算法 (堆优化之后是O(MlogE ...
- 2019牛客暑期多校训练营（第七场）B Irreducible Polynomial
传送门 题意: 给你一个n次n+1项式(An*X^n+A(n-1)*X^(n-1)...A*X+A0),将系数An都给你,问你这个多项式是不是一个不可约多项式,可约多项式就是类型(x+1)*(x+2) ...
- codeforces578C. Weakness and Poorness
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...
- Splits CodeForces - 964A
题意: 我们定义一个不上升的且和为 n 的正整数序列,叫做 n 的分解. 比如, 下面是8的分解: [4, 4], [3, 3, 2], [2, 2, 1, 1, 1, 1], [5, 2, 1]. ...
- C# TCP应用编程三 异步TCP应用编程
利用TcpListener和TcpClient类在同步方式下接收.发送数据以及监听客户端连接时,在操作没有完成之前一直处于阻塞状态,这对于接受.发送数据量不大的情况或者操作勇士较短的情况下是比较方便的 ...
- 洛谷P1144-最短路计数-最短路变形
洛谷P1144-最短路计数 题目描述: 给出一个\(N\)个顶点\(M\)条边的无向无权图,顶点编号为\(1-N\).问从顶点\(1\)开始,到其他每个点的最短路有几条. 思路: \(Dijkstra ...
- Python+Appium实现自动抢微信红包
前言 过年的时候总是少不了红包,不知从何时开始微信红包横空出世,对于网速和手速慢的人只能在一旁观望,做为python的学习者就是要运用编程解决生活和工作上的事情. 于是我用python解决我们的手速问 ...