第四周：浮动、定位、伪类、伪元素

最新推荐文章于 2024-08-09 10:42:44 发布

MeetChen123

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量339

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/MeetChen123/article/details/124340656

版权

文章目录

CSS定位机制

CSS定位机制

1.概述：

决定盒子在页面上的位置

2.分类：

（1）文档流

文档流定位是默认的定位方式。按照从上到下，从左到右的方式排列元素。
不同元素类型有不同的定位方式。

元素分类

1.block
特点：独占一行；元素的height、width、margin、padding都可设置
常见的block元素：

<div>、<p>、<h1>、<ol>、<ul>、<table>、<table>

将元素显示为block元素：

a{
   display:block;
 }

2.inline元素
特点：
不单独占用一行；
width、height不可设置；
width就是它包含的文字或图片的宽度，不可改变
常见的inline元素：

<span>、<a>

显示为inline元素：

 display:inline

inline元素之间有一个间距

<style type="text/css">
a{
     background:pink;
 }
</style>
<body>
   <a href="http://www.baidu.com">百度</a>
   <a href="http"//www.imooc.com">慕课网</a>
</body>

在这里插入图片描述
此时会出现一个空白间距，要解决这一问题，可以将inline类型转换成block等其他类型元素进行显示

3.inline-block元素

就是同事具备inline元素、block元素的特点\

特点：
不单独占用一行；
元素的height、width、margin、padding都可设置.

常见的inline-block元素:

<img>

显示为inline-block元素

display:inline-block;

自我练习

<!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">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #nav{
            width: 300px;
            margin: 100px auto;
            font-size: 0;
        }
        a{
            display: inline-block;
            width: 80px;
            height: 30px;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            border-bottom: 1px solid #ccc;
        }
        a:hover{
            color: white;
            background-color:  #ccc;
            border: 1px solid;
            border-left-color: orange;
            border-top-color: orange;
            border-right-color: orange;
        }
    </style>
</head>
<body>
       <div id="nav">
           <a href="#">链接1</a>
           <a href="#">链接2</a>
           <a href="#">链接3</a>
       </div>
</body>
</html>

效果图：
在这里插入图片描述

（2）浮动定位

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素)

float属性可以设定为三种不同的情况
left-左浮动
right-右浮动
none-不浮动

div{
    width:200px;
    height:200px;
    border:1px solid red;
    float:left;
 }

<div id="box1"></div>
<div id="box2"></div>

在这里插入图片描述
盒子box1与box2脱离了文档流原来位置

float用处：
在这里插入图片描述

在这里插入图片描述
float属性特点

clear属性

both,清除左右两边的浮动。
left和right只能清除一个方向的浮动。
none是默认值，只在需要移除已指定的清除值时用到。

单方向清除浮动的用法：
在这里插入图片描述
侧栏向右浮动，并且短于主内容区域。页脚于是按照浮动所要求的向上调到了可能的空间。

#footer{
     clear:both;
 }

（3）层定位

元素的位置重合，也没关系，即“可层叠”
相对于谁定位，且先浮动起来，再定位

position属性：
在这里插入图片描述

fixed 固定定位

相对于浏览器窗口进行定位，top，bottom，left，right，z-index有效。

在这里插入图片描述

relative 相对定位

相对于其直接父元素进行定位，top，bottom，left，right，z-index有效。

在这里插入图片描述

absolute 绝对定位

相对于static定位以外的第一个父元素进行定位，top，bottom，left，right，z-index有效。

在这里插入图片描述

MeetChen123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四周：浮动、定位、伪类、伪元素

文章目录CSS定位机制1.概述：2.分类：（1）文档流元素分类（2）浮动定位（3）层定位fixed 固定定位relative 相对定位absolute 绝对定位CSS定位机制1.概述：决定盒子在页面上的位置2.分类：（1）文档流文档流定位是默认的定位方式。按照从上到下，从左到右的方式排列元素。不同元素类型有不同的定位方式。元素分类1.block特点：独占一行；元素的height、width、margin、padding都可设置常见的block元素：<div>、&l
复制链接

扫一扫