css 选择器三
2.4.10 浮动
浮动是css里面布局最多的一个属性,也是很重要的一个属性。
float:表示浮动的意思。它有四个值。
- none: 表示不浮动,默认
- left: 表示左浮动
- right:表示右浮动
看一个例子
html结构:
- <div class="box1"></div>
- <div class="box2"></div>
- <span>路飞学城</span>
css样式:
- .box1{
- width: 300px;
- height: 300px;
- background-color: red;
- float:left;
- }
- .box2{
- width: 400px;
- height: 400px;
- background-color: green;
- float:right;
- }
- span{
- float: left;
- width: 100px;
- height: 200px;
- background-color: yellow;
- }
我们会发现,三个元素并排显示,.box1和span因为是左浮动,紧挨在一起,这种现象贴边。.box2盒子因为右浮动,所以紧靠着右边。
那么浮动如果大家想学好,一定要知道它的四大特性
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果
浮动元素脱标
脱标:就是脱离了标准文档流
看例子
- <div class="box1">小红</div>
- <div class="box2">小黄</div>
- <span>小马哥</span>
- <span>小马哥</span>
- .box1{
- width: 200px;
- height: 200px;
- background-color: red;
- float: left;
- }
- .box2{
- width: 400px;
- height: 400px;
- background-color: yellow;
- }
- span{
- background-color: green;
- float: left;
- width: 300px;
- height: 50px;
- }
效果:红色盒子压盖住了黄色的盒子,一个行内的span标签竟然能够设置宽高了。
原因1:小红设置了浮动,小黄没有设置浮动,小红脱离了标准文档流,其实就是它不在页面中占位置了,此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象,也有一种叫法,浮动元素“飘起来了”,但我不建议大家这样叫。
原因2:所有的标签一旦设置浮动,就能够并排,并且都不区分行内、块状元素,都能够设置宽高
浮动元素互相贴靠
看例子
html结构
- <div class="box1">1</div>
- <div class="box2">2</div>
- <div class="box3">3</div>
- .box1{
- width: 100px;
- height: 400px;
- float: left;
- background-color: red;
- }
- .box2{
- width: 150px;
- height: 450px;
- float: left;
- background-color: yellow;
- }
- .box3{
- width: 300px;
- height: 300px;
- float: left;
- background-color: green;
- }
效果发现:
如果父元素有足够的空间,那么3哥紧靠着2哥,2哥紧靠着1哥,1哥靠着边。
如果没有足够的空间,那么就会靠着1哥,如果再没有足够的空间靠着1哥,自己往边靠
浮动元素字围效果
html结构:
- <div>
- <img src="./images/企业1.png" alt="">
- </div>
- <p>
- 123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞 路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
- </p>
css样式:
- *{
- padding: 0;
- margin: 0;
- }
- div{
- float: left;
- }
- p{
- background-color: #666;
- }
效果发现:所谓字围效果,当div浮动,p不浮动,div遮盖住了p,div的层级提高,但是p中的文字不会被遮盖,此时就形成了字围效果。
浮动元素紧凑效果
收缩:一个浮动元素。如果没有设置width,那么就自动收缩为文字的宽度(这点跟行内元素很像)
html结构:
- <div>
- alex
- </div>
css样式:
- div{
- float: left;
- background-color: red;
- }
大家一定要谨记:关于浮动,我们初期一定要遵循一个原则,永远不是一个盒子单独浮动,要浮动就要一起浮动。另外,有浮动,一定要清除浮动
为什么要清除浮动
在页面布局的时候,每个结构中的父元素的高度,我们一般不会设置。(为什么?)
大家想,如果我第一版的页面的写完了,感觉非常爽,突然隔了一个月,老板说页面某一块的区域,我要加点内容,或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白,肯定是去每个地方加内容,改图片,然后修改父盒子的高度。那问题来了,这样不影响开发效率吗?答案是肯定的。
看一个效果:
html效果:
- <div class="father">
- <div class="box1"></div>
- <div class="box2"></div>
- <div class="box3"></div>
- </div>
- <div class="father2"></div>
css样式:
- *{
- padding: 0;
- margin: 0;
- }
- .father{
- width: 1126px;
- /*子元素浮动 父盒子一般不设置高度*/
- /*出现这种问题,我们要清除浮动带来影响*/
- /*height: 300px;*/
- }
- .box1{
- width: 200px;
- height: 500px;
- float: left;
- background-color: red;
- }
- .box2{
- width: 300px;
- height: 200px;
- float: left;
- background-color: green;
- }
- .box3{
- width: 400px;
- float: left;
- height: 100px;
- background-color: blue;
- }
- .father2{
- width: 1126px;
- height: 600px;
- background-color: purple;
- }
效果发现:如果不给父盒子一个高度,那么浮动子元素是不会填充父盒子的高度,那么此时.father2的盒子就会跑到第一个位置上,影响页面布局。
那么我们知道,浮动元素确实能实现我们页面元素并排的效果,这是它的好处,同时它还带来了页面布局极大的错乱!!!所以我们要清除浮动
还好还好。我们有多种清除浮动的方法,在这里给大家介绍四种:
- 给父盒子设置高度
- clear:both
- 伪元素清除法
- overflow:hidden
给父盒子设置高度
这个方法给大家上个代码介绍,它的使用不灵活,一般会常用页面中固定高度的,并且子元素并排显示的布局。比如:导航栏
clear:both
clear:意思就是清除的意思。
有三个值:
left:当前元素左边不允许有浮动元素
right:当前元素右边不允许有浮动元素
both:当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div,并且该元素不浮动,然后设置clear:both。
html结构:
- <div>
- <ul>
- <li>Python</li>
- <li>web</li>
- <li>linux</li>
- <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ,然后设置clear:both 清除别人对我的浮动影响-->
- <!-- 内墙法 -->
- <!-- 无缘无故加了div元素 结构冗余 -->
- <div class="clear"></div>
- </ul>
- </div>
- <div class="box">
- </div>
css样式
- *{
- padding: 0;
- margin: 0;
- }
- ul{
- list-style: none;
- }
- div{
- width: 400px;
- }
- div ul li {
- float: left;
- width: 100px;
- height: 40px;
- background-color: red;
- }
- .box{
- width: 200px;
- height: 100px;
- background-color: yellow;
- }
- .clear{
- clear: both;
- }
- 复制代码
伪元素清除法(常用)
给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置
- .clearfix:after{
- /*必须要写这三句话*/
- content: '.';
- clear: both;
- display: block;
- }
新浪首页推荐伪元素清除法的写法
- /*新浪首页清除浮动伪元素方法*/
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden
overflow:hidden(常用)
overflow属性规定当内容溢出元素框时发生的事情。
说明:
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
有五个值:
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow:hidden清除法。
其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522
到此为止。关于浮动的实现并排、清除浮动的四个用法已经介绍完毕,大家一定要熟记于心。
2.4.11 margin的用法
当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑。
我们来看一个例子:
html结构:
- <div class="father">
- <div class="box1"></div>
- <div class="box2"></div>
- </div>
css样式:
- *{
- padding: 0;
- margin: 0;
- }
- .father{
- width: 400px;
- overflow: hidden;
- border: 1px solid gray;
- }
- .box1{
- width: 300px;
- height: 200px;
- background-color: red;
- margin-bottom: 20px;}
- .box2{
- width: 400px;
- height: 300px;
- background-color: green;
- margin-top: 50px;
- }
当给两个标准流下兄弟盒子 设置垂直方向上的margin时,那么以较大的为准,那么我们称这种现象叫塌陷。没法解决,我们称为这种技巧叫“奇淫技巧”。记住这种现象,在布局垂直方向盒子的时候主要margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后,就不会出现margin塌陷的问题。
margin:0 auto;
- div{
- width: 780px;
- height: 50px;
- background-color: red;
- /*水平居中盒子*/
- margin: 0px auto;
- /*水平居中文字*/
- text-align: center;
- }
当一个div元素设置margin:0 auto;时就会居中盒子,那我们知道margin:0 auto;表示上下外边距离为0,左右为auto的距离,那么auto是什么意思呢?
设置margin-left:auto;我们发现盒子尽可能大的右边有很大的距离,没有什么意义。当设置margin-right:auto;我们发现盒子尽可能大的左边有很大的距离。当两条语句并存的时候,我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。
另外如何给盒子设置浮动,那么margin:0 auto失效。
使用margin:0 auto;注意点:
1.使用margin: 0 auto;水平居中盒子必须有width,要有明确width,文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了,固定定位,绝对定位(后面会讲),margin:0 auto; 不能用了
3.margin:0 auto;居中盒子。而不是居中文本,文字水平居中使用text-align: center;
另外大家一定要知道margin属性是描述兄弟盒子的关系,而padding描述的是父子盒子的关系
善于使用父亲的padding,而不是margin
如果让大家实现如图的效果,应该有不少的同学做不出来。
那么我们来看看这个案例,它的坑在哪里?
下面这个代码应该是大家都会去写的代码。
- *{
- padding: 0;
- margin: 0;
- }
- .father{
- width: 300px;
- height: 300px;
- background-color: blue;
- }
- .xiongda{
- width: 100px;
- height: 100px;
- background-color: orange;
- margin-top: 30px;
- }
因为父亲没有border,那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了,一旦给父亲一个border发现就好了。
那么问题来了,我们不可能在页面中无缘无故的去给盒子加一个border,所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。
2.4.12 文本属性和字体属性
文本属性:
1. 文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值:none | center | left | right | justify
2. 文本颜色
color属性
3. 文本首行缩进
text-indent 属性规定元素首行缩进的距离,单位建议使用em
4. 文本修饰
text-decoration属性规定文本修饰的样式
属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
5. 行高
line-height就是行高的意思,指的就是一行的高度
字体属性:
1. 字体大小
font-size表示设置字体大小,如果设置成inherit
表示继承父元素的字体大小值。
2. 字体粗细
font-weight表示设置字体的粗细
属性值:none(默认值,标准粗细) | bold(粗体) | border(更粗)| lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold)| inherit(继承父元素字体的粗细值)
3. 字体系列
font-family
- font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。
行高 line-height
针对单行文本垂直居中
公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。
第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px
第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
font-family介绍
使用font-family注意几点:
1.网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装,
比如你设置: font-family: "华文彩云"; 如果用户电脑里面没有这个字体,
那么就会变成宋体
页面中,中文我们只使用: 微软雅黑、宋体、黑体。
如果页面中,需要其他的字体,那么需要切图。 英语:Arial 、 Times New Roman
2.为了防止用户电脑里面,没有微软雅黑这个字体。
就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面,
没有安装微软雅黑字体,那么就是宋体:
font-family: "微软雅黑","宋体"; 备选字体可以有无数个,用逗号隔开。
3.我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,
就自动的变为后面的中文字体:
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体,都有英语别名,
我们也要知道: 微软雅黑的英语别名:
font-family: "Microsoft YaHei";
宋体的英语别名: font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一: font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比,表示字号的百分之多少。
一般来说,都是大于100%的,因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来,比如: font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
2.4.13 超链接导航栏案例
直接上代码了
html结构
- <div class="nav">
- <ul>
- <li>
- <a href="">路飞学城</a>
- </li>
- <li>
- <a href="">老男孩</a>
- </li>
- <li>
- <a href="">网站导航</a>
- </li>
- <li>
- <a href="">网站导航</a>
- </li>
- <li>
- <a href="">网站导航</a>
- </li>
- <li>
- <a href="">网站导航</a>
- </li>
- </ul>
- </div>
写好上面的结构代码之后,也就是将我们页面展示的内容显示了,但是我们此时要利用我们学过的知识点来布局页面
首先我们要做导航栏,并排显示元素,第一想 浮动,想到使用浮动之后,一定记得清除浮动元素。
css代码如下:
- *{
- padding: 0;
- margin: 0;
- }
- ul{
- list-style: none;
- }
- .nav{
- width: 960px;
- /*height: 40px;*/
- overflow: hidden;
- margin: 100px auto ;
- background-color: purple;
- /*设置圆角*/
- border-radius: 5px;
- }
- .nav ul li{
- float: left;
- width: 160px;
- height: 40px;
- line-height: 40px;
- text-align: center;
- }
- .nav ul li a{
- display: block;
- width: 160px;
- height: 40px;
- color: white;
- font-size: 20px;
- text-decoration: none;
- font-family: 'Hanzipen SC';
- }
- /*a标签除外,不继承父元素的color*/
- .nav ul li a:hover{
- background-color: red;
- font-size: 22px;
- }
2.4.14 background
先来讲讲颜色表示法
一共有三种:单词、rgb表示法、十六进制表示法
rgb:红色 绿色 蓝色 三原色
光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。
用逗号隔开,r、g、b的值,每个值的取值范围0~255,一共256个值。
如果此项的值,是255,那么就说明是纯色:
黑色:
光学显示器,每个元件都不发光,黑色的。
白色:
颜色可以叠加,比如黄色就是红色和绿色的叠加:
再比如:
就是红、绿、蓝三种颜色的不同比例叠加。
16进制表示法
红色:
所有用#开头的值,都是16进制的。
#ff0000:红色
16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的?我们介绍一下
我们现在看一下10进制中的基本数字(一共10个):
0、1、2、3、4、5、6、7、8、9
16进制中的基本数字(一共16个):
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
16进制对应表:
十进制数 十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f
16 10
17 11
18 12
19 13
……
43 2b
……
255 ff
十六进制中,13 这个数字表示什么?
表示1个16和3个1。 那就是19。 这就是位权的概念,开头这位表示多少个16,末尾这位表示多少个1。
小练习:
16进制中28等于10进制多少?
答:2*16+8 = 40。
16进制中的2b等于10进制多少?
答:2*16+11 = 43。
16进制中的af等于10进制多少?
答:10 * 16 + 15 = 175
16进制中的ff等于10进制多少?
答:15*16 + 15 = 255
所以,#ff0000就等于rgb(255,0,0)
等价于:
所以,任何一种十六进制表示法,都能够换算成为rgb表示法。也就是说,两个表示法的颜色数量,一样。
十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc;
比如:
等价于
比如:
等价于
只能上面的方法简化,比如
无法简化!
再比如
无法简化!
要记住:
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
background-color属性表示背景颜色
background-img:表示设置该元素的背景图片
那么发现默认的背景图片,水平方向和垂直方向都平铺
background-repeat:表示设置该元素平铺的方式
属性值:
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
给元素设置padding之后,发现padding的区域也会平铺背景图片。
repeat应用案例
还是上面那个超链接导航栏的案例,我们给body设置平铺的图片,注意:一定找左右对称的平铺图片,才能实现我们要的效果
background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像(由 background-image 定义)的位置
属性值:
值 | 描述 |
---|---|
|
如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0 0; 这两个值必须挨在一起。 |
雪碧图技术(精灵图技术)
CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分
CSS 雪碧图应用原理:
只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?
其实就是 截取 大图一部分显示,而这部分就是一个小图标。
使用雪碧图的好处:
1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便
不足:
1)CSS雪碧的最大问题是内存使用
2)拼图维护比较麻烦
3)使CSS的编写变得困难
4)CSS 雪碧调用的图片不能被打印
我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大,
那么我们可以此属性来制作通天banner。
- background: red url('./images/banner.jpg') no-repeat center top;
background-attach
设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动
2.4.15 定位
定位有三种:
1.相对定位 2.绝对定位 3.固定定位
这三种定位,每一种都暗藏玄机,所以我们要一一单讲。
1. 相对定位
相对定位:相对于自己原来的位置定位
现象和使用:
1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。
2.设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right
特性:
1.不脱标
2.形影分离
3.老家留坑(占着茅房不拉屎,恶心人)
所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
用途:
1.微调元素位置
2.做绝对定位的参考(父相子绝)绝对定位会说到此内容。
参考点:
自己原来的位置做参考点。
2. 绝对定位
特性:
1.脱标 2.做遮盖效果,提成了层级。设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。
参考点(重点):
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。
2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。
还要注意,绝对定位的盒子无视父辈的padding
作用:页面布局常见的“父相子绝”,一定要会!!!!
绝对定位的盒子居中
当做公式记下来吧!
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <style type="text/css" media="screen">
- *{
- padding: 0;
- margin: 0;
- }
- input,button{
- outline: none;
- border: 0;
- }
- .search{
- width: 296px;
- height: 48px;
- margin: 100px auto;
- }
- .search form{
- position: relative;
- }
- .search input[type='text']{
- width: 223px;
- height: 48px;
- font-size: 14px;
- border: 1px solid #e0e0e0;
- padding: 0 5px;
- position: absolute;
- }
- .search span{
- font-size: 12px;
- background-color: #eee;
- padding: 0 5px;
- position: absolute;
- top: 0;
- right: 0;
- }
- .search span.t{
- top: 20px;
- right: 162px;
- z-index: 2;
- }
- .search span.s{
- top: 20px;
- right: 82px;
- z-index: 1;
- }
- .search input[type='submit']{
- height: 48px;
- width: 50px;
- border: 1px solid #e0e0e0;
- background: #fff;
- position: absolute;
- right: 12px;
- top: 0px;
- }
- </style>
- </head>
- <body>
- <div class="search">
- <form>
- <input type="text" name=""><input type="submit" value="按钮">
- <span class="t">小米8</span>
- <span class="s">小米MIX 2S</span>
- </form>
- </div>
- </body>
- </html>
设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中
3. 固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖,提升层级 3.固定不变
参考点:
设置固定定位,用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述,那么是以浏览器的左下角为参考点
作用: 1.返回顶部栏 2.固定导航栏 3.小广告
2.4.16 z-index
这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况。
- z-index 值表示谁压着谁,数值大的压盖住数值小的,
- 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
- z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
- 从父现象:父亲怂了,儿子再牛逼也没用
css 选择器三的更多相关文章
- 大家好,又是新的一天。今天给大家带来一些新的知识:选择器的种类和css的三种样式
今天我们为大家 选择了 六种 选择器: 1. 标签选择器 2.id选择器 3.class选择器 4.后代选择器 5.子代选择器 6.交集选择器 我们就举三个典型的例子:后代选择器,子代选择器和交集选择 ...
- 第三百四十节,Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器
第三百四十节,Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器 css选择器 1. 2. 3. ::attr()获取元素属性,css选择器 ::text获取标签文本 举例: extr ...
- HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- HTML-HTML5+CSS3权威指南阅读(三、CSS选择器)
1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- css考核点整理(三)-css选择器的使用
css选择器的使用
- CSS选择器(CCS第三版)
什么是选择器? CSS选择器就是使样式找到应用对象. 简单选择器(Simple selectors) 在日常开发中,最常用的选择器,也是最基本的选择器. 元素选择器(Type selector) 针对 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
随机推荐
- Why database migrations?
https://flywaydb.org/getstarted/why First, let's start from the beginning and assume we have a proje ...
- Lazarus分体式改成一体式窗口
安装包 anchordocking和Sparta_DockedFormEditor 然后点选保存并重新编译IDE即可
- P3727 曼哈顿计划E
点分治+SG函数还真是令人意外的组合啊 思路 这道题看到找一条满足条件的链,想到点分治 看到博弈,想到SG函数 然后就变成一道SG函数+点分治的题了 然后1e9的SG函数怎么搞?当然是打表了 然后各种 ...
- p1110 报表统计(FHQ-TREAP/TREAP)
平衡树的裸题,操作都相当简单 写了一个FHQ,但是奈何常数太大,实在过不去 最后写了一个Treap开O2水过 TREAP代码 #include <cstdio> #include < ...
- 谷歌大规模机器学习:模型训练、特征工程和算法选择 (32PPT下载)
本文转自:http://mp.weixin.qq.com/s/Xe3g2OSkE3BpIC2wdt5J-A 谷歌大规模机器学习:模型训练.特征工程和算法选择 (32PPT下载) 2017-01-26 ...
- 【C#】 Method invocation is skipped
相信大家看到这个标题也是一头雾水了. 这个问题主要是我在项目中遇到了一个问题, 然后我通过搜索引擎搜索的关键词进而找到了answer, 我先描述一下我遇到的问题: 做项目的时候我发现log时常没有输出 ...
- 1、Keepalived及VRRP原理介绍
keepalived:即在linux中vrrp协议的实现 http://www.keepalived.org/ 什么是Keepalived? Keepalived是一个用C语言编写的路由软件.该项目 ...
- Go 字典(Map)
比较熟悉 Python 的对于字典肯定不会陌生,在 Go 中 map 就是 Python 中字典的概念,它的基本格式是 map[keyType]valueType .map 的读取和设置和 slice ...
- React Native原生模块向JS传递数据的几种方式(Android)
一般情况可以分为三种方式: 1. 通过回调函数Callbacks的方式 2. 通过Promises的异步的方式 3. 通过发送事件的事件监听的方式. 参考文档:传送门
- jmeter3.2 版本完美实现Load Test报表
今天下载了最新版的apache tomcat jmeter 3.2,需要jdk1.8以上的版本. 用非GUI模式运行压力测试后,出现的报表太完美了. 将jmx脚本放在就jmeter_home/bin下 ...