时间戳

首页 > 技术文章 > CSS基础操作（七）-CSS三大特性（继承性、层叠性、优先级）、元素定位方式（static、relative、absolute、fixed、float）

CSS基础操作（七）-CSS三大特性（继承性、层叠性、优先级）、元素定位方式（static、relative、absolute、fixed、float）

XiaoCui-blog 2021-07-17 08:33 原文

5 CSS三大特性

5.1 继承性

　　元素可以继承上级元素的文本相关样式，元素自带效果不受继承影响，比如：超链接a标签的字体颜色、h1-h6字体大小，除非单独对此标签进行设置。

5.2 层叠性

　　多个选择器有可能选择到同一个元素，如果作用的样式不同，则全部层叠生效；如果作用的样式相同，则由优先级决定。

5.3 优先级

　　作用范围越小，优先级越高（就近原则）：id>class>标签名>继承（继承属于间接选中）

 

6 元素定位方式

6.1 静态定位 static（文档流定位）

格式：position：static（默认）

显示特点：块级元素从上往下排列，行内元素从左向右排列

如何移动元素：通过外边距

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>static</title>
 <style type="text/css">
 body {
     margin: 0; /*设置左侧、上侧边距为0*/
 }
 ​
 div {
     width: 100px;
     height: 100px;
     border: 1px solid red;
 }
 </style>
 </head>
 <body>
   <div>div1</div>
   <div>div2</div>
   <div>div3</div>
   <span>span1</span>
   <span>span2</span>
   <span>span3</span>
 </body>
 </html>

显示效果：

6.2 相对定位 relative

格式：position：relative

显示特点：元素不脱离文档流（不管元素移动到哪里，仍然占着原来的位置）

如何移动元素：通过top/bottom/left/right让元素相对于初始位置做位置偏移

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>relative</title>
 <style type="text/css">
 body {
     margin: 0; /*设置左侧、上侧边距为0*/
 }
 ​
 div {
     /*默认position: static;*/
     width: 100px;
     height: 100px;
     border: 1px solid red;
 }
 ​
 #d2 {
     /*相对位置*/
     position: relative;
     /*通过top/bottom/left/right可以设置相对初始位置的移动，
       仅对自己有效，原先的位置还占着，不影响其他元素*/
     top: 50px;
     left: 100px;
 }
 /*鼠标悬浮更换样式*/
 div:hover {
     position: relative;
     left: 200px;
 }
 /*标签选择器优先级高于id选择器，id选择器要单独进行设置*/
 #d2:hover {
     position: relative;
     left: 300px;
 }
 </style>
 </head>
 <body>
   <div>div1</div>
   <div id="d2">div2</div>
   <div>div3</div>
 </body>
 </html>

显示效果：

 

6.3 绝对定位 absolute

格式：position：absolute

显示特点：元素脱离文档流（只要元素修改成绝对定位，则它所占的位置立马让出）

如何移动元素：通过top/bottom/left/right让元素相对于窗口（默认）或某一个上级元素（需要在上级元素中做相对定位）做位置偏移

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>absolute</title>
 <style type="text/css">
 body {
     margin: 0;
 }
 ​
 div {
     /*默认position：static*/
     width: 100px;
     height: 100px;
     border: 1px solid blue;
 }
 ​
 #d2 {
     /*position：absolute：元素脱离文档流
             位置相对于窗口，失去原先占的位置*/
     position: absolute;
     top: 50px;
     left: 100px;
 }
 ​
 /*d4的父标签*/
 #d3 {
     width: 200px;
     height: 200px;
     border: 5px dotted yellow;
     margin: 50px;
     /*只有此处设置为了relative，子集标签才能相对父级标签偏移，否则相对窗口位置进行偏移*/
     position: relative;
 }
 ​
 #d4 {
     width: 80px;
     height: 80px;
     background-color: pink;
     /*绝对定位：元素脱离文档流，失去先前占有的位置
             只有父级标签设置为relative，才能相对父级标签定位，否则相对窗口定位*/
     position: absolute;
     top: 50px;
     left: 50px;
 }
 ​
 #d5 {
     width: 80px;
     height: 80px;
     background-color: orange;
 }
 </style>
 </head>
 <body>
   <div>div1</div>
   <div id="d2">div2</div>
   <div id="d3">
     <div id="d4">div4</div>
     <div id="d5">div5</div>
   </div>
 </body>
 </html>

显示效果：

