2021.3.30 4.2 北京林业大学 web前端开发基础 CSS布局和定位*CSS定位机制

最新推荐文章于 2024-06-19 10:11:18 发布

小张喝奶茶了吗

最新推荐文章于 2024-06-19 10:11:18 发布

阅读量213

点赞数 1

分类专栏： web前端开发北京林业大学文章标签： html css

本文链接：https://blog.csdn.net/ITzz_qqzi/article/details/115317514

版权

web前端开发同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

北京林业大学

4 篇文章 0 订阅

订阅专栏

定位机制

元素放在哪，怎样排列

（一）文档流flow（默认方式）
从左到右、从上到下、有的元素单独占据一行
【display属性：用于转换元素类型】
1.block
独占一行、元素的height、width、margin、padding都可设置【常用元素：div、p、h1、ol、ul、table、form】

a{
	display:block;
}

如上，将inline元素a转换为block元素，从而使a元素具有块状元素特点。

2.inline
不单独占用一行、width、height不可设置、width就是它包含的文字或图片的宽度，不可改变【常用元素：span、a、img】
使元素显示为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>

3.inline-block
就是同时具备inline元素、block元素的特点、不单独占用一行、元素的height、width、margin、padding都可设置【常用元素：input】
使元素显示为inline-block元素display:inline-block;

4.元素相互转换（display）
display: none （元素不会被显示
）
display:block（显示为block元素
）
display:inline （显示为inline元素
）
display：inline-block（显示为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">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>index</title>
</head>
<body>
    <div id="box">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

#box {
    margin: 0 auto;
    front-size：0;
    width: 300px;
    color: blue;
}

a {
    display: inline-block;
    /*盒子的样式*/
    width: 80px;
    height: 30px;
    border-bottom: 1px solid white;
    /*超链接文本*/
    front-size: 14px;

}

a:hover {
    color: white;
    background-color: grey;
    border: 1px solid;
    border-top-color: orange;
    border-right-color: orange;
    border-left-color: orange;
}

（二）浮动定位float、clear
1.float属性
left—左浮动、right—右浮动、none—不浮动

可以实现div元素横向多列布局

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

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

如上，盒子box1与box2脱离了文档流原来位置
*左浮动默认页面左上角对齐（右浮动同理）

如果所有三个盒子向左浮动，页面宽度足够，则排列在一行内；若不够，则box3下降。

2 clear属性
clear：left——摆脱左浮动影响
clear：right——摆脱右浮动影响
clear：both——摆脱两侧浮动影响
clear：none ——默认值，只在需要移除已指定的清除值时用到

<!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" type="text/css" href="style1.css">
    <title>index</title>
</head>
<body>
    <div id="container">
        <div id="aside"> </div>
        <div id="content"></div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

#container {
    margin: 0 auto;
    border: 2px;
    width: 900px;
}

#aside {
    width: 200px;
    height: 500px;
    background-color: cornflowerblue;
    float: left;
}

#content {
    width: 695px;
    height: 500px;
    background-color: cyan;
    float: right;
}

如下图所示：
在这里插入图片描述

（三）层定位layer（position属性）
像图层一样叠加在一起，有叠加的效果

1.position属性（相对于谁来定位）
static 默认值，没有定位，元素出现在正常的文档流中
fixed 固定定位，相对于浏览器窗口
relative 相对定位，相对于元素原来的位置
absolute 绝对定位，相对于static定位以外的第一个父元素

2.通过以下属性定位（位置在哪里）
以外层为参照物
（二维）用top、right、bottom、left确定位置
（三维）z-index：值大在上面

<style>
        #fix-box{
            width: ;
            height: ;
            border: 1px;
            position: fixed;
        }
    </style>

3.做一个固定定位（fixed）的页面

<!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>index</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            margin: 0 auto;
            height: 3600px;
            width: 800px;
        }
        #fix-box{
            position: fixed;
            height: 500px;
            width: 200px;
            right: 8px;
            top: 20px;
            background-color: gray;
        }
        #main{
            height: 3600px;
            width: 800px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div id="fix-box"></div>
    <div id="container">
        <div id="main"></div>
    </div>
</body>
</html>

如下图所示
在这里插入图片描述
4.相对定位（relative）
5.绝对定位（absolute）
脱离文档流，会影响后续元素。其父层并不一定为直接父元素，而必须为绝对或相对定位元素。如果父层都未曾定位relative或absolute，则其将会相对body进行定位。
6.relative+absolute “子绝父相”
父元素box1：relative；
子元素box2：absolute；
子元素box2的top、right、bottom、left将相对于父元素box1进行偏移

“子绝父相”代码如下：

<!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>index</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            margin: 0 auto;
            width: 300px;
            height: 300px;
        }
        #box1{
            margin-top: 100px;
            position: relative;
            height: 200px;
            width: 200px;
            background-color: mediumblue;
        }
        #box2{
            width: 60px;
            height: 60px;
            position: absolute;

            left: 70px;
            top: -30px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="box1">
            <div id="box2"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
7.粘性定位（sticky）
相对于可以滚动的最近的父元素进行定位。

粘性导航条代码如下：

<!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>index</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            margin: 0 auto;
            width: 600px;
            height: 3000px;
        }
        #header{
            position: sticky;
            height: 200px;
            width: 600px;
            top: 0;
            background-color: lightyellow;
        }
        #main{
            width: 600px;
            height: 1600px;
            background-color: lightskyblue;
        }
        #footer{
            width: 600px;
            height: 200px;
            background-color: lightslategrey;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">页眉</div>
        <div id="main">内容</div>
        <div id="footer">页脚</div>
    </div>
</body>
</html>

小张喝奶茶了吗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021.3.30 4.2 北京林业大学 web前端开发基础 CSS布局和定位*CSS定位机制

定位机制元素放在哪，怎样排列（一）文档流flow（默认方式）从左到右、从上到下、有的元素单独占据一行【display属性：用于转换元素类型】1.block独占一行、元素的height、width、margin、padding都可设置【常用元素：div、p、h1、ol、ul、table、form】a{ display:block;}如上，将inline元素a转换为block元素，从而使a元素具有块状元素特点。2.inline不单独占用一行、width、height不可设置、width
复制链接

扫一扫