目录
1.在html让高度始终是宽度的一半:
1)思路:
2)代码
3)效果:
2.使用flex+margin:auto实现垂直居中对齐
1.在html让高度始终是宽度的一半:
1)思路:
(1)用dom求得当前的offsetWidth
(2)将宽度设定为width的一半
2)代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="outer" id="outer">
<div class="inner">
</div>
</div>
</body>
<style>
div{
border: 1px;
padding: 1px;
}
.outer{
border: solid red 1px;
width: 100%;
height: 500px;
}
</style>
<script>
//首先进来就判断长度,执行一次
onload=()=>{
let width=document.getElementById("outer").offsetWidth//这个长度包含了padding和bodder的长度,所以下边计算的时候要减去4
document.getElementById('outer').style.height=((width-4)/2)+'px';//
}
//动态获取outer的宽度,然后让其宽度为高度的一半
window.onresize=function(){
let width=document.getElementById("outer").offsetWidth//这个长度包含了padding和bodder的长度,所以下边计算的时候要减去4
document.getElementById('outer').style.height=((width-4)/2)+'px';//
};
</script>
</html>
3)效果:
2.使用flex+margin:auto实现垂直居中对齐
flex布局相信是大家现在开发中比较常使用的一种布局了,使用flex布局进行垂直水平居中相信大家都已经很熟悉了。相信下边的代码大家已经屡见不鲜了。
div {
width: 100px;
height: 100px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
今天就由这个来引出我们的猪脚,margin。margin用的很多,多用于处理外边距等。今天我们要说的是最简单的垂直水平居中,先来上一段代码:
//html代码
<div class="outer">
<div class="inner"></div>
</div>
//style代码
.outer {
display: flex;
}
.inner {
width: 100px;
height: 100px;
margin: auto;
}
这样能完成水平垂直居中?你可以试试,这样真的可以。
可是这是为什么呢???
相信你之前也使用过或者想过使用margin:auto;对块级元素进行水平垂直居中,但是并没有达到想要的效果。block元素只是在水平方向上居中了,垂直方向上并没有居中。
bfc下margin无法垂直居中的原因
在块级格式化上下文中,margin-left和margin-right都为auto的时候,则表示他们的值相等,值得计算为剩余空间的一半,所以会达到水平居中。
而当margin-top和margin-bottom为auto的时候,则表示他们的值是0,所以无法完成垂直方向的居中。
ffc下margin垂直水平居中的原因
ffc就是flex布局的格式化上下文,在ffc中设置子元素margin:auto;在通过 justify-content 和 align-self 进行对齐之前,任何正处于空闲的空间都会分配到该方向的自动 margin 中去,这里特别说明下,设置了margin:auto后再设置父元素的justify-content或者子元素align-self则不生效,这里存在优先级的问题,margin的优先级更高一些,
margin实现等分等高
margin可以实现space-around或者space-between效果,代码也是特别简单:
//html代码
<ul class="container">
<li>liA</li>
<li>liB</li>
<li>liC</li>
<li>liD</li>
<li>liE</li>
</ul>
/* style代码
原先实现space-around
.container{
display: flex;
justify-content: space-around;
}
*/
/* margin实现 */
.container {
display: flex;
}
li {
margin: auto;
}
是不是特别简单,嘻嘻。对于space-between只是将上边的变化下,对于第一个li元素和最后一个li元素特殊处理下即可,增加如下代码即可。
li:first-child {
margin-left: 0;
}
li:last-child {
margin-right: 0;
}
水平方向上的等分我们已经了解了,接下来可以试下垂直方向上的等分环绕。还是原先的html,我们实现下垂直方向flex-end效果
li {
width: 100px;
text-align: center;
color: #fff;
margin: auto;
margin-bottom: 0;
margin-top: auto;
}
margin实现两端对齐
导航我们经常用到两端对齐,功能菜单左侧对齐,当前用户、退出登陆右侧对齐。接下来我们就用神奇的margin实现下。现在我们把liD和liE居右。
//html代码
<ul class="container">
<li>liA</li>
<li>liB</li>
<li>liC</li>
<li>liD</li>
<li>liE</li>
</ul>
.container{
display:flex;
}
li:nth-of-type(4){
margin-left:auto;
}
这样就很简单的实现了。
总结
bfc中margin-top 和 margin-bottom 的值如果是 auto,则他们的值都为 0。
ffc中margin-top 和 margin-bottom 的值如果是 auto,则他们平均分配垂直方向上的剩余空间。
单个方向上使用自动 margin ,它的计算值为该方向上的剩余空间。
使用了自动 margin 的 flex 子项目,它们父元素设置的 justify-content 以及它们本身的 align-self 将不再生效。
这里还需要分清那些flex父容器的属性,那些是子元素的属性,常用属性在这里提一下
父容器:display:flex, justify-content、align-self、flex-wrap(换行)、flex-direction,flex-flow(flex-firection+flex-wrap)、align-content。
子元素:flex 、align-self、flex-basis、flex-grow、flex-shink、order