页面布局那些事
程序员文章站
2022-04-24 22:52:58
...
页面布局那些事
- flex 方法的居中
.nav {
display:flex; ///position:absolute;不会改变display为block
align-item:center;
justify-content:center;
}
<div class="nav">
<img>
</div>- 如果图片比container大，就需要一个特别的方法了。有这样一种场景：照片有一边和container一样高，另外一边按照照片的比例缩放，照片居中显示，超出截断，这种应该叫占满布局（occupy）。这种情况下只需要把left/top/right/bottom 设成一个很大的负值即可
.container img{
position:absolute;
left:-9999px;
top:-9999px;
bottom:-9999px;
right:-9999px;
margin:auto;
}
.container{
overflow:hidden;
}
通常我们知道让文字上下居中的方法是让元素的line-height和容器的height一样就可以了，但是如果是多行文字的情况呢？我们可以在文字外层再加一个盒子（inline-block）container 的设置不变，改变文字盒子的行高到新的值或normal就可以实现了
理解字号与行号
字号大小，就是字体的高度。 但是好多的字体高度不等于字号的高度，这是因为字库在设计的时候的高度不一样。这个有兴趣的可以用fontforge看看。不再详细说明。
图片底部的空白
设置图片父级设置样式
line-height:50; font-size:40px;这样，量一下图片下面的高度，或许这时就能明白结果了。
如果写页面的时候遇到这个问题可以通过调整行高来解决，这就是有的人使用让父级样式设置line-height:0;的原因了。
还有一种方案，就是将图片设置成块，因为块元素是不会受行高影响的。
下面是示例代码
<!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>居中布局</title>
<style>
div,img,html,body{
margin:0;
padding: 0 ;
}
.clearfix:after{
content:"";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.container1{
display:flex;
height: 500px;
align-items: center;
justify-content: center;
background:#ccc;
}
/*示例2*/
.container2{
position: relative;
height: 200px;
overflow: hidden;
background:cadetblue;
}
.container2 img{
position: absolute;
bottom:0 ;
top:0;
right:0;
left:0;
margin: auto;
}
/*示例3*/
.container3{
margin-top: 20px;
position: relative;
height: 200px;
overflow: hidden;
background:rgb(125, 86, 231);
}
.container3 img{
position: absolute;
bottom:-9999px ;
top:-9999px;
right:-9999px;
left:-9999px;
margin: auto;
}
/* 浮动布局 */
.float{
overflow: hidden;
}
.fl{
float: left;
}
.fr{
float: right;
}
.float .fl,.float .fr{
width:300px;
background: #ccc;
height: 50px;
}
.float .middle{
background: peru;
height: 40px;
margin:0 320px;
border:palegreen;
}
/* 布局示例2 */
.table{
margin:40px 0;
background:darkseagreen;
}
.table .middle{
display: table-cell;
width:9999px;
height: 40px;
background: royalblue;
}
.table .fl,.table .fr{
width:300px;
background: #ccc;
height: 50px;
}
/* 布局3 flex */
.flex{
display: flex;
height: 66px;
margin:40px 0 ;
border:1px solid #333333;
}
.flex .lt,.flex .rt{
width:100px;
background:darkgray;
}
.flex .middle {
flex-grow:1;
background:cyan;
}
/* 布局4 grid */
.grid{
margin:40px 0;
height: 50px;
border:1px solid #1ed;
display:grid;
grid-template-columns: 100px auto 100px;
}
.grid .lt{
background:chartreuse;
}
.grid .rt{
background:cadetblue;
}
.grid .middle{
background:brown;
}
/*
grid 的兼容写法
@supports (display:grid){
div{
display:grid
}
}
@supports not(display:grid){
div{
display:block;
}
}
*/
/* 文字环绕 */
.text-around{
background: darkslategray;
}
</style>
<!-- js 检测flex是否被支持 -->
<script>
var div = document.createElement("div");
div.style.display = "flex";
if(div.style.display !== "flex" && div.style.display !== "-webkit-flex"){
document.getElementsByTagName('body')[0].className = "no-flex";}
</script>
</head>
<body>
<div class="container1">
<img src="./images/gift.png" alt="">
</div>
<div class="container2">
<img src="./images/gift.png" alt="">
</div>
<div class="container3">
<img src="./images/gift.png" alt="">
</div>
<!-- 页面布局 -->
<div class="float">
<div class="fl"></div>
<div class="fr"></div>
<div class="middle"></div>
</div>
<!-- 示例2 -->
<div class="table clearfix">
<div class="fl"></div>
<div class="fr"></div>
<div class="middle"></div>
</div>
<!-- 示例3 -->
<div class="flex clearfix">
<div class="lt"></div>
<div class="middle"></div>
<div class="rt"></div>
</div>
<!-- 示例4 grid -->
<div class="grid">
<div class="lt"></div>
<div class="middle"></div>
<div class="rt"></div>
</div>
<!-- 文字环绕 -->
<div class="text-around clearfix">
<img class="fl" src="./images/gift.png" alt="">sdfsdfsdfsdflijlasjoigjwoegijwerjglsjlfjsldjglskjg
直接诶浮动式的深度开发建设看到积分十多块飞机上看到飞机上的风科技辣椒粉垃圾股啦法律上的纠纷律师的结果哦是根据我饿结束了国家设立登记设立多家分公司领导关键是哦的进攻苏联等国家连锁店结构类似的结构类似的感觉
</div>
<div class="img-test" style="line-height: 40px;font-size: 40px;background: bisque;">
<img src="./images/gift.png" alt="">查看图片下面的空白问题
</div>
</body>
</html>