前端之css--背景-盒子模型-元素模式转换

Youryds

已于 2023-09-27 14:42:11 修改

阅读量90

点赞数

文章标签： css 前端

于 2023-09-24 22:44:25 首次发布

本文链接：https://blog.csdn.net/Youryds/article/details/133235453

版权

1 元素显示模式转换

2 demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a {
            display: block;
            background-color: #55585a;
            height: 40px;
            width: 230px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>


</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
</body>
</html>

3.背景

3.1 背景颜色

background-color  颜色;

3.2 背景图片

background-image:none/url("url")

类似于，这其中的大部分都是由背景图片完成的

3.3 背景平铺

repeat是平铺，repeat-x是延x轴平铺

3.4 背景位置

3.5 背景图像固定

background-attachment

3.6 背景色半透明

4 css三大特性

4.1 层叠性

遵循就近原则

谁离得近就是谁

4.2 继承性

！！！行高的继承

4.3 优先级

5 盒子模型

5.1 组成

5.2 边框 border

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
           height: 500px;
            width: 500px;
            border-width: 5px;;
            border-style:solid;
        }

    </style>


</head>

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

border-style:

实线边框：solid

点线边框：dotted

虚线边框：dashed

边框颜色：border-color:

边框的简写：

border:1px solied red

没有顺序

边框可以分开写：

eg：

上边框：

border-top:5px dotted yellow

下边框同理

border-bottom

5.3 表格的细线边框

将表格里面的td之间的边框合并

5.4 内边距 (padding)

    <style>
        div {
            height: 60px;
            width: 60px;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 20px;
            padding-bottom: 20px;
            border-top: 5px dotted yellow
        }
    </style>


</head>

<body>
    <div>做个情绪稳定的和真诚的人</div>
</body>

就是设置盒子中内容cottont和边框之间的距离

padding简写：

demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
    .nav
    {
        border-top:5px solid red ;
        border-bottom: 1px solid blue;
        height: 30px;
        padding: 5px 5px;
    }
    a{
        display: inline-block;
        background-color: yellow;
        text-decoration: none;
    }
    .fir:hover
    {
        background-color: aqua;
    }
    
    .beauty
    {
        width: 1900px;
        height: 900px;
        background-image: url("美女.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
    }
    </style>


</head>

<body>
    <div class="nav">
        <a href="#" class="fir">情绪稳定</a>
        <a href="#">真诚</a>
        <a href="#">接受落差</a>
    </div>

    <div class="beauty">

    </div>
</body>

</html>

5.5 外边距（margin）

控制盒子与盒子之间的距离

设置盒子居中 margin:0 auto;

关于嵌套盒子的塌陷问题，我们可以用边框将父类包起来，或者为父类元素添加overflow:hidden 或者加padding

5.6 清除内外边距

这是我们css的第一段代码

方便布局

*{
    padding:0;
    margin:0
}

Youryds

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端之css--背景-盒子模型-元素模式转换

repeat是平铺，repeat-x是延x轴平铺。就是设置盒子中内容cottont和边框之间的距离。类似于，这其中的大部分都是由背景图片完成的。设置盒子居中 margin:0 auto;将表格里面的td之间的边框合并。控制盒子与盒子之间的距离。点线边框：dotted。虚线边框：dashed。实线边框：solid。
复制链接

扫一扫