显示模式、背景
一、元素显示模式
1.块级元素
独占一行，例如div,p，hr,h1-h6,ul,ol,form,table
可以设置高度宽度，外边距，内边距
宽度默认容器宽度
里面可以放行内或块级元素
注意：
文字类元素不能使用块级元素
<p>或<h1>等里不能放<div>
2.行内元素
例如：span,a,i,em
相邻行内元素一行可以放多个
宽高直接设置没有效果
默认宽度是本身内容宽度
行内元素只能放文本或其他行内元素
注意：
链接里不能放链接
链接里可以放块级元素
3.行内块元素
一行可以放多个
默认宽度是本身内容宽度
可以控制高度宽度，外边距，内边距
4.显示模式的转换
（例如a是行内元素，不能设置宽度，但我们想改变链接点击的宽度，也就是要改变为块级元素）
（常用）转化为块级元素：display: block;
转化为行内元素：display: inline;
（常用）转化为行内块元素：display: inline-block;
<style>a {color: pink;text-decoration: none;width: 150px;height: 50px;display: block;}
</style>
<a href="#">小猪佩奇</a>c5.qq截图ctrl+alt+a
6.让文字行高等于盒子高度时可以实现文字垂直居中
二、背景(logo一般用background实现)
1.背景元素(默认透明transparent)
background-color: pink;
2.背景图片
(当既有图片又有背景颜色，图片会压住颜色)
background-image: url(image/Logo.png)
3.背景平铺(默认平铺repeat)
background-repeat
background-repeat: no-repeat;没有平铺
background-repeat: repeat-x;沿x轴平铺
background-repeat: repeat-y;沿y轴平铺
4.背景图片位置
background-position: 方位名词;
方位名词：
x轴:right,left,center
y轴:center,top,bottom
当只有一个方位名词，另外一个轴默认居中
当两个方位名词时，与前后顺序无关
background-position: center top;
background-position: 精确方位；
当只有一个精确单位的值时，一定为x轴，y轴默认居中
当为精确方位时，必须先x轴再y轴
background-position: 20px 50px;
background-position: 混合单位
background-position: center 20px;
5.背景固定(默认scroll)
background-attchment: scroll背景随对象滚动
background-position: fixed背景固定
6.背景复合写法
background: black url() repeat-y fixed top;无顺序要求
7.背景色半透明
background: rgba(0,0,0,0.3);最后一个数字取值范围[0,1]控制透明度
三大特性
1.层叠性
当给结构设置了相同的样式时，根据层叠性的就近原则，实现离结构近的样式，或者说后面的代码会覆盖
2.继承性
子标签会继承父标签的与文字相关的某些样式
行高的继承性:font: 12px/1.5 Microsoft YaHei;1.5指的是行高为当前文字大小的1.5倍也可以写带单位px的模式
3.优先级
选择器相同根据层叠性
选择器不同根据选择器权重
选择器权重：!important(color: pink!important)为无穷>style (
注意:
浏览器单独给链接a设置了样式,不能通过body来修改样式
复合选择器有权重叠加，但不会进位
此时的字为红色,虽然id的权重比元素的大,但是p继承的权重最低为0
<style>#father {color: pink;}p {color: red;}
</style>
<body><div id="father"><p>好看</p></div>
</body>
![[ARM系列]coresight（一）](https://img-blog.csdnimg.cn/direct/245c7881174f43dd990c83f0d531bac7.png)
