CSS-定位和弹性盒子

最新推荐文章于 2024-02-20 15:24:25 发布

小矮马

最新推荐文章于 2024-02-20 15:24:25 发布

阅读量1.5k

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_40007317/article/details/105472960

版权

1、定位

（1）相对定位 position: relative

当开启了元素相对定位之后而不设置边偏移量时，元素不会发生任何变化
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流，但会提升一个层级

（2）绝对定位 position: absolute

开启绝对定位以后，如果不设置偏移量时，元素不会发生任何改变
开启绝对定位以后，会使元素脱离文档流
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，如果所有的祖先元素都没有设置定位，则元素就会相对于浏览器窗口进行定位

（3）固定定位 position:fixed

生成绝对定位的元素，相对于浏览器窗口进行定位

（4）默认值position:static

默认值。没有定位，元素出现在正常的流中

（5）position:inherit

规定应该从父元素继承 position 属性的值。

2、过渡动画

鼠标覆盖图片对图片进行放大，外边框不变：

<style type="text/css">
    div {
	height: 125px;
	width: 270px;
	border: 2px solid red;
	overflow: hidden;
    }
    img {
	height: 125px;
	width: 270px;
	transition: all 0.5s;
    }
    div:hover img {
        transform: scale(1.2);
    }
</style>
<div>
    <img src="img/1.jpg" />
</div>

3、弹性盒子（重点！！！）

通过设置 display:flex 可以定义弹性盒子，弹性盒子由弹性容器和弹性子元素组成，它描述了弹性子元素在弹性容器内部的沿主轴和侧轴的排列方式。它有6大属性：

（1）flex-direction: 定义伸缩方向
取值：row：横向排列(默认值)
column：纵向排列

（2）flex-wrap: 定义伸缩容器里是单行显示还是多行显示
取值：nowrap：单行显示(默认值)
wrap：多行显示

（3）flex-flow: flex-direction和flex-wrap属性的复合属性

（4）justify-content : 定义主轴对齐方式
取值：flex-start：居左排列(默认值)
flex-end：居右排列
center：居中排列
space-between：两端对齐，空隙平分
space-around：每个项目两侧的间隙相等

（5）align-items: 定义侧轴对齐方式
取值：flex-start：排列在上方(默认值)
flex-end：排列在结尾
center：垂直居中排列

（6）align-content : 定义伸缩行在伸缩容器里的侧轴对齐方式
取值：flex-start：排列在上方(默认值)
flex-end：排列在结尾
center：垂直居中排列

在伸缩子元素中我们可以设置flex:1按照比例来划分容器的宽高

4、垂直水平居中

（1）文本垂直水平居中

line-height:盒子的高度;
text-align: center;

（2）盒子垂直水平居中

方法一：弹性盒子

/* 父元素设置 */
.box1{
    display:flex;
    justify-content: center;
    align-items: center;
}

方法二：定位（宽度和高度已知），父元素设置相对定位，子元素设置绝对定位

/* 子元素设置 */
.box2{
    position: absolute;
    left: 50%;
    margin-left: -子元素宽度的一半；
    top: 50%;
    margin-top: -子元素高度的一半
}

方法三：定位（宽度和高度未知），父元素设置相对定位，子元素设置绝对定位

/* 子元素设置 */
.box2 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法四：定位+平移+transform

/* 子元素设置 */
.box2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方法五：弹性盒子+margin（宽度和高度未知）（父元素设置display:flex，子元素设置margin:auto）

<style type="text/css">
    .box {
        width: 500px;
        height: 500px;
        background-color: pink;
        display: flex;
    }

    .one {
        width: 300px;
        height: 300px;
        background-color: yellow;
        margin: auto;
    }
</style>
<div class="box">
    <div class="one"></div>
</div>

方法六：margin: 0 auto 只能设置水平居中（只有块级元素block设置该属性才生效）