CSS-posiziton

1. 想要实现，”返回顶部”永远位于页面的右下角。需要用到position函数。CSS:层叠样式表。用到了分层的功能。

position:fixed; 永远固定在一个地方。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="width:50px;height:50px;background-color:black;color:white;position:fixed;bottom:20px;right:20px;">返回顶部</div><div style="height:5000px;background-color:#dddddd;"></div>
</body>
</html>

运行结果：总是位于页面的右下角

2. margin-top:52px; 让它离上面是52px，这样两层就没有重叠的部分了，有了2px的间距，文字就能正常显示了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.pg-header{background-color:#FF83FA;height:50px;position:fixed;top:0px;left:0px;right:0px;}.pg-body{background-color:#dddddd;height:5000px;margin-top:52px;}</style>
</head>
<body><div class="pg-header">头部</div><div class="pg-body">内容</div>
</body>
</html>

运行效果：

3. 插播：

margin:0 auto; 是设置对象四边的外延边距，被称为外补丁或外边距。指的是：上下=0；左右自动居中。

text-align:center 是规定元素中的文本的水平对齐方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="position:relative;width:500px;height:400px;border:1px solid red;margin:0 auto;"></div>
</body>
</html>

运行结果：

关于height与line-height的说明：

line-height是行高，height就是高，通常height是对于某个框架或者图片来弄的，line-height用于文字。

如果要实际效果你可以写一段文字，分好几行，然后对它做line-height属性，就会注意到变化了。

比如：
<div >abc<br/>abc<br/>abc<br/>abc<br/>abc<br/></div>
调整20px这个值，行间距就会发生变化

另外，line-height和height组合到一块儿，还有一种效果，就是如果把它们的值设置的一样了，文字就会在垂直方向居中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"/>
</head><body><div style="height:200px;width:200px;line-height:100px;background-color:#dddddd;">abc<br/>abc<br/></div>
</body>
</html>

运行结果：所以如果设置行间距=height的话，就把屏幕一劈两半，达到了垂直居中的效果了。

最终总结：

height:100px; line-height:100px;-----------实现了垂直居中。

text-align:center;-----------实现了文字的水平居中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
</head>
<body><div style="width:200px;height:200px;background-color:#dddddd;position:relative;"><div style="width:100px;background-color:red;position:absolute;left:50px;right:50px;top:50px;bottom:50px;height:100px;line-height:100px;text-align:center;">中中中</div></div>
</body>
</html>

效果图：

4. relative+absolute：

relative单独存在的时候没有任何意义。

<div style="position:absolute; top:0; left:0;"></div> 放在父类标签的某个位置。

left:0可以改成left:-15px; 这样就会位于父类的左边的外面。不一定非要位于父类的里面。只不过是以父类作为参照位置罢了。

　　定义了position:absolute以后；就可以定义 left:0; right:0; bottom:0; top:0 这四个属性了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="position:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;"><div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color:black;"></div></div><div style="position:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;"><div style="position:absolute;right:0;bottom:0;width:50px;height:50px;background-color:black;"></div></div><div style="position:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;"><div style="position:absolute;right:0;top:0;width:50px;height:50px;background-color:black;"></div></div>
</body>
</html>

运行结果：

5. 用三层实现弹窗的效果：

可以说3层是并列关系：

第1层，正常设置就可以了。

第2层和第3层是漂层，所以需要设置position：fixed，为了控制哪一层在最上面，还需要设置Z-index。为了能看到效果，第2层还需要设置opacity，否则会把第1层档得严严实实。

opacity:0.3; 0.3----1直接，设置当前的透明度。opacity是不透明，暧昧的意思。Z-index: 谁的这个值大，谁就在上面。fixed之后，相当于漂起来了，就无法通过margin：0 auto 设置居中了。定义了 position：fixed 以后，必须定义上下左右中的至少两项，否则不知道漂在哪个位置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="z-index:10;position:fixed;top:50%;left:50%;background-color:white;height:400px;width:500px;"></div><div style="position:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;"></div><div style="height:5000px;background-color:green;">sss</div>
</body>
</html>

运行结果：以左上角为参考点，50%-50%居中了。

6. 加上 margin-left:-250px; margin-top:-200px; 回到中间了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color:white;height:400px;width:500px;"></div><div style="position:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;"></div>　　<div style="height:5000px;background-color:green;">sss</div>
</body>
</html>

运行结果：

7. display:none 的勾选和不勾选，就能实现折层的出现和不出现。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="display:none;z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color:white;height:400px;width:500px;"><input type="text"/><input type="text"/></div><div style="position:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;"></div><div style="height:5000px;background-color:green;">sss</div>
</body>
</html>

运行结果：

转载于:https://www.cnblogs.com/momo8238/p/7421818.html

CSS-posiziton相关推荐

ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
前端之css基础学习（更正版）
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
CSS单位分析及CSS颜色表示法、颜色表（调色板）
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

CSS-posiziton

CSS-posiziton相关推荐

最新文章

热门文章