1. 选择器
组选择器
p1,p2,p3{
font-size:10px;
color:red;
}
<div>
<p1>this is p1</p1>
<p1>this is p2</p1>
<p1>this is p3</p1>
</div>
标签选择器
格式:
#idType{
/* ID选择器 只能使用一次 */
font-size: 20px;
color: yellow;
}
<div id="idType">ID选择器</div>
类选择器
格式:
.classType{
/* 类选择器 能使用多次 */
font-size: 25px;
color: green;
}
<div class="clssType">类选择器</div>
后代选择器
//只有对 p1的后代span标签内容起作用,其他的标签span不起作用
p1 span{
color:red;
}
<h1>标题:<span>此处不起作用</span></h1>
<p1>内容:<span>此处后代选择器起作用</span></p1>
子选择器
只对直接子标签起作用
p2 > sp{
color:red;
}
<p2>
<!-- 直接子元素,颜色改变 -->
<sp>222</sp>
<p3>
<!-- 此处的为第二代子元素不会改变颜色 -->
<sp>333</sp>
</p3>
</p2>
CSS的盒子模型
- 边框(border)
- dashed(虚线)
- dotted(点线)
- solid(实线)
- 外边距(margin)
- 内边距(padding)
CSS布局模型
- 流动模型(Flow)
- 浮动模型(Float)
- 层模型(Layer)
流动模型
网页默认的排布模型,内联元素在同一行。块级元素单独占一行。块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
浮动模型
任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
/* 浮动模型 */
div{
width:100px;
height:100px;
border:2px red dotted;
}
#div1{float:right;}
#div2{float:left;}
<div id="div1">left</div>
<div id="div2">right</div>
层模型
什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
- 绝对定位(position: absolute)
- 相对定位(position: relative)
- 固定定位(position: fixed)
- 绝对定位(position: absolute)
绝对定位(position: absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
/* 层模型--绝对定位 */
#div3{
position:absolute;
top:20px;
right:100px;
}
<div id="div3">绝对定位</div>
相对定位(position: relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
以前的位置
/* 层模型--相对定位 */
#div4{
position:relative;
left:100px;
top:50px;
}
<div id="div4">相对定位,这时原来的位置</div>
固定定位(position: fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同
/* 层模型--固定位置 ,类似于广告条,滚动条拖动,但是位置始终不变*/
#div5{
position:fixed;
right:0px;
bottom:0px;
}
<div id="div5">固定定位fixed,类似于广告条</div>
Relative和Absolute组合使用
两个要注意的点:
1. 参照定位的元素必须是相对定位元素的前辈元素
2. 参照定位的元素必须加入position:relative;
组合定位的时候父元素必须是relative子元素是absolute
/* Relative 和 Absolute 组合使用*/
#box1{
position:relative;
width:200px;
height:200px;
}
#box2{
position:absolute;
top:50px;
left:50px;
}
<div id="box1">
<div id="box2"></div>
</div>