css学习

CSS

网页三部分

结构：html

表现：css

行为：javascript

css简介

- 层叠样式表
- 网页实际上是一个多层结构，通过css可以分别为网页的每一层来设置样式，最终我们只能看到网页的最上边一层
- 使用css修改元素的样式(行内样式，内联样式)
 	- 在标签内部通过style属性来设置元素的样式
	- color:red; font-size: 30px即为css语法
<p style=color:red; font-size: 30px;>我是牛马</p>

css编写的位置

- 使用内联样式，只能对一个标签生效。
	- 开发时不要使用内联样式
- 将样式编写到head 的style标签中(内部样式表)
	通过css的选择器来选中元素并为其设置样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。
	内部样式表只能对一个网页起作用，里边的样式不能跨页面复用
<head>
    <style>
        p{
            color:red;
            font-size: 60px
        }
    </style>

</head>
- 外部样式表 --> 推荐使用
 	- 可以将css样式编写到一个外部css文件中，然后通过link标签来引入外部的css文件
	- 外部样式表，意味这只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用
	- 将样式编写到外部的css文件中，可以使用带看浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
<link rel="stylesheet" href=".xxx.css">

css语法

<style></style>
- 在style标签中属于css部分。
- css中的注释 /* */
- p为css选择器:通过选择器可以选中页面中的指定元素，比如 p 的作用就是选中页面中所有的p元素

{}中为声明块:通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成，声明是一个名值对结构，名和值之间以:链接，以; 结尾

p{
	color: red;
	font-size:40px;
}

常用选择器

元素选择器
	-根据标签名来选中指定的元素
	-语法：标签名{}
	-
p{
    color: red;
}
h1{
    color: green;
}

id选择器
	-根据元素的id属性值选中一个元素
-语法：#id属性值{}
#red{
    color: red;
}

class类选择器：
	-根据元素的class属性值选中一组元素
	-语法：.class属性值
class 是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组，可以同时为一个元素指定多个class属性<p class="blue abc">内容</p>

<p class="blue">内容</p>
使用：
.blue{
    color: blue;
}

通配选择器
	-选中页面中的所以元素
	-语法：*
*{
    color：red;
}

复合选择器

交集选择器
	-选中同时符合多个条件的元素
	-语法：选择器1选择器2选择器n{}
		交集选择器中如果有元素选择器，必须使用元素选择器开头 
<div class="red">div标签</div>
<p class="red">p标签</p>
div.red{
    font-size: 30px;
}

选择器分组（并集选择器）
	-同时选择多个选择器对应的元素
	-语法：选择器1，选择器2，选择器n{}
h1,span{
    color: green;
}

关系选择器

父元素/子元素
	-直接包含子元素的元素叫做父元素
	-直接被父元素包含的元素是子元素
祖先元素/后代元素
	-直接或间接包含后代元素的元素叫做祖先元素
	-一个元素的父元素也是它的祖先元素
	-直接或者简介被祖先元素包含的元素叫做后代元素
	-子元素也是后代元素
兄弟元素
	-拥有相同父元素的元素是兄弟元素

例如为div的子元素设置一个字体颜色
	-子元素选择器
		-选中指定父元素的指定子元素
		-语法：父元素>子元素
	div > span{
	color : orange;
	}
	div > p > span{
	子元素的子元素
	}
	-后代元素选择器
		-可以选中指定元素内的指定后代元素
		-语法：祖先，后代
	div span{
		color: red;
	}
	-选择下一个兄弟
		-语法前一个+下一个
	p + span{ 
		color: red;
	}
	-选择下边所有的兄弟元素
		-语法：兄 ~ 弟
<div>
    我是div
    <p>
        我是div中的p元素
        <span>我是p元素中的span</span>
    </p>
    <span>我是div中的span元素</span>
</div>

属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素 
[属性名*=属性值] 选择属性值中含有某值的元素的元素
<p title="abc">我是图图小淘气</p>
<p title="xxx">面对世界很好奇</p>

伪类选择器

即不存在的类，特殊的类
	-伪类用来描述一个元素的特殊状态
		比如：第一个子元素，被点击的元素
	-伪类一般情况下都使用：开头
    	:first-child 第一个子元素
    	:last-child 最后一个子元素
    	:nth-child() 选中第n个子元素
    		特殊值：
    			n 第n个 n的范围0到正无穷
    			2n or even 表示选中偶数位的元素
    			2n+1 or odd 表示选中奇数类元素
