目录
一、背景
对于css学习一直停留在大学期间,毕业之后一直从事后端开发(C语言+Java无界面),一直没有机会深入学习css技术。很多标签在使用时也不规范严谨,甚至是瞎用。最近有点时间,打算花上一两周时间系统学习一下,本篇博客只是记录相关重点知识
二、css选择器
css一大特点就是利用选择器,设置对应容器(元素)样式,选择分为:基本选择器和复合选择器
类别 | 种类 | 备注 |
基本选择器 | 标签选择器 | 例如: div {color:red;} 、p {color:red;} |
类选择器 | 例如:.myfont {font-size:16px;} | |
id选择器 | 例如: #myfont{font-size:16px;} | |
伪类选择器 | 链接伪类选择器:a:link、a:visited、a:hover、a:active(顺序必须是这样) | |
结构伪类选择器:E:first-child、E:last-child、E:nth-child(n)、E:nth-last-child(n) | ||
目标伪类选择器:E:target,结合锚点方式设置属性 | ||
复合选择器 | 交集选择器 | E.class名字{//属性设置},例如:p.one {},选择类是one且是p标签的,此选择器不常用 |
并集选择器 | 主要用于抽出相同样式代码,各个选择器用逗号分割,这些选择样式是相同的,例如: .classA, #one,div {//属性设置} | |
后代选择器 | 用于选择某元素的子元素,用空格分割, 父类元素在前,子类元素在后 | |
子元素选择器 | 用于选择直接子元素,即孙子级别不在选择, 用>表示,例如: .classA > p | |
属性选择器 | 用方括号进行选择,例如: 1)a[title] { color: red; },表示选择a中带有属性title | |
伪元素选择器 (css3特性) | ::after 在元素内部结束位置创建一个元素,该元素为行内元素且必须要结合content属性使用,本质是创建一个行内元素 | |
::before 在元素内部开始位置创建一个元素,该元素为行内元素且必须要结合content属性使用 | ||
::selection 用鼠标拖拉选中后,例如:p::first-letter {color:orange;} | ||
::first-line 第一行,例如:p::first-line {color:green;} | ||
::first-letter 第一个字,例如:p::first-letter {color:red;} |
三、css元素分类
在css中元素分为:块级元素、行内元素、行内块元素
常见元素 | 特点 | |
块级元素 | div、p、h1~h6、ul、ol、li | 1)总是从新的一行开始 5)p、h1~h6、dt这些标签内不能在放其他块级元素 |
行内元素 | a、span、strong、b、em、i、del、s、ins、u、img、input | 1)和相邻行内元素在一行上 注意:img input比较特殊,可以设置宽高,通过margin 0 auto来设置img是无效的,必须将其转成block块元素 |
行内块元素 | img、input、td可以设置宽度、高度、对齐属性 | 1)和相邻行内元素(行内块)在一行上,但是之间会有空间缝隙
|
我们可以通过display属性,来改变元素显示模式:
- display:inline 将 块级元素 转成 行内元素
- display:block 将 行内元素 转成 块级元素
- display:inline-block 将块、行内元素 转成 行内块元素
四、CSS三大特性
CSS三大特行包括:层叠性、继承性、优先级
层叠性:一般情况下,如果样式出现出冲突,则按照css书写顺序为准。
继承性:子标签会继承父标签的某些样式,如字体、字号、颜色可以继承而边框、外边距、内边距、定位、元素高度、浮动等属性不可继承。
优先级:和权重挂钩,权重越大优先级越高
css特殊性:
权重表示:0,0,0,0 (从左往右权重越小)
选择器 | 权重 |
标签选择器 | 0,0,0,1 |
类、伪类选择器 | 0,0,1,0 |
#id选择器 | 0,1,0,0 |
内嵌样式,即在标签中增加style="..." | 1,0,0,0 |
!import, 例如: div {color: orange!import;} 优先执行 | 最高 |
权重叠加:如下所示,最终显示red颜色,
<style>
ul li {/* ul权重 0,0,0,1 li权重 0,0,0,1 => 最终叠加后的权重 0,0,0,2*/
color:red;
}
li {/* li权重 0,0,0,1 */
color:green;
}
</style>
继承的权重为0:
<style>
li {/* 权重 0,0,0,1 */
color:orange;
}
.daohang {/* 权重 0,0,1,0 */
color:red;
}
</style>
<nav class="daohang">
<ul>
<li>继承的权重为0--最后为orange</li>
</ul>
</nav>
五、CSS三大模块
CSS的三大模块包含:盒子模型、浮动、定位,这部分是无论如何都必须要掌握的。
5.1、盒子模型
网页布局就是摆盒子过程,盒子三元素:边框(border)、内边距(padding)、外边距(margin)。
内边距:只盒子里的内容与边框的距离,可以通过padding-top、padding-right、padding-bottom、padding-left来设置
外边距:盒子的边框与其他盒子的边框距离,可以通过margin-top、margin-right、margin-bottom、margin-left来设置。行内元素(例如span)只有左右外边距,没有上下外边距。内边距上下是有问题的。因此行内元素不建议设置上下内外边距。
盒子空间尺寸:
高度 = content height + padding + border + margin 宽度 = content width + padding + border + margin
内盒子尺寸:
高度 = content height + padding + border 宽度 = content width + padding + border
注:一个盒子的没有指定宽度\高度 或者 子盒子继承父盒子的宽度\高度,则padding不会影响本盒子的大小
注:我们在使用ul标签的时候,默认情况下ul有内外边距,因此我们经常将内外边距清0
5.2、浮动-float
最早浮动float,是用来实现文字环绕效果(例如:文字环绕图片),我们只需要给img增加float:right(float:left)即可。但是后来float也用于将任何盒子(块级元素,例如div)在一行排列显示,因此float常用于网页布局。
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
float取值 | 说明 |
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动 |
浮动脱离标准流,不占位置,会影响标准流,浮动只有左右浮动。
浮动使用方式
我们在使用浮动的时候,往往需要定义一个标准流的盒子(即没有float属性)作为父级元素,在父级元素内添加我们的浮动元素,这样能保证后面元素不会被被覆盖。
浮动特性
1、浮动的元素总是找离它最近的父元素进行对其并且不会超过内边距。
2、一个父盒子里面的子盒子,如果想要子盒子在一行显示,必须将所有子盒子设置为浮动
3、设置float属性的元素,具有行内块特性,例如div(块级元素)添加了float,可以在一行显示多个div,再或者span元素添加了float,可以对其进行宽度和高度的设置。
清除浮动
某些场景,父级元素在没有设置高度场景下,子级元素浮动会引起一些问题。例如如下代码:
<style>
.father {/* 父级元素 不设置高度 */
border: 1px solid red;
}
.damao {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.ermao {
width: 150px;
height: 100px;
background-color: purple;
float: left;
}
.xiaoming {
width: 300px;
height: 200px;
background-color: black;
}
</style>
<div class="father">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="xiaoming">小明</div>
div小明,就会出现被覆盖现象,例如如下:
解决方法有两种:
1)给父级元素指定高度,但是有些时候不方便给父级元素高度,例如新闻页,无法提前获知新闻内容大小。
2) 清除浮动clear属性 -- 推荐方法
clear取值 | 说明 |
left | 清除左侧浮动的影响 |
right | 清除右侧浮动的影响 |
both | 同时清除左右两侧浮动的影响,推荐使用这个 |
清除浮动4种方式
1)额外标签法:在最后一个浮动元素后面添加一个空的标签,例如<div style="clear:both"></div>,不推荐这种方式
2)父级元素添加overflow属性, .father { overflow:hidden; /* 触发BFC,BFC可以清除浮动 */ }
3)使用after伪元素清除浮动,实际是额外标签法的升级版本,具体代码如下:
<style>
.clearfix:after {
content: "."; /* 内容随意 尽量不空,避免兼容器问题 */
display: block; /* 转换为块级元素 */
height: 0; /* 设置高度为0 */
visibility: hidden; /* 隐藏盒子,相当于隐藏 content内容 */
clear: both; /* 清除浮动 */
}
.clearfix {/* 解决兼容器 ie6 ie7 处理方式 */
/**
* 1、*代表ie6/ie7能识别的特殊符号 带有这个*的属性 只有ie6/ie7才执行
* 2、zoom就是ie6/ie7 清除浮动的方法
*/
*zoom: 1;
}
</style>
<!-- 父级元素引用 clearfix类 -->
<div class="father clearfix">
...
</div>
4)使用before和after双伪元素清除浮动 -- 推荐方法
.clearfix:before, .clearfix:after {
content: ""; /* 内容为空 */
display: table; /* 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 */
}
.clearfix:after {
clear: both;
}
.clearfix {/* 解决兼容器 ie6 ie7 处理方式 */
/**
* 1、*代表ie6/ie7能识别的特殊符号 带有这个*的属性 只有ie6/ie7才执行
* 2、zoom就是ie6/ie7 清除浮动的方法
*/
*zoom: 1;
}
5.3、定位
元素的定位属性主要包括边偏移和定位模式两部分,只有同时设置这两个属性才能起到定位的效果,即完整定位=边偏移+定位模式。
5.3.1、边偏移
边偏移属性 | 描述 | 备注 |
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 | 在同一个元素中,两者只能出现一个 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 | |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 | 在同一个元素中,两者只能出现一个 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
使用:top:100px; left:30px;
5.3.2、定位模式
所谓定位模式实际是定位类型,在CSS中使用position属性对其进行定位设置,语法格式:选择器 {position:属性值},position属性值如下:
取值 | 描述 | 备注 |
static | 静态定位,默认方式。 | 边偏移对该模式是无效的,所以一般用于清除定位的。 |
relative | 相对定位,相对于其原文档流的位置进行定位 | 每次移动都以自己的左上角为起点,开始移动。注意:通过它改变位置,原来占有的位置继续占有。即其他元素不能占用空缺位置,相对定位不脱离标准流,如图5-1所示。 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 | 绝对定位是脱离标准流的,不占有原有位置,原有位置会被其他元素替补,如图5-2所示 |
5.3.2.1、相对定位模式
<style>
.father {
background-color: black;
width: 300px;
height: 400px;
}
.father div {
width: 100px;
height: 100px;
background-color: yellow;
}
.child2 {
top:100px;
left:150px;
position: relative;/* 以自己为左上角为基准点 自我为核心模式 占坑不拉屎角色 */
}
</style>
<div class="father">
<div class="child1">child1</div>
<div class="child2">child2</div>
<div class="child3">child3</div>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/3c81227a0b3a24b45696bbdd2c7800d8.png)
5.3.2.2、绝对定位模式
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 130px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;/* 给大儿子 设置定位*/
top: 30px;
left: 30px;
}
.son2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="father">
<div class="son"></div>
<div class="son2"></div>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/0c39040fc37fe3e5bdabd337e32009f7.png)
在absolute模式(绝对定位)下,有两种场景:
1)父级元素没有定位,子元素有定位,则子元素定位以浏览器左上角为基准点
2)父级元素有定位(例如position=relative、position=absolute),子元素有定位,则子元素定位以父元素左上角为基准点
绝对模式下如何让盒子水平居中、垂直居中:
注意:加了绝对定位的盒子,在使用"margin X auto" 将无效,不能使其水平居中。
可以使用如下算法进行设置,可以达到水平、垂直居中:以水平居中为例:
1、父元素设置相对定位:position:relative; 子元素设置绝对定位:position:absolute;
2、子元素left值等于元素的width的一半,例如父元素width:800px, 那么left等于400px;也可以设置为left:50%
3、子元素设置margin-left为负值,且数值为子元素width的一半,例如子元素width:100px, 那么margin-left:-50px;
或者使用transform: translate(-50%); 这里的50%是自己的width的一半,这样能够解决width不是偶数场景,免去计算过程
总结:
1) 浮动float的主要目的是将多个块级元素在一行显示,
定位主要是移动位置,让盒子到我们想要位置上。
2)相对定位:占有位置,不脱标准流
绝对定位:不占有位置,脱离标准流
3)子绝父相:在网页中我们通常这样使用定位,子元素用绝对定位,父元素用相对定位,即为子绝父相。
5.3.2.3、固定定位模式
固定定位是绝对定位的一种特殊形式,类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置。
固定定位有三点:
1. 固定定位的元素跟父亲没有任何关系,只认浏览器。
2. 固定定位完全脱离标准流,不占有位置(其他盒子会替补到遗留出的位置),不随着滚动条滚动。
3. 固定定位的盒子一定要指定宽和高,除非由内容自动撑开
5.4 定位总结
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 | 备注 |
静态static | 不脱标,正常模式 | 不可以 | 正常模式 | |
相对定位relative | 不脱标,占有位置 | 可以 | 相对自身位置移动(自恋型) | |
绝对定位absolute | 完全脱标,不占有位置 | 可以 | 相对于定位父级移动位置(拼爹型) | 默认转成行内块元素 |
固定定位fixed | 完全脱标,不占有位置 | 可以 | 相对于浏览器移动位置(认死理型) | 默认转成行内块元素 |
我们可以通过z-index指定叠放次序,数值越大,越在上层显示。叠放次序有点像PS中图层概念。z-index只有在相对定位、绝对定位和固定定位下有作用,其他场景均无效。