前端学习第二天笔记 CSS选择 盒子模型 浮动 定位 CSS3新特性 动画 媒体查询 精灵图雪碧图 字体图标

CSS选择器

全局选择器

1. 可以与任何元素匹配，优先级最低，一般做样式初始化

*{
	margin:0;
	padding:0;
}

元素选择器

类选择器

1. 固定用圆点.来定义，针对你想要的所有标签使用

<h2 class="content">你好</h2>
/*定义类选择器*/
.content{
	color:red;
}

2. class属性的特点
   • 类选择器可以被多种标签使用
   • 类名不能以数组开头
   • 同一个标签可以使用多个类选择器，用空格隔开

<h3 class="classone classtwo">我是一个h3</h3>

ID选择器

1. 针对某一个特定的标签来使用，只能使用一次，CSS中的ID选择器以#来定义。
   • ID是唯一的
   • ID不能以数字开头

<h2 id="mytitle">你好</h2>
#mytitle{
	boreder:3px dashed green;
}

合并选择器

选择器的优先级

CSS中，权重用数字衡量。

• 元素选择器的权重是：1
• class选择器的权重是：10
• id选择器的权重是：100
• 内联样式选择器的权重是：1000
• 优先级从高到低：行内样式>ID选择器>类选择器>元素选择器注： 当权重相等时，按照代码的执行顺序来决定

字体属性

CSS可以属性定义字体、颜色、大小、加粗、文字样式

1. color：规定文本的颜色

2. font-size：设置文本的大小

3. font-weight：设置文本的粗细
   

4. font-style：指定文本的字体样式

   • normal：默认值
   • italic：定义斜体字

5. font-family：属性指定一个元素的字体

背景属性

1. background-repeat属性

   • 该属性设置如何平铺背景图像
     • repeat：默认值
     • repeat-x：只向水平方向平铺
     • repeat-y：只向垂直方向平铺
     • no-repeat：不平铺

2. background-size属性
   

3. background-positon属性
   

文本属性

1. text-align：指定元素文本的水平对齐方式
   • left：文本居左排列，默认值
   • right：把文本排列到右边
   • center：把文本排列到中间

<style>
	h1{text-align:center;}
</style>

2. text-decoration：属性规定添加到文本的修饰，下划线、上划线、删除线等
   • underline：定义下划线
   • overline：定义上划线
   • line-through：定义删除线

<style>
	h1{text-decoration:underline;}
</style>

3. text-transform：属性控制文本的大小写
   • captialize：定义每个单词开头大写
   • uppercase：定义全部大写字母
   • lowercase：定义全部小写字母

<style>
	p1{text-transform:lowercase;}
</style>

4. text-indent：属性规定文本块中首行文本的缩进
   • 负值是允许的，如果值是负数，将第一行左缩进

<style>
	p2{text-indent:30px;}
</style>

表格属性

• 使用CSS可以使HTML表格更美观

表格边框

• 指定CSS表格边框，使用border属性

<style>
table,td{
	border:1px solid black;
}
</style>

折叠边框

• border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开
  

表格文字对齐

1. text-align属性设置为水平对齐方式，向左、右、或中心
   td{text-align:right;}
2. 垂直对齐属性设置垂直对齐
   td{height:50px;vertical-align:bottom;}

表格填充

• 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

td{padding:15px}；

表格颜色

关系选择器

后代选择器

• 选择所有被E元素包含的F元素，中间用空格隔开
• 

ul li{

color: red;

}

子代选择器

• 选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
• 

<style>
ul>li{
color: red;
}
</style>

相邻兄弟选择器

• 选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
• 

<style>
h3+p{
color: red;
}
</style>

通用兄弟选择器

• 选择E元素之后的所有兄弟选择器F，作用于多个元素，用~隔开

<style>
h3~p{
color:red;
}
</style>

CSS盒子模型

• 盒子模型在设计和布局时使用
  

弹性盒子模型

• 默认弹性盒子中的内容是横向摆放

父元素上的属性

flex-direction属性

justify-content属性

align-items属性

flex属性—子元素上的属性

• 可以理解为权重

