CSS
- 伪类
CSS伪类专门用来表示标签的一种特殊的状态,当我们需要为处在特殊状态的标签设置样式时,就可以使用伪类。
语法:
:link <!--表示普通的链接(没访问过的链接)-->
:visited <!--表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
使用visited伪类只能设置字体的颜色-->
:hover <!--表示鼠标移入的状态-->
:active <!--表示的是被点击的状态-->
:focus <!--向拥有键盘输入焦点的标签添加样式-->
注意:visited放在:hover之前
:active必须被置于:hover之后,才是有效的
:hover和active也可以为其他标签设置
-
透明
定义透明效果的属性是opacity
opacity属性设置标签的不透明级别值为1.
规定不透明度:从0.0(完全透明)到1.0(完全不透明)。 -
块级,行级,行级块标签
等等
块级标签:无论内容多少都会独自占据一行
例如
默认宽:与父级标签一致
默认高:0或者与内容高度一致
行级标签:只占自身大小的标签,不独占一行
即使设置宽高也无效
例如
行级块标签:可以设置大小,不会独占一行
注:一般使用块级标签包含行级标签,不使用行级标签包含块级标签。
a可以包含任何标签,不包括a本身。
p标签不可以包含任何块标签。
display标签:可以改变标签的类型
display:inline 设置为行级标签。
display:block 设置为块级标签。
display:inline-block 设置为行级块标签。
display:none 让标签从网页上消失,不占用网页空间
div标签
块级标签,可以放置任何标签
没有任何附件功能,给了什么属性就变成什么样子
主要用来网页布局
span标签
行级标签
没有任何附加功能,给了什么属性就变成什么样子
主要用来选中文档当中的文字 -
盒子模型
内容区
盒子中放置内容的区域,也就是标签中的文本内容,子标签都是存在于内容区中的。
如果没有为标签设置内边距和边框,则内容区大小默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
width和height属性只适用于块标签(包含行级块标签)。
如果标签的内边距和边框都没有那么内容区的大小就是标签的大小。
内边距
标签内容区于边框以内的空间。
内边距会影响整个盒子的大小。
使用padding属性来设置标签的内边距。
padding按照上(top)、右(right)、下(bottom)、左(left)的顺序分别设置大小。
边框
标签的最外层的框。
可以使用border属性来设置盒子的边框:
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
边框可以设置样式:dotted(点线) dashed(虚线) solid(实线) double(双线) groove(槽线)
border-radius :是指四个角为圆角边框。
标签实际大小:内容区+内边距+边框
外边距
标签边框于周围标签相距的空间。
使用margin属性可以设置外边距。
margin-top/right/bottom/left。四个方向
margin的值可以为负。
margin的值还可以auto,设置外边距为最大值,当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等。
垂直设置为auto时值为0,所有水平居中也可以简写为margin:0 auto。
外边距不会影响盒子的整体大小,但是会影响盒子的位置,会影响盒子的实际控制范围。
清除浏览器的默认样式
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。
所有我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉。
*{
margin:0;
padding:0;
}
- 文档流
指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行,并在每行中按从左到右的顺序排放标签,即为文档流。
就是标签在网页中默认的排放顺序。
浮动
所谓浮动指的是使标签脱离原来的文档流,在父标签中浮动起来。
浮动使用float属性。
可选值:
none:不浮动
left:向左浮动
right:向右浮动
块级标签和行级标签都可以浮动,当一个行级标签浮动以后将会自动变为一个块级标签。当一个块级标签浮动以后,宽度会默认是内容的宽度,所有当漂浮一个块级标签时我们都会为其指定一个宽度。
带来的问题:高度崩塌,浮动元素没有将父级标签撑开。
解决方案:1.设置高度撑开父标签。
2.清除浮动影响 会自动将父标签撑开为浮动标签的高度。
clear:浮动值
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
float: left;/* 向左浮动 */
background-color: #008000;
width: 100px;
}
#div2{
background-color: #A52A2A;
float: left;
}
span{
float: left;
width: 100px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<span >dawda</span>asdaw
<div style="clear: left;"><!-- 清除左浮动 -->
</div>
</body>
</html>
- 定位
定位的基本思想很简单,它允许你定义的标签相对于其正常位置,或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
定位:必须找准一个参照物。
相对定位
相对于它的起点进行移动,移动后原来的位置还被占用。
position:relative 开启相对定位
如果没有设置偏移量,标签位置不动。
left/right/bottom/top: 数值 设置偏移量
与其他标签位置重叠时提升一个层级。
相对定位不会改变标签的性质。
绝对定位
不占空间,运用了绝对定位的标签会脱离原来的文档,浮动起来。
没有设置偏移量,位置不变。
left/right/bottom/top:偏移量 设置偏移量
绝对定位是以离它最近的开启了定位的祖先标签进行定位,这两个条件有一个不满足就会以浏览器的窗口为参照物定位。
绝对定位会是标签提升一个层级。
绝对定位会改变标签的性质,行级标签变为块级标签。
Z-index
设置标签的堆叠顺序。
如果定位标签的层级是一样,则下边的标签会盖住上边的。
通过z-index属性可以用来设置标签的层级。
可以为z-index指定一个正整数作为值,该值将会作为当前标签的层级。
层级越高,越优先显示。
对于没有开启定位的标签不能使用z-index.
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: #ffff00;
}
#div2{
width: 100px;
height: 100px;
position: relative;/* 开启相对定位 */
left: 100px;
top: 100px;
background-color: #FFA500;
}
#div3{
width: 100px;
height: 100px;
background-color: #00FFFF;
}
#div4{
width: 200px;
height: 200px;
background-color: #ffff00;
float: left;
position: relative;/* 开启相对定位 */
}
#div5{
width: 100px;
height: 100px;
position: absolute;/* 开启绝对定位 */
left: 100px;
background-color: #FFA500;
float: left;
}
#div6{
width: 100px;
height: 100px;
background-color: #00FFFF;
float: left;
}
#span1{
position: absolute;/* 开启绝对定位 */
background-color: aquamarine;
top: 10px;
}
#div7{
width: 100px;
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
<div id="div3">
div3
</div>
<div id="div4">
div4
<div id="div5">
div5
</div>
</div>
<div id="div6">
div6
</div>
<span id="span1">
span
</span>
<div id="div7">
div7
</div>
</body>
</html>