-以上伪类都是根据所有的子元素进行排序
	:first-of-type
	:last-of-type
	:nth-of-type
-这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中排序。
- :not() 否定伪类
	- 将符合条件的元素从选择器中去除
u1>li:first-child{
	color: red;
}

超链接的伪类

:link用来表示没访问过的链接（正常的链接）
:visited 用来表示访问过的链接
	-由于隐私的原因，所以visited这个伪类只能修改链接的颜色
	
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
a:link{
color: red;
}

<a href="https://www.baidu.com">访问过的链接</a>
</br>
<a href="https://www.baidu.com">没访问过的链接</a>

伪元素选择器

伪元素表示页面中一些特殊的并不真实的存在元素（特殊位置）
	-伪元素使用 :: 开头
		::first-letter 表示第一个字母
		::first-line 表示第一行
		::selection 表示选中的内容

		::before 元素的开始
		::after 元素的最后
			-before和after必须结合content属性来使用（无法选中）

样式的继承

我们为一个元素设置的样式同时也会应用到后代元素上
发生在祖先和后代之间
继承的射击是为了方便开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承
	背景相关的，布局相关的这些样式都不会被继承

选择器的权重

样式的冲突
	-当通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，发生了样式的冲突。
	-发生样式冲突时，应用那个样式由选择器的权重（优先级）决定。
选择器的权重
	-内联样式 1，0，0，0
	-id选择器 0，1，0，0
	-类和伪类选择器 0，0，1，0
	-元素选择器0，0，0，1
	-通配选择器 0，0，0，0
	-继承的样式 没有优先级 
-比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，越优先显示。选择器累加不会超过最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时优先使用靠下的样式
-分组选择器是单独计算
可以在某一个样式的后边添加 ！important，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意在开发中慎用。

像素和百分比

- 长度单位：像素:
	-屏幕（显示器）实际上是由一个一个的小点点构成
	-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果月清晰。
	-同样的200px在不同的设备下显示效果不一样
百分比:
	-可以设置属性相对于其父元素的百分比
	-设置百分比可以使子元素跟随父元素的改变而改变
em
	-相对于元素的字体大小来计算的
	-1em=1 font-size
	-em会根据自身字体大小的改变而改变
rem
	-是相对于根元素的字体大小来计算

RGB/RGBA

颜色单位：
	在css中可以直接使用颜色名来设置各种颜色
		red，blue...
		但是在css中直接使用颜色名是非常不方便
RGB值：
	-RGB通过三中颜色的不同浓度来调配出不同的颜色
	-R red， G green， B blue 叫做光的三原色
	-每一种颜色的范围在0-255（0%-100%）之间
	-语法：RGB（红色，绿色，蓝色）
RGBA：
	-在rgb的基础上增加一个a表示不透明度
	- 1表示完全不透明，0表示完全透明，.5半透明
十六进制的rgb值：
	-语法： #红色绿色蓝色
	-颜色浓度通过 00-ff
#ff0000;-->两两重复可以简写
#ffff00;-->简写：#ff0

HSL

H 色相（0-360）
S 饱和度（0%-100%）
L 亮度（0%-100%）

layout（布局）

文档流 normal flow
	-网页是一个多层的结构，一层痂一层
	-用户只能看到最上一层
	-这些层中最底下的一层就是文档流，文档流是网页的基础
		我们创建的元素默认都是在文档流中进行排列
	-元素主要有两个状态：
    	在文档流中
    	不在文档流中（脱离文档流）
    -元素在文档流中什么特点：
    	块元素
    		块元素在会在页面中独占一行
    		默认宽度是父元素的全部（会把父元素撑满）
    		默认高度是被内容撑开（子元素）
    	行内元素
    		不会独占一行，只占自身的大小
    		如果一行不能容纳，则元素会换到第二行继续排列
    		行内元素的默认宽度和高度都是被内容撑开

盒子模型

点击查看图片来源

css将页面中的所有元素都设置成为一个矩形的盒子。
将元素设置为矩形后，对页面的布局就变成将不同的盒子摆放到不同的位置。
每一个盒子都由以下几个部分组成：
	内容区（content）
	内边距（padding）
	边框（border）
	外边距（margin）
<style>
	/*内容区（content），元素中的所有的子元素和文本内容都在内容区中排列*/
	width: 200px;-->只涉及内容区
	heigth: 200px;-->只涉及内容区
	backgroud-color: #bfa;-->只涉及内容区
