复习一波 html css（二）盒模型 + 定位 + css加载顺序

最新推荐文章于 2022-07-23 10:16:40 发布

小白追梦

最新推荐文章于 2022-07-23 10:16:40 发布

阅读量177

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_43815680/article/details/108815100

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

盒模型

在这里插入图片描述

在这里插入图片描述
3)
为了防止出现问题我们在保存的时候习惯需要注意一下

4）
顺便加一点常见的行级元素和块级元素
行级元素： span a i em sub sup
块级元素： div ul p h1-h6 table

我们再复习一下 margin
在这里插入图片描述

常规情况不能起中文名字

7）

html 加载顺序

在这里插入图片描述

定位

1）
在这里插入图片描述

2）
常规情况下
absolute 不保留原来的位置在子容器使用
relative 保留原来的位置在父容器使用

这样做了之后，子容器会以父容器的左上角为原点进行定位
这个地方显得异常的重要

3）
针对上面这个我们举个例子说明一下这个问题
实现居中且随着窗口拖动也一起变化

<html>

<head>
    <title>浮动</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .wrap {
            width: 600px;
            height: 100px;
            margin: 0 auto;
            background: darkgrey;
            position: relative;
        }

        .ad_1 {
            width: 50px;
            height: 40px;
            background: darkorange;
            position: absolute;
        }

        .ad_2 {
            width: 50px;
            height: 40px;
            background: red;
            position: absolute;
            top: 0;
            left: 550px
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="ad_1">广告1</div>
        <div class="ad_2">广告2</div>
    </div>

</body>

</html>

实现的效果是这样的
在这里插入图片描述
4）

5）css加载顺序

1、行间就是直接把css 通过style 写在 标签上
    <div style="background-color: royalblue;"></div>
行间是这样写的 但是一般不会这样写 
2、内联 就是在head 里面写 style
    <style type="text/css">
        div {
            background-color: seagreen;
        }
    </style>
3、外联  就是通过link 引入外部的css
<link rel="stylesheet" type="text/css" href="test.css">
注意这个东西的写法

在这里插入图片描述
举个例子说明一下这个情况

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="utf-8">
    <!-- 这个地方叫外联  优先级最低 但是利于结构样式相分离 -->
    <link rel="stylesheet" type="text/css" href="test.css">
    <!-- 这个内联  优先级 排第二   -->
    <style type="text/css">
        div {
            background-color: seagreen;
        }
    </style>
</head>

<body>
    <!-- 这个地方直接写叫行间 优先级最高 -->
    <div style="background-color: royalblue;"></div>
</body>

</html>
<script>

</script>

在这里插入图片描述

举个例子说明一下

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="utf-8">
    <!-- 这个地方叫外联  优先级最低 但是利于结构样式相分离 -->
    <!-- 这个内联  优先级 排第二   -->
    <style type="text/css">
        .dy_1 {
            width: 200px;
            height: 200px;
            background-color: salmon;
            border: 10px solid darkblue !important;
            border: 10px solid rebeccapurple;
        }

        .mc {
            background: rebeccapurple;
            background: seagreen;
        }
    </style>
</head>

<body>
    <!-- 这个地方直接写叫行间 优先级最高 -->
    <div class="dy_1 mc"></div>
</body>

</html>
<script>

</script>

页面效果自己想一下哈

3
在这里插入图片描述
很形象很直观的例子

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 设置a标签的样式 */
        a {
            font-size: 33px;
        }

        /* a标签本身的颜色 */
        a:link {
            color: red;
        }

        /* 鼠标移动到a标签时的颜色 */
        a:hover {
            color: #000
        }

        /* 鼠标按住在a标签上的时候 */
        a:active {
            color: yellow;
        }

        /* 鼠标点击或者说访问后的情况 */
        a:visited {
            color: teal;
        }
    </style>
</head>

<body>
    <!-- 这个地方直接写叫行间 优先级最高 -->
    <a href="#">我是fhj</a>
</body>

</html>
<script>

</script>

在这里插入图片描述
咱们举个例子说明一下情况

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 写外部div的样式 */
        #div_id {
            width: 100px;
            height: 80px;
            background: #666;
            position: relative;

        }

        /* 写内部label的眼样式 */
        #div_id label {
            width: 200px;
            height: 100px;
            background: green;
            position: absolute;
            top: 0;
            left: 100px;
            /* 变成手型 */
            cursor: pointer;
        }

        /* 鼠标放上去之后 div 怎么变化 */
        #div_id:hover {
            background: hotpink;
            cursor: pointer;
        }

        /* 鼠标放上去后 label的变化 */
        #div_id label:hover {
            background: indigo;
            width: 20px;
            height: 20px;

        }
    </style>
</head>

<body>
    <div id="div_id">
        <label></label>
    </div>
</body>

</html>
<script>

</script>