<style>
.box1{
	width: 100px;
	height: 100px;
	background-color: red;
	flex:2;
}
.box2{
	width: 100px;
	height: 100px;
	background-color: green;
	flex: 2;
}
.box3{
	width: 100px;
	height: 100px;
	background-color:blue;
	flex: 1;
}
</style>

文档流

• 文档流是文档中可显示对象在排列时所占用的位置/空间

• 例如：块元素自上而下摆放，内联元素，从左到右摆放

• 标准流里面的限制非常多，导致很多页面效果无法实现

  1. 高矮不齐，底边对齐
  2. 空白折叠现象
     • 无论多少个空格、换行、tab、都会折叠成一个空格
     • 如果我们想让img标签之间没有空隙，必须紧密连接

• 脱离文档流

  • 浮动
  • 绝对定位
  • 固定定位

浮动

• 增加一个浮层来放置内容

浮动的定义

• float属性定义元素在哪个方向浮动，任何元素都可以浮动
  • left：元素向左浮动
  • right：元素向右浮动

浮动的原理

1. 浮动以后使元素脱离了文档流
2. 浮动只能左右浮动，没有上下浮动

元素向左浮动

元素向右浮动

所有元素向左浮动

• 当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

当容器不足时

• 当容器不足时以横向摆放内容的时候，会在下一行摆放
  

清除浮动

浮动的副作用

• 当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动。

  1. 浮动元素会造成父元素高度塌陷
     

  2. 后续元素会受到影响

清除浮动的方法

1. 父元素设置高度

2. 受影响的元素增加clear属性

3. overflow清除浮动
   

4. 伪对象方式

<style>
.container{
	content: "";
	display: block;
	clear:both;
}
</style>

定位

相对定位

<style>
div{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 200px;
top:100px;
}
</style>

绝对定位

• 绝对定位脱离了文档流
• 随着页面的滚动会一起滚动

<style>
.box1{
height: 200px;
width: 200px;
background-color: red;
position: absolute;
}
</style>

固定定位

• 固定定位也脱离了文档流
• 不会随着页面的滚动而滚动

<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
right: 100px;
bottom: 100px;
}
</style>

温馨提示

• 设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

Z-Index

• Z-index 属性设置元素的堆叠模式，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

CSS3新特性

圆角

<style>
div{
height: 50px;
width: 100px;
background-color: aqua;
border-radius: 20px;
}
</style>

阴影

• box-shadow向框添加一个或者多个阴影
  

<style>
.box{
width: 400px;
height:400px;
background-color: aqua;
margin: 0 auto;
box-shadow: 0px 0px 25px gray;
}
</style>

动画

• 动画是使元素从一种方式逐渐变化为另一种样式的效果
• 请用百分比来规定变化发生的时间，或用关键词“from”和"to"，等同于0%和100%
• 0%是动画的开始，100%是动画的结束

@keyframes创建动画

animation执行动画

<style>
div{
width: 200px;
height: 200px;
background-color: red;
animation: myanaimation 3s linear 0s infinite normal;
}

/* hover鼠标移动到其上时触发 */
div:hover{
animation-play-state: paused;
}

@keyframes myanaimation{
0%{
background-color: red;
}
50%{
background-color: green;
}
100%{
background-color: red;
}
}
</style>

媒体查询

• 媒体查询能使页面在不同的终端设备下达到不同的效果
• 媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

• 使用设备的宽度作为视图宽度并禁止初始的缩放，在<head>标签里加入这个meta标签
  

媒体查询语法

<style>
@media screen and (max-width:768px) {
div{
background-color: aqua;
}

.p1{
display: none;
}

.p2{
display: none;
}
}

@media screen and (max-width:992px) and (min-width:768px) {
div{
background-color: blue;
}

.p1{
display: none;
}

.p2{
display: block;
}
}

@media screen and (min-width:992px) {

div{
background-color: red;
}

.p1{
display: block;
}

.p2{
display: block;
}
}
</style>

雪碧图

优点

1. 减少图片的字节
2. 减少网页的http请求，从而大大的提高页面的性能

原理

1. 通过background-image引入背景图片
2. 通过background-position把背景图片移动到自己需要的位置

字体图标

优点

1. 轻量性：加载速度快，减少http请求
2. 灵活性：可以利用CSS设置大小颜色等
3. 兼容性：网页字体支持所有现代浏览器，包括IE低版本