CSS快速入门（二）

最新推荐文章于 2024-07-08 22:40:20 发布

xaiozhu`s code

最新推荐文章于 2024-07-08 22:40:20 发布

阅读量73

点赞数 3

分类专栏：前端，CSS，HTML HTML 文章标签： html css 定位

本文链接：https://blog.csdn.net/zy12344321/article/details/117557121

版权

前端，CSS，HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

一、CSS浮动

1.css浮动简介

（1）CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧。
（2）float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动。
（3）float 属性的常用值包括:
left 靠左浮动
right 靠右浮动
none 不浮动

2.css左右浮动

注：左右浮动类似。

3.css清除浮动

二、CSS定位

1.css定位简介

（1）CSS 中 position 规定了元素的定位方式。
（2）CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置。
（3）position 属性的可选值包括:
relative 相对定位
absolute 绝对定位
fixed 固定定位
static 默认值

2.css相对定位

3.css绝对定位

4.css固定定位

固定定位代码示例及效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>固定定位</title> 
<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

5.css粘滞定位

粘滞定位代码及效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>粘滞定位</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

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

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

xaiozhu`s code

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS快速入门（二）

一、CSS浮动1.css浮动简介CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动float 属性的常用值包括:left 靠左浮动right 靠右浮动none 不浮动...
复制链接

扫一扫