/*边框（border），边框属于盒子边缘，边框里边属于盒子内部，除了边框都是盒子的外部，要设置边框，需要至少设置三个样式,边框的大小会影响到盒子的大小*/
- 边框的宽度 border-width
- 边框的颜色 border-color
- 边框的样式 border-style
border-width: 10px;
border-color: red;
border-style: solid;//实线的
</style>
<div class="box1"></div>

边框

- 边框的宽度 border-width
	-border-width:10px,有默认值，一般是3个像素
	-可以用来指定四个方向的边框宽度，值的情况：
		四个值：上 右 下  左
		三个值： 上 左右 下
		两个值： 上下 左右
		一个值：上下左右
		dorder-width: 10px 20px 30px;
	-border-xxx-width,用来单独指定某一个边的宽度
		border-top-width：10px;
- 边框的颜色 border-color
	-用来指定边框的颜色，同样额可以分别指定四个边的边框，规则和border-width一样
	border-color: red yellow green orange
- 边框的样式 border-style
	-solid 表示实现
	-dotted 点状虚线
	-dashed 虚线
	-double 双线
	-default none
		border-style: solid dotted dashed double
border-width: 10px;
border-color: red;
border-style: solid;//实线的

border简写属性，通过该属性可以同时设置边框的所有相关样式，并且没有顺序要求,除了border 以外还有四个border-xxx,来单独给4个边设置
border： 10px solid orange

内边距

内边距（padding）
	-内容区和边框之间的距离
	-一共有四个方向的内边距
		padding-top
		padding-right
		padding-bottom
		padding-left
	-内边距的设置会影响到盒子的大小
	-背景颜色会延伸到内边距上
	-一个盒子的可见框大小，由内容区 内边距和边框共同决定，所以在计算盒子的大小时，需要将三个区域加一起计算
	-padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样

外边距

外边距（margin）
	-外边距不会影响盒子可见框的大小
	-会影响盒子的位置
	-一共有四个方向的外边距：
		margin-top
			-上外边距
		margin-right
		margin-bottom
		margin-left
	-元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置左和上外边距则会移动元素自身而设置下和右外边距会移动其他元素
	-margin的简写属性，用法和padding一样
	-margin会影响盒子所占的实际空间的大小

盒子的水平布局

元素的水平方向的布局
	元素在其父元素中水平位置由一下几个属性共同决定
		margin-left
		border-left
		padding-left
		width
		padding-right
		border-right
		margin-right
一个元素在其父元素中，水平布局必须要满足一下的等式
左外边距|左边框|左内边框---宽度---右内边距|右边框|右外边距=父元素内容区宽度
- 以上等式必须满足，如果不满足，则称为过渡约束，则等式会自动调整
- 调整的情况
	如果七个值中没有为auto的情况，则浏览器会自动调整margin-raght值使等式满足
这七个值中有三个值可以设置为auto
	width 默认就是auto
	margin-left
	margin-right
如果某个值为auto，则自动调整为auto的那个值使等式成立
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，
如果将三个值都设置为auto，则外边距都是0，宽度最大
margin： 0 auto;水平居中

垂直方向的布局

子元素是在父元素的内容区排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出使用overflow属性来设置父元素如何处理溢出的子元素。
可选值：
	visible 默认值 子元素会从父元素中溢出，在父元素的外部位置显示。
	hidden 一处内容将被裁剪不会显示
	scroll 生成两个滚动条，通过滚动条来查看完整的内容
	auto 根据需要生成滚动条
overflow-x:单独处理水平方向
overflow-y：单独处理垂直方向
overflow：同时处理

垂直外边距的折叠

-相邻的垂直方向的外边距会发生重叠现象
-兄弟元素
	-兄弟元素见的相邻垂直外边距会取两者之间的较大值（两者都是正值）
	-特殊情况：如果相邻的外边距一正一负，则取两者的和
	如果相邻的外边距都是负值，则取两者中绝对值最大的
	-兄弟元素之间的外边距重叠，对于开发是有利的，不需要处理
-父子元素
	-父子元素间的相邻外边距，子元素会传递给父元素（上外边距）
	-父子外边距的折叠会影响到页面的布局，必须进行处理

行内元素的盒子模型

-行内元素不支持设置宽度和高度
-行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
-行内元素可以设置border，垂直方向的border不会影响页面的布局
-行内元素可以设置margin,垂直方向的margin不会影响页面的布局

