HTML5背景属性、盒子模型和选择器

最新推荐文章于 2022-08-04 19:31:32 发布

acatlooklikegod

最新推荐文章于 2022-08-04 19:31:32 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/acatlooklikegad/article/details/75092015

本文详细介绍了CSS中的背景、尺寸、显示属性及盒子模型，并深入探讨了定位方式，包括static、fixed、relative和absolute的不同应用场景。此外，还讲解了如何使用元素选择器、ID选择器、类选择器和属性选择器来精确控制网页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.3 背景相关属性

body{
    background-color:#37ff68;
    background-image:url("../pic/js.jpg");
    background-repeat:no-repeat;
    background-position:bottom;
}

background-color:背景色

background-image:设定背景图片，需要设置图片的url地址

background-repeat:图片的复制选项

repeat：在水平和垂直两个方向上进行复制

no-repeat:不复制

repeat-x:在水平方向上复制

repeat-y：在垂直方向上复制

也可以将这一组属性值封装到一个属性background中，书写书序是：

背景色background-color

背景图片background-image

重复方式background-repeat

位置backgroud-position

表达更加简洁

background: green url("../pic/js.jpg") no-repeat right top;

2.4 尺寸相关属性

height:高度

width:宽度

div{
    width:200px;
    height:200px;
    background-color:red;
}

max-width:最大宽度

max-height：最大高度

min-width：最小宽度

min-height：最小高度

2.5 显示相关属性

隐藏元素的方法：

（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；

（2）display：none，不仅隐藏内容，且不占位置

div{
    height:100px;
    /*visibility:hidden;*/
    display: none;
}

display可以设置元素的显示模式

inline:将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。

inline-block: 将块级元素以内联元素形式显示,同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。

li{
    /*display:inline;*/
    display:inline-block;
    width:200px;
    background-color:blueviolet;
}
span{
    display:block;
}

也可以将内联元素以块级元素形式来显示，即display:block。

2.6 盒子模型

margin：外边距

margin-top、margin-right、margin-bottom、margin-left

使用方式

（1）margin:30px;表示上下左右外边距都未30px；

（2）margin-left：30px；单独设置上下左右外边距

（3）margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px30px 40px

padding:内边距

也有上下左右边距，和margin类似，不再赘述。

border:边框

border-width: 边框宽度;

border-style: 边框线条类型;

border-color: 边框的颜色;

word中设置边框的操作

也可以使用更优化的书写方式

border:10px dashed blue;

outline：轮廓线，用法同border

2.7 定位

定位方式有：static、fixed、relative、absolute。

static 静态定位（默认）

无定位，元素正常出现了流中，不受left、right、top、bottom属性的影响。

div{
    width:200px;
    height:200px;
    background-color:red;
    position:static;
}

显示效果

fixed

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:red;
        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

显示效果为

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:red;
            position:fixed;
            left:30px;
            top:20px;
        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top。

重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是静态定位z-index无效。

relative

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:rgba(255,0,0,1);
        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
            position:relative;
            top:20px;
            left:30px;
        }
        #div3{
            width:100px;
            height:100px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

显示结果为

从结果可以看出，相对定位是从原有位置进行位移，但并不影响后续元素的位置。

absolute 绝对定位

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:rgba(255,0,0,1);
        }
        #div2{
            width:200px;
            height:200px;
            background-color:greenyellow;
            position:absolute;
            top:20px;
            left:30px;
        }
        #div3{
            width:100px;
            height:100px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

结果为

从结果可以看出：绝对定位的元素将从流中被“摘”出来，依靠left和top属性进行定位。

与fixed类似，但是参照物不同

fixed参照根元素（html）

absolute参照父容器

3 选择器

所谓选择器，指的是选择施加样式目标的方式。

3.1 元素选择器

用标签名作为选择器，选中所有相应的元素

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{
            font-size:24px;
            color:red;
        }
        p{
            font-size:32px;
            color:blue;
        }
    </style>
</head>
<body>
    <div>元素选择器</div>
    <p>元素选择器1</p>
    <p>元素选择器2</p>
</body>

3.2 id选择器

顾名思义，是根据id来选择元素，其样式定义形式为：

#idname{

……

}

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:200px;
            height:200px;
            background-color:red;
        }
        #div2{
            width:200px;
            height:200px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

显示结果为

3.3 类选择器

根据class属性来选择元素，其样式定义形式为：

.className{

……

}

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .even{
            width:200px;
            height:200px;
            background-color:red;
        }
        .odd{
            width:200px;
            height:200px;
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
</body>

显示结果为：

从结果可以看出: .odd{……}定义的样式会施加到所有class="odd"的元素上，比如上例中的第一个和第三个<div>，当然也包括class="odd"的<p>。

3.4属性选择器

根据某个属性的特性（比如有无、值等）来选择

（1）根据有无某属性来选择

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        [title]{
            width:100px;
            height:50px;
            background-color:red;
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div title="div1">1</div>
    <div title="div2">2</div>
    <div >3</div>
    <div title="a div">4</div>
    <div title="div a">5</div>
</body>

运行结果：

从结果可以看出，所有具有title属性的元素都应用了红色背景色的样式。

（2）根据属性的值来选择

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        [title='div2']{
            width:100px;
            height:50px;
            background-color:red;
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div title="div1">1</div>
    <div title="div2">2</div>
    <div >3</div>
    <div title="a div">4</div>
    <div title="div a">5</div>
</body>