HTML+CSS补充知识

最新推荐文章于 2026-07-01 20:04:56 发布

原创最新推荐文章于 2026-07-01 20:04:56 发布 · 156 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了HTML+CSS中的元素定位技术，包括static、relative、absolute和fixed四种定位方式，并详细讲解了偏移量的概念。此外，还探讨了z-index属性在解决元素堆叠问题上的应用。同时，提到了HTML5中的语义标签，如<header>、<nav>等，以及命名规范，强调了驼峰式和帕斯卡命名法。最后，通过一个利用float、position和z-index制作五环的例子，展示了这些概念的实际运用。

HTML+CSS补充知识

一、元素的定位

选择器{
	
	    position:属性值;
	   
	   }

static：自动定位(默认的定位方式)
relative ： 相对于元素在文档流中的位置进行定位
absolute ：相对于已经定义好的父元素的位置进行定位
fixed：相对于浏览器窗口进行的定位

 #d1{
        width: 300px;
        height: 280px;
        background-color: aqua;
        /* position: static;    自动定位，默认定位方式 */
        position: absolute;
        top: 120px;
        left: 300px;
    }
    #d2{
        width: 300px;
        height: 280px;
        background-color: rebeccapurple;
        /* position: relative;
        left: 300px;
        top: 120px; */
    }
    #d3{
        width:150px;
        height: 150px;
        background-color: yellowgreen;
        position: fixed;
        top: 30px;
        left: 30px;
    }

二、偏移量

精确定位元素的位置，取值是数值或百分比

top：顶端偏移量。
left：左边偏移量
right：右边偏移量
bottom：下边偏移量

top: 30px;
left: 30px;

三、层叠属性 z-index

当对元素进行定位时，可能会出现堆叠现象;可以使用z-index属性来设置元素的堆叠顺序。z-index的取值是整数(0、正整数、负整数)

 #z1
    {
        width: 300px;
        height: 100px;
        background-color: turquoise;
        /* z-index: 90; */
    }
    #z2
    {
        width: 300px;
        height: 100px;
        background-color: rebeccapurple;
        position: absolute;
        top: 80px;
        left: 50px;
        z-index: -1;
    }
    #z3
    {
        width: 300px;
        height: 100px;
        background-color: blue;
        position: absolute;
        top: 160px;
        left: 100px;
        z-index: -2;
    }

值越大，显示在上面，值小的显示在后面（看不到）

四、HTML5中的语义标签

1、<thead></thead>：表示表格的头部
2、<tbody></tbody>：表示表格的主体
3、<header></header>：表示页面的头部
4、<nav></nav>：表示导航栏
5、<footer></footer>：表示页面或区域的底部
6、<article></article>：表示页面中独立的文档内容
7、<section></section>：用于对页面内容进行分块
8、<aside></aside>：表示页面的附属信息(侧边栏、广告等)

五、命名规范

1、避免使用中文命名
2、不能以数字开头
3、不能占用关键字
4、用最少的字母达到最好理解的意义(见名知义)
5、驼峰式命名：除第一个单词之外，其他单词首字母大写
6、帕斯卡命名：每个单词之间用"_"连接
7、CSS文件的命名：
    主样式文件：master.css
	模块样式：module.css
	字体样式：font.css
	基本样式：base.css
	布局样式(版面)：layout.css
	表单样式：forms.css

实例
利用float属性、position属性与z-index属性完成五环的制作

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/circles.css"/>
    <title>五环</title>
</head>
<body>
    <div class="circles">
        <div class="blue leftbig"></div>
        <div class="blue rightsmall"></div>

        <div class="yellow leftbig"></div>
        <div class="yellow rightsmall"></div>

        <div class="black leftbig"></div>
        <div class="black rightsmall"></div>

        <div class="green leftbig"></div>
        <div class="green rightsmall"></div>

        <div class="red leftbig"></div>
        <div class="red rightsmall"></div>
    </div>
</body>
</html>

css文件

.circles{
    position: relative;   /*相对定位*/
    float: left;
    margin: 0px;
}

.circles div{
    border-radius: 50px;  /*设置圆角*/
    width: 80px;
    height: 80px;
    border: solid 5px yellow;
    position: absolute;    /*绝对定位*/
    z-index: -1;
}

.circles .blue{
    border-color: blue;
    z-index: 0;
}

.circles .yellow{
    border-color: yellow;
    top: 50px;
    left: 50px;
    z-index: 1;
}

.circles .black{
    border-color: black;
    left: 100px;
    z-index: 0;
}
.circles .green{
    border-color: green;
    top: 50px;
    left: 150px;
    z-index: 1;
}
.circles .red{
    border-color: red;
    left: 200px;
    z-index: 0;
}
.circles .leftbig{
    border-right-color: transparent;   /*设置边框线透明*/
}
.circles .rightsmall{
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.circles .blue.rightsmall{
    z-index: 2;
}
.circles .yellow.rightsmall{
    z-index: -1;
}
.circles .black.rightsmall{
    z-index: 2;
}
.circles .green.rightsmall{
    z-index: -1;
}
.circles .red.rightsmall{
    z-index: 0;
}

标签

#css