display/visibility

display 用来设置元素的显示类型
	-inline 将元素设置为行内元素
	-block 将元素设置为块元素
	-inline-block 将元素设置为行内块元素，
		行内块元素既可以设置宽度和高度但不会独占一行
	-table 将元素设置为一个表格
	-none 元素不在页面中显示
visibility 用来设置元素的显示状态
	-visible 默认值，元素在页面中正常显示
	-hidden 元素在页面中隐藏 不显示，但是任然占据页面的位置

浏览器的默认样式

通常情况下，浏览器会为元素设置一些默认样式
默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要取出流浪其的默认样式（PC端的页面）
body{
    margin: 0;
}
p{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;-->去除项目符号去除“点”
}
-------------------------------------------------------
全部除去，可能会有残留
*{
    margin: 0;
    padding: 0;
}

盒子的大小

box-sizing:content-box
用来设置盒子尺寸的计算方式（设置内容区width和height的作用）
	可选值
	content-box 默认值，宽度和高度用来设置内容区的大小
	border-box 宽度和高度用来设置整个盒子的可见框大小
		此时，width和height指的是内容区和边框的总大小

轮廓和圆角

outline 用来设置元素的轮廓线，用法和border一摸一样
	轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
box-shadow 用来设置元素的阴影效果，阴影不会影响页面的布局
box-shadow: 0px 0px 0px black
第一个值 水平偏移量，正值向右移动 负值向左移动
第二个值 垂直偏移量 ，正直向下移动，负值向上移动
第三个值 阴影的模糊半径，值越大越模糊
前两个为阴影的偏移量，后面为阴影的颜色

圆角 :设置的是圆的半径大小
border-top-left-radius: 10px 
border-top-left-radius: 10px 10px
两个值是一个椭圆效果
border-radius用来设置圆角
border-top-left-radius 左上角
border-top-right-radius 
border-bottom-left-radius
border-bottom-right-radius
border-radius： 50%-->将元素设置为一个圆形

浮动

通过浮动可以使一个元素向其父元素的左侧或者右侧移动
	使用float属性可以设置元素的浮动
	可选值
		none默认值， 元素不浮动
		left 元素向左浮动
		right 元素向右浮动
float：left；
注意：元素设置浮动以后，水平布局的等式便不需要强制成立了。元素设置浮动后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点：
1. 浮动元素会完全脱离文档流，不在占据文档流中的位置。
2. 设置浮动以后，元素会向父元素的左侧或者右侧移动
3. 浮动元素默认不会从父元素中移除
4. 浮动元素不会盖住其他的浮动元素。
5. 浮动元素不会超过上边的浮动的兄弟元素，最多就是和它一样高。

浮动的特点

- 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围。，可以利用浮动设置文字环绕图片的效果
- 元素设置浮动后，将会从文档流中脱离。
脱离文档流特点
- 块元素不再独占页面的一行
- 脱离文档流后，块元素的宽度和高度默认都被内容撑开
- 行内元素脱离文档流后变成块元素，特点和块一样。脱离文档流后，不需要区分块和行内。

浮动缺陷

高度塌陷和BFC
高度塌陷：
	在浮动的布局中，父元素的高度默认被子元素撑开，将子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将无法撑起父元素的高度，导致父元素的高度丢失。
BFC：
- 块级格式化环境，是css中隐含的属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局区域。
- 元素开启BFC后的特点
	1.开启BFC的元素不会被浮动元素所覆盖
	2.开启BFC的元素，子元素和父元素的外边距不会重叠
	3.开启BFC的元素，可以包含浮动的子元素
- 可以通过一些特殊的方式来开启BFC：-->都是间接开启
	1.设置元素的浮动（不推荐）
	2.将元素设置为行内块元素（不推荐）
	3.将元素的overflow设置为一个非visible的值
	4.常用的方式 为元素设置 overflow：hidden 开启其BFC 以使其可以包含浮动元素

高度塌陷的最终解决方案

网页布局

clear

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素产生的影响
-可选值
	left 清除浮动元素对当前元素的影响
	right 清除右侧浮动元素对当前元素的影响
	both 清除两侧中最大影响的那侧
原理：
	设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其不受其他元素的影响

clearfix（一个特殊的类）

