CSS样式笔记

一.常用方法

1.div相对于父元素居中方式(有多种方式，记录自己常用的)：

子绝父相，margin: auto 50px; left: 0;right: 0;bottom: 0;top:0;

示例

图片.png

    <div style="height: 200px;background-color: cadetblue;position: relative;">
        <div style="height: 140px;background-color: #ffffff;
             opacity: 0.2;margin: auto 50px;position:absolute; left: 0;right: 0;bottom: 0;top:0;">
        </div>
    </div>

二.定位相关

1.相对定位

相对定位是相对其原来位置的变化，不脱标

图片.png

紫色的div相对定位后其原来的位置还保存着

<div style="background-color: aqua;width: 100px;height: 100px;position: relative;"></div>
    <div style="position: relative;height: 200px;background-color: chocolate">

        <div style="background-color: blueviolet;width: 110px;height: 110px;position: absolute;right:100px;top: 80px">
        </div>
    </div>

2.绝对定位

绝对定位在父元素没有定位的情况下是相对窗口的定位，当父元素定位后则相对于父元素定位，一般遵循子绝父相原则，绝对定位会脱标

图片.png

紫色的div绝对定位后所在位置，此时其父元素（橙色的div采用了相对定位）
代码如下：

<div style="background-color: aqua;width: 100px;height: 100px;position: relative;"></div>
    <div style="position: relative;height: 200px;background-color: chocolate">

        <div style="background-color: blueviolet;width: 110px;height: 110px;position: absolute;right:100px;top: 80px">
        </div>
    </div>
    <div style="background-color: pink;width: 120px;height: 120px;"></div>

3.固定定位

固定定位则完全相对于窗口的定位，屏幕滚动时候，固定定位依旧在设置的窗口位置

图片.png

代码如下：

 <div style="background-color: aqua;width: 100px;height: 100px;"></div>
    <div style="background-color: blueviolet;width: 110px;height: 110px;position: fixed;right:100px;top: 80px"></div>
    <div style="background-color: pink;width: 120px;height: 120px;"></div>