【css布局】布局详解梳理及原因分析
文章目录
前言
本文基于vue绘制样式
零、块元素和行内元素
- 块级元素:块元素前后都不能有行内元素和文本节点。
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>
<address>、<blockquote> 、<form>
- 行内元素:但不能设置它的width、height、margin、padding属性,即使设置了,也是不生效的。
<span></span><a></a><img /><input type="" />
- 块元素和行内元素的区别,块元素自动换行,行内元素在同一行
- 举例说明先看效果图:
- 代码如下(可忽略)
<template>
<div>
<div class="d d1"></div>
<div class="d d2"></div>
<p>p1</p>
<p>p2</p>
<h1> h1 </h1>
<h1> h2 </h1>
<span>sp1</span>
<span>sp2</span>
<a>a1</a>
<a>a2</a>
<img src="../assets/logo.png"/>
<img src="../assets/logo.png"/>
输入1<input type="text">
输入2<input type="text">
</div>
</template>
<script>
export default {
name: "Demo1"
}
</script>
<style scoped>
.d{
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
</style>
问题一、是否可以将块元素和行内元素互相转换?
答案是可以的。转换效果如下,将上面所有的行内元素转成块元素,将块元素转成行内元素。
问题二、上面的div设置为inline之后为什么展示效果不再是一个正方形?
因为转为行内元素,不能设置宽高,宽高不生效。
相应的,之前的span等行内元素设为block后,可以设置宽高了。
问题三、inline-block(行内块元素)什么情况使用?
问题二的情况,需要使用inline-block,既要一行显示,又要设置宽高。
一、水平布局和垂直布局
看此部分之前,请先看零、块元素和行内元素。
默认布局方式参考零、块元素和行内元素,不再多说。
1、div块元素布局详解
1.1、垂直和水平布局
- div块元素默认垂直布局,效果图如下:
- 代码如下:(三个div,无任何布局样式调整,默认垂直布局)
<template>
<div>
<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3"></div>
</div>
</template>
<script>
export default {
name: "Demo1"
}
</script>
<style scoped>
.d{
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
</style>
原因分析:
div块元素。默认垂直布局。
2、div块元素水平布局,效果图如下:
2、代码如下:
<template>
<div>
<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3"></div>
</div>
</template>
<script>
export default {
name: "Demo1"
}
</script>
<style scoped>
.d{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
</style>
原因分析
行内块元素
1.2、水平居中和垂直居中
结合1.1的块元素及行内块元素,实现水平居中:
1.2.1、块元素水平居中:
代码如下:
.d{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
原因分析
每个块占用一行,通过margin实现当前块元素居中。
1.2.2、行内块元素的水平居中:
先看代码:
.d{
margin: 0 auto;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
再看效果:(不生效)
先截图看效果,行内块元素,每个元素是它自身的宽度。所以对当前块单独设置margin: 0 auto 不生效。
修改后效果如下:(增加父布局样式)
代码如下:
<template>
<div class="d-p">
<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3"></div>
</div>
</template>
<script>
export default {
name: "Demo1"
}
</script>
<style scoped>
.d-p{
text-align: center;
}
.d{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
</style>
原因分析
父布局看作一个容器,父布局占用一行,其中三个div块是它的内容。通过设置内容居中实现子div水平居中。
此处插入一个问题
问题一、直接设置父布局的div的heght高度100%不生效
代码如下:
<template>
<div class="d-p">
<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3"></div>
</div>
</template>
<script>
export default {
name: "Demo1"
}
</script>
<style scoped>
.d-p{
background-color: aqua;
text-align: center;
height: 100%;
}
.d{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
</style>
效果如下:
修改App.vue的父元素高度为100%即可,代码如下:
html,body,#app{
height: 100%;
}
1.2.3、块元素垂直居中:
1.2.3.1、css position基础说明:(可跳过)
position:absolute;绝对定位,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
例如:
<template>
<div class="d-p">
<div class="d d1"></div>
</div>
</template>
<script>
export default {
name: "Demo1"
}
</script>
<style scoped>
.d-p{
background-color: aqua;
height: 100%;
}
.d1{
position: absolute;
left: 100px;
top: 100px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
</style>
效果如下:
问题一、此处是相对于父布局还是相当于浏览器窗口?
相对于父布局,例证如下:父布局绝对布局向右移动200像素。子布局跟着动。
定义:相对于 static 定位以外的第一个父元素进行定位。
.d-p{
background-color: aqua;
height: 50%;
width: 50%;
position: absolute;
bottom: 0px;
left: 200px;
}
.d1{
position: absolute;
left: 100px;
top: 100px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
效果图:
position : fixed 绝对定位,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
代码如下:
<template>
<div class="d-p">
<div class="d d1"></div>
</div>
</template>
<script>
export default {
name: "Demo1"
}
</script>
<style scoped>
.d-p{
background-color: aqua;
height: 50%;
width: 50%;
position: absolute;
bottom: 0px;
left: 200px;
}
.d1{
position: fixed;
left: 100px;
top: 100px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
</style>
position : relative 生成相对定位的元素,相对于它正常位置进行定位。
先理解一下正常位置的概念,就是没有任何修改的位置。直观效果如下:
.d-p{
background-color: aqua;
height: 50%;
width: 50%;
position: absolute;
bottom: 0px;
left: 200px;
}
.d1{
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
效果如下:
使用相对定位效果如下:
代码如下:
.d-p{
background-color: aqua;
height: 50%;
width: 50%;
position: absolute;
bottom: 0px;
left: 200px;
}
.d1{
position: relative;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
position : static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。这些声明都不会有任何效果。效果,略。
position : inherit 规定应该从父元素继承 position 属性的值。举例如下:
.d1{
position: inherit;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
1.2.3.2、垂直居中布局
效果图:
代码如下:使用绝对定位absolute相对于父元素的上下50%,偏移50%
<template>
<div class="d-p">
<div class="d d1"></div>
</div>
</template>
<script>
export default {
name: "Demo1"
}
</script>
<style scoped>
.d-p{
background-color: aqua;
height: 100%;
width: 100%;
position: absolute;
}
.d1{
position: absolute;
left:50%;top:50%;transform:translate(-50%,-50%);
width: 100px;
height: 100px;
background-color: red;
border: solid #42b983;
}
</style>