absolute测试：

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>absolute测试</title>
 <style type="text/css">
 /*设置外块*/
 div {
     width: 253px;
     padding: 10px;
     background-color: rgb(0, 0, 0, 0.3);
     position: relative; /*做位置参考*/
 }
 /*设置输入框*/
 input {
     width: 213px;
     border: 0; /*去掉文本框自带边框*/
     padding: 10px 20px;
 }
 /*设置图片*/
 img {
     position: absolute;
     right: 30px;
     top: 14px;
 }
 /*设置文字*/
 p {
     font-size: 12px;
     color: red;
     margin-top: 8px;
 }
 </style>
 </head>
 <body>
   <div>
     <input type="text" placeholder="请您输入用户名"> <img alt="图片加载失败"
       src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png">
     <p>用户名不能为空！</p>
   </div>
 </body>
 </html>

显示效果：

 

6.4 固定定位 fixed

格式：position：fixed

显示特点：脱离文档流，元素会固定在窗口的某个位置，不会随着内容改变而改变

如何移动元素：通过left/right/top/bottom相对于窗口做位置偏移

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>fixed</title>
 <style type="text/css">
 div {
     /*所有div标签属性*/
     width: 100px;
     height: 100px;
     border: 5px solid #fc3;
 }
 ​
 #d1 {
     /*绝对定位：元素脱离文档流，失去原先的位置*/
     position: absolute;
     top: 100px;
     left: 200px;
 }
 ​
 #d2 {
     /*固定定位：元素脱离文档流，失去原先的位置
             在有滚动条的情况下，始终相对窗口固定在该位置*/
     position: fixed;
     bottom: 100px;
     right: 200px;
 }
 ​
 img {
     width: 1200px;
 }
 </style>
 </head>
 <body>
   <div id="d1">div1</div>
   <div id="d2">div2</div>
   <div>div3</div>
   <img alt="图片加载失败" src="1.jpg">
 </body>
 </html>

显示效果：

6.5 浮动定位 float

格式：float：left/right；

显示特点：脱离文档流，元素从当前行向左或者向右浮动，当撞到上级元素边框或其它浮动元素时停止。如果一行显示不下就自动换行，换行时有可能卡住。如果元素的所有子元素全部浮动，则自动识别的高度为0，通过给元素添加：overflow：hidden解决。

如何移动元素：通过外边距

测试代码

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>float</title>
 <style type="text/css">
 /*如果有一个元素设置了浮动定位，其余元素（子元素）一般也设置为浮动定位*/
 #d1 {
     width: 200px;
     height: 100px;
     background-color: red;
     float: left;
 }
 ​
 #d2 {
     width: 300px;
     height: 150px;
     background-color: yellow;
     float: left;
 }
 ​
 #d3 {
     width: 400px;
     height: 200px;
     background-color: blue;
     float: left;
 }
 ​
 #d4 {
     width: 100px;
     height: 100px;
     background-color: pink;
     float: left;
 }
 ​
 #d5 {
     width: 50px;
     height: 50px;
     background-color: gray;
     float: left;
 }
 ​
 #d {
     width: 1500px;
     border: 2px solid orange;
     overflow: hidden; /*自动找到块级元素宽度*/
 }
 </style>
 </head>
 <body>
   <div id="d">
     <div id="d1">div1</div>
     <div id="d2">div2</div>
     <div id="d3">div3</div>
     <div id="d4">div4</div>
     <div id="d5">div5</div>
   </div>
 </body>
 </html>

显示效果：调整窗口大小时，自动出现在前一元素后，不足空间时换行，存在卡住问题（div5应该到新一行）

div块级元素高度为零：

设置overflow: hidden;自动匹配块级元素高度：但调整窗口大小时，元素不再进行换行

浮动定位练习：

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>float练习</title>
 <style type="text/css">
 ul,li{
  padding:0;/*去除表格自带的内填充、外边距*/
  margin:0;
  list-style:none;/*去除列表前面的样式*/
 }
 li{
   float:left;/*浮动定位*/
   
   /*简单方式*/
   /*margin-right:50px;*/
   
   width:90px;/*表格框宽度*/
   text-align:center;/*文字水平居中*/
   border:1px solid gray;/*添加边框*/
   margin-right:1px;/*框与框间隔*/
   padding:5px 5px;/*内填充*/
 }
 </style>
 </head>
 <body>
   <ul>
     <li>首页</li>
     <li>免费课</li>
     <li>直播课</li>
     <li>会员课</li>
     <li>精品课</li>
     <li>线上班</li>
     <li>线下班</li>
   </ul>
 </body>
 </html>

显示效果：

 

推荐阅读