这个样式可以同时解决高度塌陷和外边距重叠的问题。
.clearfix::before,
.clearfix::after{
	content:'';
	display: table;
	clear: both;
}

相对定位

偏移量（offset）

​ 当元素开启了定位以后，可以通过偏移量来设置元素的位置。

​ top

​ -定位元素和定位位置上边的距离。

​ bottom，left，right

定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置
可选值：
	- static 默认值，元素是静止的没有开启定位
	- relative 开启元素的相对定位
	position：relative；
		-元素开启相对定位以后，如果不设置偏移量元素不发生任何的变化。
		- 开启定位后，偏移量才生效
		- 相对定位是参照于元素在文档流中的位置定位的。
		- 相对定位会提升元素的层级
		- 相对定位不会使元素脱离文档流
		- 相对定位不会改变元素的性质，块还是块，行内还是行内。
	- absolute 开启元素的绝对定位
	- fixed 开启元素的固定定位
	- sticky 开启元素的粘滞定位

绝对定位

包含块

  • 正常情况下，包含块就是离当前元素最近的祖先块 元素

绝对定位的包含块

  • 就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则根元素就是它的包含块
  • html（根元素，初始包含块）

绝对定位：

  • 当元素的position属性值设置为sbsolute时，则开启了元素的决对定位。

  • 决对定位的特点

    1. 开启绝对定位后，如果不设置偏移量，元素的位置不会变化
    2. 开启绝对定位后，元素会从文档流中脱离
    3. 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
    4. 绝对元素会使元素提升一个层级
    5. 绝对元素是相对于其包含块进行定位的

固定定位

  • 将元素的position属性设置为fixed则开启了元素的固定定位
  • 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
  • 唯一不同：固定定位永远参照于浏览器的视口进行定位。
  • 固定定位的元素不会随着滚动条的滚动而滚动。

视口

视口即为一个网页固定显示的内容大小。

粘滞定位-->兼容性不好

当元素的position属性设置为sticky时则开启了元素的粘滞定位

粘滞定位和相对定位的特点基本一致，不同的是元素滚动到某一个位置就不再滚动

也是参考于它包含块。

用法：

position：sticky；

top：10px；

绝对定位元素的布局--》绝对定位实现水平居中

水平布局：

​ margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=包含块的内容宽度

开启绝对定位后：

水平布局增加了left和right，此时规则和之前相同

当发生过度约束时：

  • 如果九个值中没有auto 则自动调整right值以使等式满足。

  • 如果有auto，则自动调整auto的值以使等式满足

    • 可以设置auto的值

    • margin，width，left，right

    • left和right的值默认是auto，所以如果不知道left和right则等式不满足时，会自动调整这两个值

​ left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的内容宽度

垂直方向的布局：

​ 在绝对定位中，垂直方向的布局也必须要满足

​ top+margin-top/bottom+padding-top/bottom+border-top/bottom+height+bottom=包含块的高度

元素的层级

对于开启定位的元素，可以通过z-index属性来指定元素的层级

​ z-index需要一个整数作为参数，值越大元素的层级越高，如果元素的层级一样，则优先显示靠下的元素。

祖先元素的层级再高，也不会盖住后代元素

字体族

字体相关的样式

color：用来设置字体颜色。

font-size：40px;，和font-size相关的单位em相当于当前元素的一个font-size，rem 相当于根元素的font-size

font-family：字体族（字体的格式）

  • 可选值：指定字体的类别，浏览器会自动使用该类别下的字体

    serif 衬线字体

    sans-serif 非衬线字体

    monospace 等宽字体

常用法：font-family可以同时指定多个字体，多个字体间使用，隔开字体生效时优先使用的一个，第一个无法使用则使用第二个，以此类推

加上’‘是为了防止字体中间有空格，可能会造成问题

font-family：'Courier New',Courier,monospace

@font-face可以将服务器中的字体直接提供给用户去使用

问题

	1. 加载速度
	2. 版权
	3. 字体格式

@font-face{

​ font-family：'myfont'；指定字体的名字，自己起的

​ src：url（'/xxx.xxx'） fomat（"truetype"）；服务器中的字体路径,format不是必要写的。

}

图标字体 iconfont

字体是一种矢量图，不会失帧。

​ 在网页中经常使用一些图标，可以通过图片来引入图标，但是图片本身比较大，并且非常不灵活。

​ 所以在使用图标时，可以将图标直接设置成字体，然后通过font-face的形式来使用图标。

font-awesome使用：

