目录
4.1浮动
一.传统网页布局的三种方式
(1)标准流(普通流/文档流)
就是标签按照规定好默认方式排列
(i)块级元素独占一行,从上到下顺序排列
( 常用元素:div,hr,p,h1~h6,ul,ol,form,table)
(ii)行内元素会按顺序,从左到右顺序排列,碰到父元素边缘自动换行
(常用元素:span,a,i,em等)
注:标准流是最基本的布局方式
浮动最典型的应用:可以让多个块级元素一行内显示
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
第二准则:先确定盒子大小,再确定盒子位置
(2)浮动(float)
属性 | 描述 |
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
选择器{
float:属性值;
注:float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
(3)浮动特性(重难点)
1.浮动元素会脱离标准流(脱标)
(!!!!!!浮动的盒子不再保留原先的位置)
2.浮动元素会一行内显示并且元素顶部对齐
浮动的盒子 | 浮动的盒子 |
注意:浮动的元素是相互贴在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子, 多 , 出来的盒子会另起一行对齐
3.浮动的元素会具有行内块元素的特性
(4)浮动元素经常和标准流父级搭配使用:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则
(5)浮动布局注意
(i)浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位
(ii)一个元素浮动了,理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题
浮动的盒子只会影响盒子后面的标准流,不会影响前面的标准流
(6)清除浮动本质(清除浮动元素造成的影响)
语法:
选择器{
clear:属性值;
}
属性值 | 描述 |
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动影响) |
both | 同时清除左右两侧浮动影响 |
(7)清除浮动方法
(i)额外标签法,是W3C推荐的做法(必须是块级元素或<br>)
就是在最后一个浮动的子元素后面添加一个额外的标签,添加清除浮动样式
优点:通俗易懂
缺点:添加许多无意义的标签,结构化比较差
(ii)父级元素添加overflow属性
可以给父级元素添加overflow,给其赋值hidden,auto,或scroll
缺点:不可以显示溢出部分
(iii)父级添加after伪元素
:after方式是额外标签法的升级版,也是给父元素添加
.clearfix:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
/*IE6,7专有*/
*zoom:1;
}
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器
(百度,网易,淘宝)
(iv)父级添加双伪元素
.clearfix:before,.clearfix:after{
content:" ";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
优点:代码更简洁
缺点:照顾低版本浏览器
清除浮动总结
为什么需要清除浮动?
1.父级没高度
2.子盒子浮动了
3.影响了下面布局,我们就应该清除浮动了
4.2定位
一.
4.2.1为什么需要定位
1.某个元素可以在自由的在一个盒子内移动,并压住其他盒子
2.或者盒子固定在屏幕中某个位置,并且可以压住其他盒子
4.2.2定位组成
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
(定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置)
(1)定位模式
定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:
值 | 语义 |
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
(2)边偏移
(就是定位盒子移动到最终位置。有top,bottom,left,right4个属
tai
边偏移属性 | 示例 | 描述 |
top | top:80px | 顶端偏移量,定义元素相对其父元素上边线的距离 |
bottom | bottom:80px | 底部偏移量,定义元素相对其父元素下边线的距离 |
left | left:80px | 左侧偏移量,定义元素相对于其父元素左元素的距离 |
right | right:80px | 右侧偏移量,定义元素相对其父元素右边线的就距离 |
(3)静态定位 static(了解)
静态定位是元素的默认定位,无定位的意思
语法
选择器{
position:static;
}
静态定位按照标准流摆放位置,它没有位偏移
静态定位在布局是很少用到
(4)相对定位 relative(重要)
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)
语法
选择器{
position:relative;
}
相对定位的特点:(务必记住)
1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
2.原来的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)
(5)绝对定位 absolute(重要)
绝对定位是元素在移动的位置,是相对于它祖先元素来说的
语法:
选择器{
position:absolute;
}
绝对定位的特点:
1.如果没有祖先元素或者祖先元素没有定位(浮动或标准),则以浏览器为准定位(Document文档)
2.如果祖先元素有定位(相对,绝对,固定定位),则以最近一级的定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置(脱标)
(6)子绝父相
1.子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响到其他的兄弟盒子
2.父盒子需要加定位限制子盒子在父盒子内显示
3.父盒子布局时,需要占有位置,因此父亲只能是相对定位
(子绝父绝等情况也有)
(7)固定定位fixed(重要)
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动式时元素的位置不会改变
语法:
选择器{
position:fixed;
}
固定定位的特点:(务必记住)
1.以浏览器的可视窗口为参照点移动元素
2.跟父元素没有任何关系
3.不随滚动条滚动
4.固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。
固定定位小技巧:固定在版心右侧位置
小算法:(1)让固定定位的盒子left:50%,走到浏览器可视区(也可以看做版心)的一半位置。
(2)让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐
(8)粘性定位(sticky)
粘性定位可以被认为是相对定位和固定定位的混合
语法:
选择器{
position:sticky;
top:10px;
}
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位的特点)
3.必须添加top,left,right,bottom其中一个才有效
跟页面滚动混合搭配使用。兼容性较差,IE不支持
定位总结:
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
static静态定位 | 否(占有位置) | 不能使用边偏移 | 很少 |
relative相对定位 | 否(占有位置) | 相对于自身位置移动 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed(固定定位) | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky | 否(占有位置) | 浏览器可视区 | 当前阶段很少 |
(9)定位叠放次序(z-index)
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)
语法:
选择器{
z-index:1;
}
注:数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上
如果属性相同,则按照书写顺序,后来者居上
数字后面不能加单位
只有定位的盒子才有z-index属性
(10)绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:()auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中
算法:水平(1)left 走 50% 父容器宽度一半
(2)margin:负值 往左边走 自己盒子宽度的一半
竖直:同上
(11)定位特殊特性
绝对定位也和固定定位也和浮动类似
(i)行内元素(span)添加绝对或者固定定位,可以直接设置高度和宽度
(ii)块级元素(div)添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
(12)绝对定位(固定定位)会完全压住盒子
(i)浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里的文字(图片)
(ii)但是决定定位(固定定位)会压住下面标准流所有内容
注:浮动之所以不会压住文字,是因为浮动产生的目的最初是为了做文字环绕效果的,文字会围绕浮动元素
4.3元素显示及隐藏
本质:让一个元素显示或者隐藏
(1)display
(i)display:none;(隐藏对象)
(ii)display:block;(除了转换为块级元素之外,同时还有显示元素的意思)
注:display隐藏元素,不再占有原来位置
(2)visibility
(i)visibility:visible;元素可视
(ii)visibility:hidden;元素隐藏
注:visibility隐藏元素后,继续占有原来的位置
(3)overflow溢出
(i)overflow:visible;(默认)
(ii)overflow:hidden;(隐藏)
(iii)overflow:scroll;(滚动条)
注:auto:超出才添加滚动条
如果是有定位的盒子慎用overflow:hidden;
4-4 伪类
1.伪类用于定义元素的特殊状态
伪类选择器书写最大的特点是用冒号(:)表示,比如:hover,:first-child
(i)a:link /*选择所有未被访问过的链接*/
(ii)a:visited /*选择点击过的链接*/
(iii)a:hover /*选择鼠标指针位于其上的链接*/
(iv)a:active /*选择活动链接(鼠标按下未弹起的链接)
链接伪类选择器注意事项:
1.为了确保生效,请按照LVHA的循顺序声明:link-:visited-:hover-:active
2.记忆法:love hate或者lv 包包 hao
3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
选择符 | 简介 |
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注:
before和after创建一个元素,但是属于行内元素
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
语法:element::before{}
before 和after必须有content属性
before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
伪类选择器和标签选择器一样,权重为1
<!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>Document</title>
<style>
div{
width: 200px;
height:200px;
background-color: pink;
}
/*div::before 权重是2*/
div::before{
/*content必须要写*/
display:inline-block;
content: '我真的好';
width: 100px;
height: 100px;
background-color: purple;
}
div::after{
content:'回家';
}
</style>
</head>
<body>
<div>
想
</div>
</body>
</html>