CSS 基础【3】

最新推荐文章于 2022-10-17 13:48:12 发布

爱好是吃的蓝胖

最新推荐文章于 2022-10-17 13:48:12 发布

阅读量101

点赞数

分类专栏： css基础文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_61044901/article/details/123362329

版权

css基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

11.CSS Position(定位)

设置html元素应当显示在浏览器的指定位置。

position 属性的五个值：static absolute relative fixed sticky

1）static:HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

正常的文档流对象：按照从左向右排列，一行排列满了以后自动换到第二行，以此类推。
块级元素前后自动换行

<!DOCTYPE html>

<head>

<title>static</title>

</head>

<body>

<a href="#">测试HTML的定位设置</a>

<h1>static:没有定位，遵循正常的文档流对象</h1>

<b>按照从左向右排列，一行排列满了以后自动换到第二行，以此类推。</b>

<span>块级元素前后自动换行</span>

</body>

</html>

2）absolute[绝对定位]:相对【最近的】【已定位】【父元素】

如果元素没有已定位的父元素，那么它的位置相对于<html>
absolute 定位使元素的位置与文档流无关，因此不占据空间。
元素使用的顶部top,底部bottom，左侧left和右侧right属性,设置元素位置。

<!DOCTYPE html>

<head>

<title>absolute:绝对定位</title>

<style>

div{

width: 200px;

height: 200px;

background-color: red;

position: absolute;

top: 100px;

left: 100px;

}

img{

width: 100px;

height: 100px;

position: absolute;

top: 100px;

left: 100px;

}

</style>

</head>

<body>

<h2>absolute:绝对定位</h2>

<h2>如果元素没有已定位的父元素,那么它的位置相对于html</h2>

<h2>absolute 定位使元素的位置与文档流无关，因此不占据空间。</h2>

<h2>元素使用的顶部top,底部bottom,左侧left和右侧right属性,设置元素位置</h2>

<div>

</div>

</body>

</html>

3）relative[相对定位]：相对其正常位置【没用定位之前的位置】

移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
元素使用的顶部top,底部bottom，左侧left和右侧right属性,设置元素位置。

<!DOCTYPE html>

<head>

<title>relative[相对定位]</title>

<style>

div{

width:200px;

height: 200px;

background-color:red ;

position: relative;

top: 100px;

left: 100px;

}

img{

width:100px;

height:100px;

position:absolute;

top: 100px;

left: 100px;

}

</style>

</head>

<body>

<h1>relative[相对定位]</h1>

<h1>相对其正常位置【没用定位之前的位置】</h1>

<h1>元素使用的顶部top,底部bottom,左侧left和右侧right属性,设置元素位置。</h1>

<h1>移动相对定位元素，但它原本所占的空间不会改变。</h1>

<h1> 相对定位元素经常被用来作为绝对定位元素的容器块。</h1>

<div>

</div>

</body>

</html>

4）fixed【固定定位】:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.

fixed定位使元素的位置与文档流无关，因此不占据空间。
元素使用的顶部top,底部bottom，左侧left和右侧right属性,设置元素位置。

<!DOCTYPE html>

<head>

<title>fixed【固定定位】</title>

<style>

div{

width: 200px;

height: 200px;

background-color: red;

position: fixed;

top: 100px;

left: 100px;

}

img{

width:100px;

height:100px;

position: fixed;

top: 100px;

left: 100px;

}

</style>

</head>

<body>

<h1>fixed【固定定位】</h1>

<h1>元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.</h1>

<h1>fixed定位使元素的位置与文档流无关,因此不占据空间。</h1>

<h1>元素使用的顶部top,底部bottom,左侧left和右侧right属性,设置元素位置。</h1>

<h1>fixed【固定定位】</h1>

<h1>元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.</h1>

<h1>fixed定位使元素的位置与文档流无关,因此不占据空间。</h1>

<h1>元素使用的顶部top,底部bottom,左侧left和右侧right属性,设置元素位置。</h1>

<h1>fixed【固定定位】</h1>

<h1>元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.</h1>

<h1>fixed定位使元素的位置与文档流无关,因此不占据空间。</h1>

<h1>元素使用的顶部top,底部bottom,左侧left和右侧right属性,设置元素位置。</h1>

<h1>fixed【固定定位】</h1>

<h1>元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.</h1>

<h1>fixed定位使元素的位置与文档流无关,因此不占据空间。</h1>

<h1>元素使用的顶部top,底部bottom,左侧left和右侧right属性,设置元素位置。</h1>

<div>

</div>

</body>

</html>

5）sticky 粘性定位:粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换。

粘性定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

<!DOCTYPE html>

<head>

<title>sticky粘性定位</title>

<style>

div.sticky{

border: 2px solid red;

background-color: yellow;

padding: 20px;

position: sticky;

top: 0;

}

</style>

</head>

<body>

<p>尝试滚动页面</p>

<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位！</div>

<p>来回滚动我</p>

<p>来回滚动我</p>

<p>来回滚动我</p>

</div>

</body>

</html>

12.重叠元素

z-index属性指定了一个元素的堆叠顺序
整数数字
需要设置position属性

<!DOCTYPE html>

<head>

<title>zindex</title>

<style>

div{

width: 200px;

height: 200px;

}

#div1{

background-color: red;

z-index: 1;

}

#div2{

background-color: blue;

position: absolute;

top: 50px;

z-index: 2;

}

#div3{

background-color: yellow;

position: absolute;

top: 100px;

z-index: 3;

}

#div4{

background-color: aquamarine;

position: absolute;

top: 150px;

z-index: 4;

</style>

</head>

<body>

</body>

</html>

13.CSS布局

Overflow:属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

visible   默认值。内容不会被修剪，会呈现在元素框之外。
       hidden   内容会被修剪，并且其余内容是不可见的。
       scroll   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

<!DOCTYPE html>

<head>

<title>Overflow</title>

<style>

div{

width: 400px;

height: 400px;

background-color: red;

overflow: hidden;

border: 2px dotted black;

}

</style>

</head>

<body>

<h1>Overflow:属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。</h1>

<h1>visible 默认值。内容不会被修剪，会呈现在元素框之外。</h1>

<h1>hidden 内容会被修剪，并且其余内容是不可见的。</h1>

<h1>scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</h1>

<div>

</div>

</body>

</html>

Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
       元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
       浮动元素之后的元素将围绕它。
       浮动元素之前的元素将不会受到影响。
       如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。