01_前端开发课程介绍与课程安排_录制于2018 08 27

2021-10-19

字数统计: 864字 | 阅读时长≈ 3分

定位
css权重

1、定位

01、文档流

文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占有自己的位置。

02、关于定位

我们可以使用css的position属性来设置元素的定位类型。

** position **的设置项如下：

**relative **
- 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。
**absolute **
- 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed
- 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
  03、定位元素的偏移
定位元素还需要用left、right、top或bottom来设置相对于参照元素的偏移值。

04、定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级。

05、水平垂直居中的弹框——div制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中的弹框效果</title>
    <style>
        .pop{

        }
        .pop_con{
            width: 500px;
            height: 300px;
            border:1px solid black;
            position: fixed;
            left:50%;
            margin-left: -251px;   /* margin-left: 纠正偏差效果 */
            /* 定位元素水平垂直居中的技巧 */
            top:50%;
            margin-top: -221px;   /* margin-top: 纠正偏差效果 */
            background: gray;
            overflow: hidden;
        }
        .pop .boxTitle{
            color:lightgray;
            position: relative;
            background: teal;
            width: 500px;
            border-bottom: 3px solid lightgray;

        }
        .pop .boxContent{
            color: white;
            position: relative;
            background: chocolate;
            width: 550px;
            height: 350px;

        }
        #boxTitleText{
            padding: 15px;
            position: relative;
            left: 50%;
            margin-left: -48px;
            color: white;
            text-effect: emboss;
        }
        #boxContentText{
            padding: 20px;
            text-align: center;
        }
        .mask{
            position: fixed;
            width: 100%;    /* 设置为固定定位，宽度和高度就可以设置百分比 */
            height: 100%;
            left:0;
            top:0;
            background: black;
            z-index: -1;
            /*  设置元素透明度 */
            opacity: 65%;
            /*  透明度兼容IE的写法 */
            filter: alpha(opacity=30);
        }
        .pop_con{
            display: none;
        }
    </style>
</head>
<body>
    <h2>垂直居中的弹框效果</h2>
    <div class="pop">
        <div class="pop_con" style="display: block">
            <div class="boxTitle">
                <div id="boxTitleText">弹框的标题</div>
            </div>
            <div class="boxContent">
                <div id="boxContentText">请求关闭当前窗口，请确认后关闭！！！</div>
            </div>
            <div class="mask">

            </div>
        </div>

    </div>
</body>
</html>

2、CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面的样式。

01、权重的等级

** 可以把样式的应用方式分为几个等级，按照等级来计算权重**

内联样式
- style=“”, 权重值为1000
ID选择器
- #content，权重值为100
类，伪类
- content、：hover 权重值为10
标签选择器
- div、p 权重值为1

本文作者： 梁俊可
本文链接： http://ljk3d.com/2021/10/19/webNote/htmlAndCss/06_HTML&CSS_正式课程/
版权声明： 梁俊可工作室