CSS概述
CSS是Cascading Style Sheets(级联样式表)。
CSS是一种样式表语言,用于为HTML文档控制外观,定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。
可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
CSS与HTML的关系 :
-
HTML是网页内容
-
CSS定义页面的样式
<!--
html主要讲标签,是网页的内容(骨架),不漂亮
html早期是提供了标签对内容进行修饰的,但是用起来很麻烦,嵌套过多
-->
<b>
<font color="darkcyan">
<big>百度</big>
</font>
</b>
基本语法
基本语法:
- 行内样式表
- 内嵌样式表
- 外部样式表
行内样式表
<!--
css是一种样式表语言(修饰网页外观),可将页面的内容与表现形式分离,可以达到样式重复利用。
style=""是css语法 属性名:值;属性名:值
-->
<p style="color: darkred; font-size: 20px;">
用于为html文档控制外观,定义布局。
</p>
<p style="color: darkred; font-size: 20px;">
用于为html文档控制外观,定义布局。
</p>
内嵌样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
用来写css样式的标签
-->
<style type="text/css">
p{
color: lightblue;
font-size: 20px;
}
</style>
</head>
<body>
<p>
用于为html文档控制外观,定义布局。
</p>
<p style="color: darkred; font-size: 20px;">
用于为html文档控制外观,定义布局。
</p>
</body>
</html>
外部样式表
<!-- css文件中 -->
p{
color: brown;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入外部样式表 -->
<link href="css/out.css" rel="stylesheet"/>
</head>
<body>
<p>
用于为html文档控制外观,定义布局。
</p>
<p>
用于为html文档控制外观,定义布局。
</p>
</body>
</html>
选择器
要使用CSS对HTML页面中的标签实现一对一,一对多的控制,这就需要用到CSS选择器。
常用的选择器
标签选择器:通过标签选择器可以选择页面中的所有指定标签
语法:标签名 {}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 css注释*/
p{
color: #aa557f;
font-size: 20px;
}
</style>
</head>
<body>
<p>用于为html文档控制外观,定义布局。</p>
<p>用于为html文档控制外观,定义布局。</p>
<p>用于为html文档控制外观,定义布局。</p>
<p>用于为html文档控制外观,定义布局。</p>
<h3>三级标题标签</h3>
</body>
</html>
类选择器:通过标签的class属性值选中一组标签
语法:
.class属性值{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 类选择器 万能选择器 使用最多*/
.p1{
color: cadetblue;
}
.p2{
color: skyblue;
}
</style>
</head>
<body>
<p class="p1">用于为html文档控制外观,定义布局。</p>
<p class="p2">用于为html文档控制外观,定义布局。</p>
<p class="p1">用于为html文档控制外观,定义布局。</p>
<p class="p2">用于为html文档控制外观,定义布局。</p>
<h3>三级标题标签</h3>
</body>
</html>
id 选择器:通过标签的id属性值选中唯一的一个标签
语法:
#id属性值 {}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* id选择器 */
#pID{
color: yellowgreen;
}
</style>
</head>
<body>
<p id="pID">用于为html文档控制外观,定义布局。</p>
</body>
</html>
通配选择器:可以用来选中页面中的所有的标签
语法:*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 css注释*/
p{
color: black;
font-size: 20px;
}
/* 类选择器 万能选择器 使用最多*/
.p1{
color: cadetblue;
}
.p2{
color: skyblue;
}
/* id选择器 */
#pID{
color: yellowgreen;
}
/* 通配选择器 */
*{
color: gray;
}
/*
选择器优先级问题:由高到低
id>类选择器>标签选择器>通配选择器
*/
</style>
</head>
<body>
<p id="pID" class="p1">用于为html文档控制外观,定义布局。</p>
<p class="p2">用于为html文档控制外观,定义布局。</p>
<p class="p1">用于为html文档控制外观,定义布局。</p>
<p class="p2">用于为html文档控制外观,定义布局。</p>
<p>用于为html文档控制外观,定义布局。</p>
<p>用于为html文档控制外观,定义布局。</p>
<b>被通配选择器选中</b>
</body>
</html>
选择器组合:通过选择器分组可以同时选中多个选择器对应的标签
语法:选择器1,选择器2,选择器N{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择器组合 共有属性写在一起*/
#pID,.p1,.p2,h3,b{
font-size: 30px; /* px是像素单位 css中的尺寸必须加单位*/
}
</style>
</head>
<body>
<p id="pID" class="p1">用于为html文档控制外观,定义布局。</p>
<p class="p2">用于为html文档控制外观,定义布局。</p>
<p class="p1">用于为html文档控制外观,定义布局。</p>
<p class="p2">用于为html文档控制外观,定义布局。</p>
<h3>三级标题</h3>
<b>被通配选择器选中</b>
</body>
</html>
选择器优先级: id>类选择器>标签选择器>通配选择器
文本
● color:字体颜色
● font-size:字体大小
● font-family:字体
● text-align:文本对齐
● text-decoration:line-through:定义穿过文本下的一条线
● text-decoration:underline:定义文本下的一条线
● text-decoration:none:定义标准的文本
● font-style: italic;斜体文本
● font-weight:字体粗细
● line-height:设置行高
● letter-spacing可以指定字符间距
● text-indent用来设置首行缩进
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1{
color: #5F9EA0;
font-size: 20px;
/* text-align: center; 文本水平对齐的一种方式*/
font-family: 楷体; /* 字体类型 */
/* text-decoration: line-through; 文本删除线
text-decoration: underline; 下划线 */
/* font-weight: 700; 字体加粗 */
/* font-style: italic; 斜体文字*/
/* line-height: 30px; 行高 */
/* letter-spacing: 30px; 字符间距 */
/*text-indent: 40px; 首行缩进 */
text-indent: 2em; /* em 指当前一个字符的大小 */
}
a{
text-decoration: none; /* 标准文本,没有任何修饰 */
}
</style>
</head>
<body>
<p class="p1">
<!-- html中的标签 -->
<!-- 删除线 -->
<!-- <del>用于为html文档控制外观,定义布局。</del> -->
<!-- <s>用于为html文档控制外观,定义布局。</s> -->
<!-- 下划线 -->
<!-- <u>用于为html文档控制外观,定义布局。</u> -->
<!-- 斜体 -->
<!-- <i>用于为html文档控制外观,定义布局。</i> -->
用于为html文档控制外观,定义布局。
用于为html文档控制外观,定义布局。
用于为html文档控制外观,定义布局。
用于为html文档控制外观,定义布局。
</p>
<p class="p1">
用于为html文档控制外观,定义布局。
用于为html文档控制外观,定义布局。
用于为html文档控制外观,定义布局。
用于为html文档控制外观,定义布局。
</p>
<a>用于为html文档控制外观,定义布局。</a>
</body>
</html>
背景
● background-color背景颜色
● background-image背景图片
● background-repeat背景重复
● background-size背景尺寸
● background- position 背景位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
background-color: aliceblue; /* 背景颜色 */
width: 800px;
height: 600px;
background-image: url(img/bg.jpg); /* 插入背景图片,若图片不够大,默认重复 */
/* background-repeat: repeat-x; */
background-repeat: no-repeat; /* 图片不重复 */
/*background-position: right top; 控制位置 background-position: 水平位置 垂直位置; */
background-position: center; /* 图片居中 */
}
</style>
</head>
<body>
<p>这是段落</p>
aaa
</body>
</html>
CSS列表
CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。
● list-style-image 将图象设置为列表项标志。
● list-style-position 设置列表中列表项标志的位置。
● list-style-type 设置列表项标志的类型。
● list-style 简写属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
/*list-style-type: disc; 列表默认图标 */
/*list-style-type: none; 无图标 */
list-style-image: url(img/img.jpg);
/* 设置图标位置 在列表的里面还是外面
list-style-position: inside;
list-style-position: outside; */
/* 简写方式 不区分先后顺序 */
list-style: url(img/bg.jpg) none inside;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
</html>
CSS伪类
CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类 。
伪类的语法:
:hover伪类表示鼠标移入的状态。
:active表示的是被点击的状态。
:focus向拥有键盘输入焦点的标签添加样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 选择器 */
a{
color: black;
text-decoration: none; /* 去下划线 */
}
/* 鼠标移入的伪类,当鼠标移入到前面选择器对应的标签时,自动切换到此样式表 */
a:hover{
color: #5F9EA0;
}
/* 被点击的状态 */
a:active{
color: #A52A2A;
}
p:hover{
color: #5F9EA0;
}
p:active{
color: #A52A2A;
}
.btn:hover{
background-color: #5F9EA0;
color: plum;
}
.btn:active{
background-color: #87CEEB;
color: pink;
}
/* 向拥有键盘输入焦点的标签添加样式 */
.text:focus{
background-color: aliceblue;
color: #FFC0CB;
}
/*
:hover 鼠标移入到标签上切换
:active 鼠标点击标签时切换
:focus 可以输入的标签,获得鼠标焦点时触发
*/
</style>
</head>
<body>
<!--
标签可以有不同的状态 (例如鼠标移入到标签上,点击标签)
可以通过伪类为鼠标移入时、点击时设置一个样式
-->
<a href="">百度</a>
<a href="">百度</a>
<p>段落</p>
<input type="button" value="按钮" class="btn"/>
<br>
<input type="text" class="text" /><br>
<input type="text" class="text" /><br>
<input type="text" class="text" />
</body>
</html>
透明
定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别值为1。
规定不透明度:从 0.0 (完全透明)到 1.0(完全不透明)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
/* 设置标签的透明度 0:完全透明 1:完全不透明
设置完全透明后,标签在网页上的空间仍占用*/
/* opacity: 0; */
opacity: 0.1;
}
img:hover{
opacity: 0.5;
}
img:active{
opacity: 1;
}
</style>
</head>
<body>
<img src="img/bg.jpg" >
</body>
</html>
块级标签、行级标签、行级块标签
● 什么是块级标签?
块级标签:无论内容多少 都会独自占据一行的。
例如
、
、
-
、
-
、
等。
-
、
等。
● 什么是行级标签?
行级标签:只占自身大小的标签,不会占一行。
例如、、、等。
● 什么是行级块标签?
例如 等
注意: 一般情况下使用块级标签包含行级标签,不使用行级标签包含块标签。
a可以包含任何标签,除去a本身;
p标签不可以包含任何的块标签。
<body>
<!--
标签分类:
块级标签:无论内容有多少都占一行
h1,h2,p……
这种标签可以设置宽和高
默认的宽和父级标签一致
默认的高由内容决定
这种标签主要用来布局网页
行级标签:只占自身内容大小,不会占一行。
不能设置宽高,即使设置了也是无效的。
a,……
行级块标签:可以设置大小,不占一行
input、img……
注意:一般情况使用块级标签,包含行级标签。
例外,a标签可以包含任何标签,p标签不能包含其他块标签
-->
<!-- 块级标签 -->
<h1 style="width: 200px;background: #FFC0CB;">占一行</h1> <!-- 设置宽度后依旧占一行 -->
<h1 style="width: 200px;background: #FFC0CB;">
<p>aaaaaaaaaa</p>
</h1>
aaa
<!-- 行级标签 -->
<a href="" style="width: 200px;">百度</a> <!-- 设置高度宽度无效-->
<a href="">百度</a>
<a href="">百度</a>
<a href="">百度</a>
<b>新浪</b>
<!-- 行级块标签 -->
<input type="text" style="width: 500px; height: 30px;"/>百度一下
<img src="img/img.jpg" width="100px" height="100px">
</body>
Display
通过display样式可以修改标签的类型。
可选值:
block :设置标签为块标签
inline :设置标签为行级标签
inline-block :设置标签为行级块标签
none :隐藏标签(标签将在页面中完全消失)
<body>
<!--
可以通过display属性来改变标签的类型(块级、行级、行级块)
-->
<h1 style="display: inline;">块级标签改为行级标签</h1> aaa
<br>
<a href="" style="display: block;">百度</a>bbb <!-- 设置为块标签 -->
<!--
display: inline; 设置标签为行级标签
display: block; 设置标签为块级标签
display: inline-block; 设置标签为行级块标签
display:none; 设置标签隐藏。将标签从网页中彻底不显示,也不占空间
-->
<h1 style="display: none;">块级标签</h1> ccc
</body>
div和span标签
div标签
div是块级标签,可以放置任何标签。
div没有任何附加功能,给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。
span标签
span是行级标签
span 没有任何附加功能,给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
h1有默认样式的,加粗文字,变大
-->
<!--
div是块级标签,可以包含任何标签,没有任何附加功能,主要用来布局网页
-->
<div style="background-color: #FFC0CB; width: 300px; height: 200px;">
div是一个纯净版的块级标签
</div>
<!--
span是一个纯净版的行级标签,主要用来选中文本内容,为其修饰样式
-->
<span style="color: #5F9EA0;">百度</span>
<!--
超链接、图片、表格、表单、内联框架 无法代替
段落、标题 可以使用css+div实现
-->
</body>
</html>
盒子模型
CSS处理网页时,它认为每个标签都包含在一 个不可见的盒子里。
如果把所有的标签都想象成盒子,那么我们对网页的布局就相 当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
一个盒子我们会分成几个部分:
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
内容区
● 内容区指的是盒子中放置内容的区域,也就是标签 中的文本内容,子标签都是存在于内容区中的。
● 如果没有为标签设置内边距和边框,则内容区大小 默认和盒子大小是一致的。
● 通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
● width和height属性只适用于块标签(包含行级块)。
内边距
● 顾名思义,内边距指的就是标签内容区与边框以内的空间。
● 内边距会影响整个盒子的大小。
● 使用padding属性来设置标签的内边距。
例如:
padding-left:10px;
padding-right:10px;
padding:10px 20px 30px 40px
这样会设置标签的上、右、下、左四个方向的内边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
background-color: #F0F8FF;
width: 180px;
height: 180px; /* 设置标签的大内容区小为200*200*/
/* padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px; */
padding: 10px; /* 上下左右均为10px */
/*padding: 5px 10px 15px 20px; /* 上 右 下 左*/
/* paddint: 10px 10px; 上下 左右 */
}
.box2{
width: 160px;
height: 60px;
background-color: #FFC0CB;
padding: 60px 20px;
}
</style>
</head>
<body>
<!--
盒子模型:认为每个标签都像一个盒子
每个标签由4个区域构成:
内容区:
标签中的内容都是放在内容区的
如果一个标签没有设置内边距和边框,那么内容区大小就是标签的大小
标签的大小是由3部分构成的
标签的大小 = 内容区+内边框+边框
通过width和height可以设置内容区的大小
内边距:
内容区与边框之间的距离,不能放标签
内边距会影响标签的大小
边框
外边距:不影响标签大小
-->
<div class="box1">
<span>box</span>
</div>
<br>
<!-- 练习最终需要一个200*200的div标签
需要图片在标签中水平,垂直居中
-->
<div class="box2">
<img src="img/div练习.png" >
</div>
</body>
</html>
边框
● 可以在标签周围创建边框,边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框:
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。
● 边框可以设置样式:
dotted (点线) dashed (虚线) solid (实线) double (双线) groove(槽线)
border-radius:设置四个角为圆角边框
border-top-left-radius:设置左上为圆角边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
background-color: #F0F8FF;
width: 180px;
height: 180px; /* 设置标签的大内容区小为200*200*/
padding: 10px;
/* 边框 设置以下三个属性才可以,默认为2px边框*/
border-top-color: #DB7093; /* 上边框颜色*/
border-top-width: 2px; /* 上边框宽度*/
border-style: solid; /* 设置边框样式 solid实线*/
/* border-top: #87CEEB solid 3px; 简写*/
border: #DB7093 2px solid;
/* 设置圆角边框 */
border-radius: 20px;
/* border-top-left-radius: 10px; 只设置左上角为圆角 */
}
.search{
width: 600px;
height: 30px;
border: #A9A9A9 1px solid;
border-radius: 10px;
outline: none; /* 去除浏览器默认点击时的边框 */
}
.search:hover{
border: gainsboro 1px solid;
}
.search:focus{
border: #4A77D4 1px solid;
}
</style>
</head>
<body>
<!--
盒子模型:认为每个标签都像一个盒子
每个标签由4个区域构成:
内容区:
标签中的内容都是放在内容区的
如果一个标签没有设置内边距和边框,那么内容区大小就是标签的大小
标签的大小是由3部分构成的
标签的大小 = 内容区+内边框+边框
通过width和height可以设置内容区的大小
内边距:
内容区与边框之间的距离,不能放标签
内边距会影响标签的大小
边框:
就是标签的最外层,影响标签大小
外边距:不影响标签大小
-->
<div class="box1">
<span>box</span>
</div>
<br>
<input type="text" name="" class="search" value="" />
</body>
</html>
外边距
● 外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置 外边距。用法和padding类似,同样也提供了四个方向的 。
margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto,设置外边距为最大值,当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等。
垂直设置为auto时值为0,所以水平居中也可以简写为margin:0 auto。
● 外边距不会影响盒子的整体大小,但是会影响盒子的位置,会影响盒子的实际控制范围。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
background-color: #F0F8FF;
width: 200px;
height: 200px; /* 设置标签的大内容区小为200*200*/
/* 外边距 */
/* margin-top: 100px;
margin-left: 100px; */
/* 值如果是auto,那么外边距的值会最大化
当左边与右边外边距都设置为最大化时,就水平居中*/
margin-left: auto;
margin-right: auto;
/* margin:auto 水平居中 */
/*上下外边距设置为auto时,无法居中,值为0,需要设置具体的值,只有左右可以设置为自动*/
margin-top: auto;
margin-bottom: auto;
margin: 100px auto; /* 上下100px 左右居中 */
}
</style>
</head>
<body>
<!--
盒子模型:认为每个标签都像一个盒子
每个标签由4个区域构成:
内容区:
标签中的内容都是放在内容区的
如果一个标签没有设置内边距和边框,那么内容区大小就是标签的大小
标签的大小是由3部分构成的
标签的大小 = 内容区+内边框+边框
通过width和height可以设置内容区的大小
内边距:
内容区与边框之间的距离,不能放标签
内边距会影响标签的大小
边框:
就是标签的最外层,影响标签大小
外边距:不影响标签大小,会影响标签的位置,是一个标签与另一个标签之间的距离
-->
<div class="box1">
<span>box</span>
</div>
</body>
</html>
清除浏览器默认样式
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
<style type="text/css">
/* 统配选择器 去掉浏览器默认样式 */
*{
margin: 0px;
padding: 0px;
outline: none;
}
</style>
文档流
文档流:指的是标签在网页中的排放顺序,标签默认是从左至右一个接一个排放。
文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ,并在每行中按从左至右的顺序排放标签,即为文档流。
也就是说在文档流中标签默认会紧贴到上一个标签的右边,如果右边不足以放下标签,标签则会另起一行,在新的一行中继 续从左至右摆放。
这样一来每一个块标签都会另起一行,那么我们如果想在文档流中进行布局就会变得比较麻烦。
浮动
所谓浮动指的是使标签脱离原来的文档流,在父标签中浮动起来。默认标签都是不浮动的。
浮动使用float属性:
- 可选值:
- none :不浮动
- left :向左浮动
- right :向右浮动
块级标签和行级标签都可以浮动,当一个行级标签浮动以后将会自动变为一 个块级标签。当一个块级标签浮动以后,宽度会默认是内容的宽度,所以当漂浮一个块级标签时我们 都会为其指定一个宽度。
当一个标签浮动以后,其下方的标签会上移。
浮动会使标签完全脱离文档流,也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流,这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
background-color: #5F9EA0;
/*
标签浮动后,宽度只是内容的大小,需要设置宽高
标签浮动后,上升了一层,是立体的,就不会占用原来一楼的空间
*/
float: left; /* 向左浮动 */
}
.box2{
background-color: #A52A2A;
float: left;
}
</style>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
</body>
</html>
清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。
可选值:
left : 忽略左侧浮动
right :忽略右侧浮动
both :忽略全部浮动
<!DOCTYPE html><!-- 横向导航条 -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.menu{
background-color: #DDA0DD;
float: left;
padding: 10px 30px;
color: white;
/* margin: auto; 无效*/
}
.menu-box{
/* 设置宽度后方可居中,因为原先会沾满一行 */
width: 992px;
margin: auto;
}
.main-box{
width: 992px;
background-color: #DB7093;
margin: 10px auto;
}
.main-box-left,.main-box-right,.main-box-center{
float: left;
height: 200px;
}
.main-box-left{
width: 300px;
background-color: #87CEEB;
}
.main-box-center{
width: 392px;
background-color: #FFC0CB;
}
.main-box-right{
width: 300px;
background-color: #F0F8FF;
}
.main-box-bottom{
height: 200px;
background-color: peachpuff;
}
</style>
</head>
<body>
<!--
网页的内容,长什么样子由css实现
menu-box 没有浮动,还是在原来的文档流中
浮动后的标签是不占用原始文档流空间的,这个现象称为高度塌陷
高度塌陷会影响到其他后面标签的布局
解决:清除浮动影响,把父标签自动撑开,撑为与浮动标签高度相同
-->
<div class="menu-box">
<div class="menu">国际新闻</div>
<div class="menu">国际新闻</div>
<div class="menu">娱乐快报</div>
<div class="menu">体育世界</div>
<div class="menu">国际新闻</div>
<div class="menu">国际新闻</div>
<div class="menu">体育世界</div>
<div class="menu">国际新闻</div>
<div style="clear: left;"></div>
</div>
<div class="main-box">
<div class="main-box-left">左</div>
<div class="main-box-center">中</div>
<div class="main-box-right">右</div>
<div style="clear: left;"></div>
<div class="main-box-bottom">底部</div>
</div>
</body>
</html>
定位
定位的基本思想很简单,它允许你定义的标签相对于其正常位置,或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
相对定位
相对定位是一个非常容易掌握的概念. 相对于它 的起点进行移动,移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位, left right top bottom四个属性来设置标签的偏移量。
相对定位的特点 :
- 当标签的position属性设置为relative时,则开启了标签的相对定位
- 当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化
- 相对定位是相对于标签在文档流中原来的位置进行定位
- 相对定位的标签不会脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*相对定位:
相对定位的参照物是他本身,移动后原来的空间还是被占用的,不会脱离文档流
*/
.box1{
width: 100px;
height: 100px;
background-color: #4A77D4;
position: relative; /* 开启相对定位 */
left: 100px;
top: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: darkgreen;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
绝对定位
绝对定位是不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此视觉上会其他的标签重叠。可以通过position: absolute; 开启绝对定位,left right top bottom四个属性来设置标签的偏移量 。
绝对定位的特点 :
- 开启绝对定位,会使标签脱离文档流。
- 开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化。
- 绝对定位是相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位)如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位。
- 绝对定位会使标签提升一个层级。
- 绝对定位会改变标签的性质,行级标签变成块标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*绝对定位:
开启绝对定位的标签,会脱离文档流。
绝对定位标签的参照物会变:
以离他最近的、开启了定位的祖先标签进行定位,
如果祖先标签都没有开启定位,那么就以浏览器边框为参照物
(一般情况下,开启了子标签的绝对定位,就会开启父标签的相对定位)
*/
.box1{
width: 100px;
height: 100px;
background-color: #4A77D4;
position: absolute; /* 开启绝对定位。开启后box2在box1正下方*/
left: 100px;
top: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: darkgreen;
}
.box3{
width: 200px;
height: 200px;
background-color: #FFDAB9;
position: relative;
}
</style>
</head>
<body>
<div class="box3">
box3
<div class="box1">box1</div>
</div>
<div class="box2">box2</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.login_box{
width: 300px;
height: 300px;
background-color: #808080;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px; /* height的一半 */
margin-left: -150px;
}
</style>
</head>
<body>
<div class="login_box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top"></a> <!-- 定义一个顶部的锚点 -->
<a href="#p1">商品1</a>
<a href="#p2">商品2</a>
<a href="#p3">商品3</a>
<a href="#p4">商品4</a>
<a href="#p5">商品5</a>
<h3><a name="p1">商品1</a></h3>
<img src="img/1.png" />
<h3><a name="p2">商品2</a></h3>
<img src="img/2.png" />
<h3><a name="p3">商品3</a></h3>
<img src="img/3.png" />
<h3><a name="p4">商品4</a></h3>
<img src="img/4.png" />
<h3><a name="p5">商品5</a></h3>
<img src="img/5.png" />
<br />
<!-- 制作锚点,使返回顶部一直存在 -->
<a href="#top" style="position: fixed; right: 20px; bottom: 20px;">返回顶部</a>
</body>
</html>