第十一章 前端开发-css
1.1.0 css介绍
css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中。
css优势:
- 内容与表现分离
- 网页的表现统一,容易修改
- 丰富的样式,使页面布局更加灵活
- 减少代码量,增加网页浏览器速度,节省网路带宽
- 运用独立页面的css,有利于网页被搜索引擎收录
如何用?
我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过link
标签引用该CSS文件即可
这样浏览器在解析到该link
标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。
1.1.1 css语法
css语法分为2个部分:
1.选择器
2.声明
声明由属性和值组成,多个声明之间用分号分隔。
css注释:注释是代码之母
/*这是注释*/
1.1.2 css引入方式
1.1.2.1 内嵌样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
P{
color: green;
font-size: 15px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
1.1.2.2 行内样式表
<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签!</p>
</body>
</html>
1.1.2.3 外部样式表
-
链接式
link
标签#html文件
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>这是一个p标签!</p>
</body>
</html>#index.css文件
p {
color: green;
} 导入式
了解即可。
index.css
@import url(other.css)
注意:@import url()
必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的
1.1.2.4 三种引入方式的优先级
- 行内样式>内嵌式和外接式
- 内嵌和外接要看谁在后面,在后面的优先级高(代码从上到下执行,在后面的会把前面的覆盖)
1.1.3 css选择器
首先来说一下,什么是选择器。在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
1.1.3.1 基础选择器
1.id选择器:特定属性的元素(标签)
- 标识:#id名
- 特征:唯一的
2.类选择器
- 标识:.类名
- 特征:可以重复,归类,类也可以设置多个
<style>
.box{
width:200px;
height:200px;
background-color:yellow;
}
.active{
border-radius: 200px;
}
</style>
<div class='box active'></div>
<div class='box'></div>
<div class='box'></div>
3.标签选择器
- 与标签有关的
div{}
p{}
ul
ol
...
1.1.3.2 高级选择器
1.后代选择器:中间是空格
- eg:div下所有的标签都会选中
div p{
color: red;
}
2.子代选择器:中间是>号
- 只找到div标签下面最近的一代
dic>p{
color:red;
}
3.组合选择器:中间用,连接
p,span{
color: green;
font-size: 15px;
padding: 0;
margin: 0;
}
4.交集选择器:选择器1选择器2{}
div.active{
color: orange;
}
5.如何重置网页样式?
html,body,p,ul,ol{
margin: 0; /*去除外边距*/
padding: 0; /*去除内边距*/
}
/*通配符选择器*/
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none; /*去除下划线*/
}
input,textarea{
border: none; /*去除默认边框*/
outline: none; /*去除外线*/
}
1.1.3.3 伪类选择器
1.对于a标签
- 如果想设置a标签的样式,要单独作用a标签
- 对于继承来说,a标签不起作用的
2.爱恨准则:LoVe HAte
- L:link
- V:visited
- H:hover,还可以作用在其他标签上(悬浮时)
- A:active
3.符号: 使用一个冒号
/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
/*color: red;*/
}
/*a标签被访问后设置的属性*/
a:visited{
color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
color: deepskyblue;
}
1.1.3.4 属性选择器
1.根据属性,选择符合条件的标签
2.示例:
/*设置所有文本输入框的属性*/
input[type='text']{
background-color: red;
}
/*设置所有多选框的属性*/
input[type='checkbox']{
}
/*设置所有提交按钮的属性*/
input[type='submit']{
}
1.1.3.5 伪元素选择器
通过伪元素添加的内容为行内元素
-
符号:使用两个冒号
/*设置段落第一个字的属性*/
p::first-letter{
color: red;
font-size: 20px;
font-weight: bold;
}
/*在段落开头添加内容*/
p::before{
content:'@';
}
/*解决浮动布局常用的一种方法*/
/*在段落结尾添加内容*/(可用于清楚浮动带来的影响)
p::after{
content:'$';
}
1.1.4 层叠性和继承性
1.继承性:在css有某些属性是可以继承下来
2.可以继承下来的属性:
- font-xxx:字体相关的属性
- text-xxx:文本相关的属性
- color:颜色相关的属性
- line-height:行高
- letter-spacing:文字之间的距离
- word-spacing:英文单词之间的距离
3.权重比较规则:
- 行列(行内式):1000 > id:100 > 类class:10 > 标签1(元素)选择器
- 继承来的属性权重为0
4.总结:
- 前提是选中了标签,权重比较
- 数选择器:id 类 标签,谁大它的优先级就大,
- 如果一样大,后面的回覆盖掉前面的属性
- 选中的标签的属性优先级远远大于继承来的属性,没有可比性
- 同时继承来的属性:
- 谁描述的近,谁的优先级越高
- 描述的一样近,这个时候才回归到数选择器的数量
- !important:他设置当前的属性的权重无限大,但大不过行内样式的优先级
1.1.5 盒模型
1.任意一个元素都可以当作盒模型
2.盒子的大小由内容宽高(width/height)+边距(padding)+边框(border)
1.属性:
- width:内容的宽度
- height:内容的高度
- padding:内边距,border到内容的距离
- border:边框
- margin:外边距
2.盒子模型示意图:
3.padding的设置方式:
-
1、写小属性,分别设置不同方向的padding
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
2、写综合属性,用空格隔开
padding: 20px 30px 40px 50px ;/*上 右 下 左*/
padding: 20px 30px 40px;/*上 左右 下*/
padding: 20px 30px;/*上下 左右*/
padding: 20px;/*上下左右*/
4.一些标签默认有padding
比如ul标签,有默认的padding-left值。
那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
我们现在初学可以使用通配符选择器
*{
padding:0;
margin:0;
}
But,这种方法效率不高。
所以我们要使用并集选择器来选中页面中应有的标签(不同背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)
5.border边框三要素:粗细,线性样式,颜色
border: solid
如果颜色不写,默认是黑色。如果粗细不写,不显示边框。如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。
- border-width:粗细,设置方式同padding一样
- border-style:线性样式
- solid:实线
- dotted:点线
- dashed:虚线
- donble:双线
- border-color:颜色
- transparent:透明色
- border-radius:设置圆角或圆、半圆 ( border-radius:5px;)上下左右
- border-top:上
- border-bottom:下
- border-left:左
- border-right:右
使用border来制作小三角
/*小三角 箭头指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
6.margin
margin:外边距的意思。表示边框到最近盒子的距离。(兄弟之间)
/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;
外边距合并:
- 有称塌陷,以设置的最大margin距离为基准
- margin在水平方向上不会出现外边距合并现象
- margin子垂直方式上回出现外边距合并现象
1.1.6 常用格式化排版
1.1.6.1 字体属性
-
font-family:设置字体
body{
font-family:'Microsoft Yahei','宋体','黑体';
}如果设置成
inherit
,则表示继承父元素的字体。 -
font-size:设置字体大小
- 字体大小单位
- px:绝对单位,也叫固定单位,不管在多少尺寸的屏幕下,始终是当前的尺寸
- em:相对单位,相对于当前盒子的字体大小
- rem:相对单位,相对于html的字体大小
- 字体大小单位
-
font-size:设置字体样式
- normal:正常
- italic:斜体
- 如果设置成
inherit
,则表示继承父元素的字体。
font-weight:设置字体粗细 100-900
取值范围:
值 | 描述 |
---|---|
normal | 默认值,标准粗细 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细 |
100~900 | 设置具体粗细,400等同于normal,而700等同于bold |
inherit | 继承父元素字体的粗细值 |
5.font-color:
设置内容的字体颜色。
支持三种颜色值:
- 十六进制值 如: #FF0000
- 一个RGB值 如: RGB(255,0,0) 红黄蓝三要素
- 颜色的名称 如: red
p {
color: red;
}
1.1.6.2 文本属性
-
text-align:设置文本水平排列方式 只是在行内元素生效
- left:水平靠左
- right:水平靠右
- center:居中
- justify:两端对齐,只限于英文
-
vartical-align:设置文本垂直排列方式 display设置table-cell
- top:垂直向上
- middle:垂直居中
- bottom:垂直向下
line-height 行高 设置和height一样高,效果为水平垂直居中
-
text-decoration
文字装饰。
值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 inherit 继承父元素的text-decoration属性的值。 -
text-indent:设置文本缩进
- 常用单位:em
- 根据字体的大小进行取值
- 首行缩进相当于设置字体大小的两倍
letter-spacing:设置文字间的距离
-
word-spacing:设置英文单词之间的距离
#box p:hover{
/*文本修饰*/
text-decoration: underline;
}
#box2{
/*字体大小*/
font-size: 20px;
/*设置文本缩进*/
text-indent: 2em;
letter-spacing: 2px;
word-spacing: 10px;
}
1.1.7 display属性
display:显示方式
- none:盒子隐藏
- block:转化为块
- inline:转化为行内
- inline-block:转化为行内块
- table-cell:转化为表格
1.1.8 背景属性
常用背景相关属性:
属性 | 描述 |
---|---|
background-color | 规定要使用的背景颜色。 |
background-image | 规定要使用的背景图像。 |
background-size | 规定背景图片的尺寸。 |
background-repeat | 规定如何重复背景图像。 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 |
background-position | 规定背景图像的位置。 |
inherit | 规定应该从父元素继承background属性的设置。 |
background-repeat
取值范围:
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承background-repeat属性的设置。 |
background-attachment
取值范围:
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承background-attachment属性的设置。 |
background-position
取值范围:
值 | 描述 |
---|---|
top left top center top right center left center center center right bottom left bottom center bottom right | 如果只设置了一个关键词,那么第二个值就是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果只设置了一个值,另一个值就是50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果只设置了一个值,另一个值就是50%。 可以混合使用% 和position 值。 |
示例:
body {
background-color: red;
backgraound-image: url(xx.png);
background-size: 300px 300px;
background-repeat: no-repeat; /*不平铺*/
background-position: center
background-position-x:100px;
background-position-y:100px;
background-position: 100px 100px; (x轴,y轴) 0 0 是左上角 ,可以在网页上进行调试,一般0 -100 用的多 裁剪照片(-100是从-100的位置开始裁剪设置的图片宽高)
}
简写:
body {
background: red url(xx.png) no-repeat fixed center/300px 300px;
}
雪碧图技术(精灵图技术)
CSS雪碧 即[CSS Sprite](https://baike.baidu.com/item/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-attach
设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动
案例:
<!DOCTYPE html>
<html>
<head>
<title>淘宝列表导航案例</title>
<style type="text/css">
.taobao_list{
border-top:1px solid #eee;
float: left;
}
.taobao_list ul{
width: 292px;
overflow: hidden;
padding:0;
margin: 0;
}
.taobao_list ul li{
list-style: none;
width: 71px;
height: 75px;
border: 1px solid #eee;
float: left;
border-top-color: transparent;
border-left-color: transparent;
}
.taobao_list ul li a {
text-decoration: none;
text-align: center;
display: block;
font-size: 12px;
color: #888;
}
span{
display: block;
width: 24px;
height: 24px;
background:url(image/site.png) no-repeat 0 0 ;
background-size: 24px 595px;
margin-left: 22px;
margin-top: 10px;
}
.span1{
background-position: 0 0;
}
.span2{
background-position: 0 -44px;
}
.span3{
background-position: 0 -88px;
}
.span4{
background-position: 0 -132px;
}
.span5{
background-position: 0 -176px;
}
</style>
</head>
<body>
<div class="taobao_list">
<ul>
<li>
<a href="#">
<span class="span1"></span>
<p>充话费</p>
</a>
</li>
<li>
<a href="#">
<span class="span2"></span>
<p>旅行</p>
</a>
</li>
<li>
<a href="#">
<span class="span3"></span>
<p>车险</p>
</a>
</li>
<li>
<a href="#">
<span class="span4"></span>
<p>游戏</p>
</a>
</li>
<li>
<a href="#">
<span class="span5"></span>
<p>彩票</p>
</a>
</li>
</ul>
</div>
</body>
</html>
1.1.8 浮动
1.1.8.1 什么是标准文档流
宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”。而设计软件 ,想往哪里画东西,就去哪里画
标准文档流下 有哪些微观现象?
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2.高矮不齐,底边对齐
文字还有图片大小不一,都会让我们页面的元素出现高矮不齐的现象,但是在浏览器查看我们的页面总会发现底边对齐
3.自动换行,一行写不满,换行写
如果在一行内写文字,文字过多,那么浏览器会自动换行去显示我们的文字。
1.1.8.2 什么是浮动?
浮动:在css样式表中,用float来表示
-
float属性:
- none:表示不浮动,默认不浮动
- left:左浮动
- right:右浮动
- inherit:继承父元素的浮动属性
浮动的作用:实现元素并排
-
浮动对盒子产生的现象:
- 文字环绕:设置浮动属性的初衷
- “脱标”现象:脱离标准文档流,不在页面上占位置
- “贴边”现象:给盒子设置了浮动,会找浮动盒子的边
- 如果找不到浮动盒子的边,会贴到父元素的边
- 如果找到了浮动盒子的边,就会贴到浮动盒子的边
- 收缩效果
浮动带来的问题:撑不起父盒子的高度
-
清楚浮动的方式:
- 给父盒子设置高度
- clear:both
- 伪元素清除法
- overflow:hidden
-
给父元素添加固定高度
- 存在的问题:不灵活,后期不易维护
- 应用:万年不变导航栏
-
内墙法:给最后一个浮动元素的后面添加一个空的块级标签(为的是不影响布局,所以为空),并且设置该标签的属性为clear:both;(当前元素左右两边不允许有浮动元素)
存在的问题:冗余
-
clear:both
clear:意思就是清除的意思。
有三个值:
left:当前元素左边不允许有浮动元素
right:当前元素右边不允许有浮动元素
both:当前元素左右两边不允许有浮动元素
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 800px;
margin: 100px auto;
border: 1px solid #000;
}
.child1{
/*width: 200px;*/
height: 400px;
background-color: red;
float: left;
}
.child2{
/*width: 300px;*/
height: 200px;
background-color: green;
float: right;
}
.clear{
clear: both;
}
</style> <!--内墙法:给最后一个浮动元素的后面添加一个空的块级标签,并且设置该标签的属性为clear:both;-->
<div class="father">
<div class="child1">mjj</div>
<div class="child2">wusir</div>
<div class="clear"></div>
</div> -
伪元素清除法(推荐使用)
在内墙法的基础上做的优化,使用了伪元素选择器中的::after
给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 800px;
margin: 100px auto;
border: 1px solid #000;
}
.child1{
/*width: 200px;*/
height: 400px;
background-color: red;
float: left;
}
.child2{
/*width: 300px;*/
height: 200px;
background-color: green;
float: right;
}
.clearfix::after{ /*新浪推荐写法*/
content:'';
display: block; 加入的这个元素是行内元素,转换为块级元素*/
clear: both;
/*visibility: hidden; 内容隐藏*/
/*height: 0;*/
}
</style> <div class="father clearfix">
<div class="child1">mjj</div>
<div class="child2">wusir</div>
</div>.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
}-
overflow:hidden(常用)
-
因为overflow:hidden;会形成BFC区域,形成BFC区域后,内部有它的布局规则——计算BFC的高度时,浮动元素也参与计算
使用过程中,注意overflow:hidden;本身的含义:超出部分内容隐藏
-
overflow的值及其含义:
- visible:默认可见
- hidden:超出部分内容隐藏
- scroll:内容滚动
- inherit:继承父类的overflow属性
父元素里面设置overflow:hidden可以让父元素也参与计算,可以清除浮动带来的破坏性
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 800px;
margin: 100px auto;
border: 1px solid #000;
/*一旦设置一个Box盒子 除了overflow:visible;它会形成一个BFC,BFC它有布局规则: 它会让内部浮动元素计算高度*/
overflow: hidden;
}
.child1{
/*width: 200px;*/
height: 400px;
background-color: red;
float: left;
}
.child2{
/*width: 300px;*/
height: 200px;
background-color: green;
/*float: right;*/
/*overflow: hidden;*/
float: left;
}
</style> <div class="father ">
<div class="child1">mjj</div>
<div class="child2">wusir</div>
</div>
11.2.6.2 BFC
参考 https://blog.csdn.net/riddle1981/article/details/52126522
- BFC的定义
- BFC(Block formatting context),直译为”块级格式化上下文”
- 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
- BFC的布局规则
- 内部的Box会在垂直方向,一个接一个地放置,即块级标签,独占一行
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠,即外边距合并(塌陷)
- 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此,即贴边现象
- BFC的区域不会与float元素重叠
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此
- 计算BFC的高度时,浮动元素也参与计算
- 哪些元素会生成BFC?
- 根元素
- float属性不为none,即设置了浮动
- position的值为 absolute(绝对定位)或 fixed(固定定位)
- display的值为 inline-block,即设置为行内块
- overflow不为visible,其他的均可,常用的是:overflow:hidden;
-
1.1.8.3 盒子居中:margin:0 auto;
<!DOCTYPE html>
<html>
<head>
<title>
盒子居中
</title>
<style type="text/css">
.site-header{
background-color: orange;
width: 100%;
height: 100px;
}
.in{
background-color: red;
width: 800px;
height: 100px;
margin: 0 auto;
/*水平居中盒子*/
text-align: center;
/*水平居中文字*/
}
</style>
</head>
<body>
<div class="site-header">
<div class="in">
水平居中文字
</div>
</div>
</body>
</html>
使用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描述的是父子盒子的关系
1.1.9 定位
1.1.9.0 几种定位方式
- 静态定位:position:static; 默认值
- 相对定位:position:relative;
- 特征:
- 与标准流下的盒子没有任何区别
- 留坑,会影响页面布局
- 设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right
- 作用:做‘子绝父相“布局方案的参考
- 参考点:以原来的盒子的位置坐参考点进行移动
- 特征:
3.绝对定位:position:absolute;
-
特征:
- 脱标,不在页面上占位置
- 压盖现象
- 子绝父相:以最近的父元素的左上角为参考点进行定位
-
参考点:
-
如果单独设置一个盒子为绝对定位
- 用top来描述,它的参考点是以body的0,0 为参考点
- bottom,参考点是以游览器的左下角为参考点
以父辈盒子作为参考点
-
1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。
2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。
还要注意,绝对定位的盒子无视父辈的padding
应用:
-
绝对定位的盒子居中
当做公式记下来吧!
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px;
/*设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/
}
4.固定定位:position:fixed;
固定当前的元素不会随着页面滚动而滚动
-
特征:
- 脱标
- 固定不变
- 提高层级,遮盖现象
-
参考点:
设置固定定位,用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述,那么是以浏览器的左下角为参考点 作用: 1.返回顶部栏 2.固定导航栏 3.小广告
1.1.9.1 父相子绝:(重点)
子绝父相:以最近的父元素的左上角为参考点进行定位
-
示例:
<style>
*{
padding: 0;
margin: 0;
}
body{
color: #fff;
}
ul{
list-style: none;
}
#box{
width: 1226px;
height: 100px;
margin: 0 auto;
background-color: #000;
}
#box ul{
/*overflow: hidden;*/
padding: 12px 0 0 30px;
/*width: 500px;*/
height: 88px;
/*background-color: red;*/
}
#box ul li{
float: left;
width: 60px;
height: 58px;
/*padding-top: 30px;*/
}
#box ul li.active{
width: 100px;
height: 88px;
background-color: green;
position: relative;
}
#box ul li.active .box{
position: absolute;
width: 234px;
height: 600px;
background-color: rgba(0,0,0,.5);
top: 88px;
left: -30px;
}
.clearfix:after{
content: '';
clear: both;
display: block;
}
</style> <div id="box">
<ul class="clearfix">
<li class="active">
<div class="box"></div>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
1.1.9.2 z-index
使用条件:只适用与定位的元素
这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况。
- z-index 值表示谁压着谁,数值大的压盖住数值小的,
- 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
- z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
- 从父现象:父亲怂了,儿子再牛逼也没用
- 通常布局我们使用父相子绝,比较的是父元素的z-index值,哪个父元素的z-index值高,表示子元素的层级越高
1.2.0 box-shadow 阴影
1.box-shadow:水平距离 垂直距离 模糊程度 颜色(默认外设outset)
2.默认是外阴影,设置内阴影再在后面加inset
3.水平距离和垂直距离一般设置0
4.补充:transition:all .2s linear;表示设置动画(平滑移动)
<!DOCTYPE html>
<html>
<head>
<title>边框阴影</title>
<style type="text/css">
body{
padding:0;
margin:0;
}
.shadow{
position: relative;
width: 200px;
height: 200px;
margin:50px auto;
background-color: purple;
/*box-shadow: 20px 20px 50px red inset;*/
}
.shadow:hover{
/*position: absolute;*/
top:-4px;
box-shadow:0 0px 15px #e0e0e0;
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>
1.2.1 单列和多列布局
<!DOCTYPE html>
<html>
<head>
<title>单列布局</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: black;
}
.container{
width: 1200px;
height: 100%;
margin: 0 auto;
background-color: green;
}
.header .container{
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
background-color: red;
}
.footer{
width: 100%;
height: 60px;
}
.footer .container{
/*height: 200px;*/
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
header
</div>
</div>
<div class="wrap">
<div class="container">
11
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>多列布局</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: black;
}
.container{
width: 1200px;
height: 100%;
margin: 0 auto;
background-color: green;
overflow: hidden;
}
.header .container{
height: 60px;
background-color: orange;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
background-color: red;
}
.wrap .container .left{
float: left;
width: 200px;
height: 100%;
background-color: purple;
}
.wrap .container .right{
float: right;
width: 200px;
height: 100%;
background-color: #333;
}
.wrap .container .center{
height: 100%;
background-color: yellowgreen;
}
.footer{
width: 100%;
height: 60px;
}
.footer .container{
/*height: 200px;*/
background-color: #e0e0e0;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
header
</div>
</div>
<div class="wrap">
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
</body>
</html>
1.2.2 DIV+CSS规范命名大全集合
http://www.divcss5.com/jiqiao/j4.shtml
1.2.3 行内元素水平垂直居中
text-align:center 水平居中
vertical-align:middle 垂直居中
1.2.4 块级元素水平垂直居中
1.position+margin:
<!DOCTYPE html>
<html>
<head>
<title>
块级元素水平居中1
</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
</div>
</div>
</body>
</html>
2.display: table-cell; 将块级元素转为单元格形式,同事设置水平,垂直居中
<!DOCTYPE html>
<html>
<head>
<title>
块级元素水平居中2
</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.child{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
aa
</div>
</div>
</body>
</html>
3.纯定位计算 positon
<!DOCTYPE html>
<html>
<head>
<title>
块级元素水平居中3
</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
vertical-align: middle;
text-align: center;
line-height: 100px;
}
.child{
width: 100px;
height: 100px;
position: absolute;
background-color: green;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
aa
</div>
</div>
</body>
</html>
补充:text-align起作用的元素
text-align不是只对文字和图片起作用,比较准确的说法是:text-align对文字,inline元素(行内元素)以及inline-block元素(行内块元素)起作用,但对块元素不起作用。