1.下载

2.解压

3.将css和webfont引入项目中，在同一级目录下

4.将all.css引入到网页中

​

5.使用图标字体

  • 直接通过类名来使用图标字体

  • 来表示小图标

    fas/fab 前的都是固定的，fa-bell是选择的图标名字。

伪元素选择器来设置图标字体

  1. 找到设置的元素通过before 或after选中

  2. 在content中设置字体的编码

  3. 设置字体的样式

    fab

    fas

li::before{

​ content:'\编号';

​ font-family：'库中的复制过来'

}

实体来使用

&#x图标编码；

<span class="fas">&#xfof3</span>

行高（line height）

​ 行高指的是文字占用的实际高度

​ 可以通过line-height来设置行高，行高可以直接指定一个大小（px，em）如果是一个整数的话，行高将会是字体的指定倍数。

字体框

​ 字体框就是字体存在的格子，设置font-size实际就是设置字体框的高度

行高会在字体框的上下平均分配

可以将行高设置为和高度一样的值，使 单行文字在一个元素中垂直居中

行间距=行高-字体大小

字体的简写属性

​ font 可以设置字体相关的所有属性

语法：

		font： 字体大小/行高 字体族

行高可以省略不写，如果不写会使用默认值。

/*
*font-size:50px;
*font-family:'Times New Roman',Times;
*/
--->
font:50px Times New Roman',Times;

font-weight 字重 字体的加粗

font-weight:

可选值：

	normal 默认值 不加粗

​ bold 加粗

​ 100-900 九个级别（没用）

font-style:

font-style 字体的风格

可选值：

​ normal

​ italic 斜体

文本的样式

text-align 文字的水平对其
	可选值：
		left 左侧对齐
		right 右对齐
		center 居中对齐
		justify两端对齐
		
垂直对齐：
vertical-align 设置元素的垂直对齐的方式
	可选值：
		baseline 默认值，基线对齐（子元素和父元素基线对齐）
		top 顶部对齐
		bottom 底部对齐
		middle 居中对齐
		直接指定值 10px

text-decoration：设置文本修饰

​ 可选值

​ none 什么都没有

​ underline 下划线

​ line-through 删除线

​ overline 上划线

white-space 设置网页如何处理空白

可选值：

​ normal

​ nowarp 不换行

​ pre 保留空白

背景

backgrond-color:设置背景颜色

backgrond-image:设置背景图片

backgrond-image:url("./xxx/xx.png")

可以同时设置背景图片和背景颜色。
背景图片小于元素 ，则背景图片会自动在元素中平铺将元素铺满
如果背景图片大于元素，将会有部分背景无法完全显示

background-repeat:设置背景的重复方式

​ 可选值：

​ repeat 默认值，背景会沿着x轴 y轴双方向重复

​ repeat-x 沿着x轴方向重复

​ repeat-y 沿着y轴方向重复

​ no-repeat 背景图片不重复

background-position：用来设置背景图片的位置

​ 设置方式：

​ 即：九宫格

​ 通过 top，left，right，bottom，center几个方位来设置背景的位置，使用方位词，必须要同时指定两个值，如果只写第一个则第二个默认为center

​ 通过偏移量来指定图片的位置:

​ 水平方向的偏移量，垂直方向的偏移量。

background-clip：设置背景的范围

	可选值：

​ border-box 默认值，背景会出现在边框的下边

​ padding-box 背景不会出现在边框，只出现在内容区和内边框

​ content-box 背景只会出现在内容区

background-origin：指定偏移量的原点

​ 可选值：

padding-box 默认值，background-position从内边距处开始计算

content-box 背景图片的偏移量从内容区处计算。

border-box 背景图片的偏移量从边框处开始计算。

background-size 设置背景图片的大小

​ 可选值：

第一个值 宽度；

​ 第二个值 高度；

如果只写一个，则第二个值是auto

cover 图片的比例不变，将元素铺满

content 图片的比例不变，将图片在元素中完整显示

background-attachment：图片是否跟随元素移动

​ 可选值：

​ scroll 默认值，背景图片会跟随元素移动

​ fixed 背景会固定在页面中，不会随元素移动

简写：

background：... ... ...

没用顺序要求，size要写在position后面，并且用/隔开

​ center center/content

origin 和clip 必须按照origin 在前面

posted @ 2022-05-18 09:01  程序员包子  阅读(54)  评论(0)    收藏  举报