CSS基础完整笔记

CSS 基础学习笔记

引入CSS常用方法

• html内: <style></style>
• 外部引入: <link rel="stylesheet" href="index.css">
• 标签内添加:<div style="color:red"></div>

一. 选择器

CSS 标签、类属性、id属性、通配符

标签：div、p、a、span… (标签选择器会选择到页面的所有这类标签元素)

类属性：class属性，可以有多个 好处：可以多个标签归类，是同一个class

id属性：每个元素的 id 唯一 (或没有)

通配符：* 选中所有元素

    <p class="color size">我是测试文字</p>

CSS中常用的选择器

（一）基本选择器

（二） 层次/关系选择器

（三）动态伪类选择器

（四）目标伪类选择器

（五）ui状态伪类选择器

（六）结构伪类选择器

（七）属性选择器

（八）伪元素

⚠️文中提到的 E 是基本选择器（div、p、span……）

（一）基本选择器

• ​ 标签选择器：

​ 通过标签名获取元素 权重：0001

​ （此种选择器影响范围大，建议尽量应用在层级选择器中。）

• ​ class选择器：

​ 通过 . 类名获取元素 权重：0010

（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）

• ​ id选择器：

​ 通过 # id名获取元素 权重：0100

（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）

• ​ 通配符选择器：

​ 获取到页面的所有元素

*{
    /* 所有内外边距置为0 */
    margin:0;
    padding:0;
}

• ​ 群组选择器：

​ 用逗号隔开基本选择器，表示这些选择器都获取到

div,p{

}

（二）层次/关系选择器

​ （主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）

• ​ 后代选择器/包含选择器：

​ 用 空格 隔开基本选择器，表示前一个选择器的所有后代

/*选中p里面所有的a标签*/
p a { 
	color:red; 
}

• ​ 子代选择器：

​ 用 > 隔开基本选择器，表示前一个选择器的子代

​ E > F:表示获取到E 后面 的子代元素

ul>li { 
    line-style: none; 
}

• ​ 相邻兄弟选择器：

  用 + 隔开基本选择器，表示前一个选择器的一个兄弟(弟弟)

​ E + F:表示获取到E 后面 的紧跟着的F元素（同级的）（弟弟选择器）

 a+a { 
 	color:red;  
 }

• ​ 兄弟选择器：

  用 ~ 隔开基本选择器，表示前一个选择器的所有兄弟(所有弟弟)

​ E ~ F:表示获取到E 后面 所有的同级的F元素

li~li { 
	width:200px; 
}

• 补充：交集选择器和并集选择器(不属于层次选择器)

• ​ 交集选择器：

  多个基本选择器 紧挨着 ，表示既是又是(两者都满足)

  EF:表示获取既是E又是F(两者都满足)的元素

  ⚠️注意：如果交集选择器有标签选择器，标签选择器必须放在前面

div.box{
	width:200px;
}
.box.wrapper.test{
    width:200px;
}

• 并集选择器：

  用 ， 隔开基本选择器，表示选中所有这些基本选择器

  E，F:表示获取E和F元素

div.box{
	width:200px;
}
.box.wrapper{
    width:200px;
}

（三）动态伪类选择器

• ​ a:link 锚链接被访问前添加样式

• ​ a:visited 锚链接被访问后添加样式

• ​ e:hover 鼠标悬停在元素上添加样式

• ​ e:active 鼠标点击元素时添加样式

• ​ :focus 表单元素被聚焦时，添加样式

（四） 目标伪类选择器

​ 语法： 目标 :target {属性：属性值} 被选中的目标添加样式

​ 目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式

 /*
	目标伪类选择器：用于匹配当前激活的【锚点元素】
	语法：    :target
*/
.empty{
    height:800px;
}
a:target{
    color:red;
    border:1px solid blue;
}
div:target{
    background-color:yellow;
}


/*    
练习：完成当a元素锚点被激活时，改变字体大小为32px  背景颜色为pink
div元素锚点...... 添加蓝色边框  字体加粗！
*/

/*
	元素状态伪类主要用于表单元素
*/
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的input元素（单选框，复选框）


input:enabled{
	color:red;
}
input:disabled{
	background-color: blue;
}
input:checked{
	width:50px;
	height:50px;
}

HTML:
<p><a href="#db">跳转至东北</a></p>
<p><a href="#jn">跳转至江南</a></p>
<p><a href="#sh">跳转至上海</a></p>
<div class="empty"></div>
<a name="db">我在东北玩泥巴!</a>
<div class="empty"></div>
<a name="jn">黏住过客的思念</a>
<div class="empty"></div>
<div id="sh">雨到.这里缠成线</div>
<div class="empty"></div>

（五） ui状态伪类选择器

• ​ :enabled 可用的表单元素添加样式

• ​ :disabled 不可用的表单元素添加样式(disabled )

• ​ :checked + E 被选中的表单元素添加样式

（六） 结构伪类选择器

• ​ E:first-child

​ 获取到E元素，且要满足为其父元素的第一个孩子

• ​ E:last-child

​ 获取到E元素，且要满足为其父元素的最后一个孩子

• ​ E:nth-child(n)

​ 获取到E元素，且要满足为其父元素的第n个孩子

---

n 的用法：

​ n 从 0 开始，1,2,3,4…直到超过表达式的有效值

​ (1) 6n倍数

​ (2) even偶数/2n odd奇数/2n-1/2n+1（如可用来选中奇偶行来实现 “隔行换色”）

​ (3) -n+5 选中1-5 / n+5 选中5及以后的

​ (4) p:nth-child(-n+3):nth-child(n+2) 2-3个

---

• ​ E:nth-last-child(n)

​ 获取到E元素，且要满足为其父元素的倒数第n个孩子

• ​ E:first-of-type

​ 获取到E元素，且要满足为其父元素的第一个该类型的孩子

• ​ E:last-of-type

​ 获取到E元素，且要满足为其父元素的最后一个该类型的孩子

• ​ E:nth-of-type(n)

​ 获取到E元素，且要满足为其父元素的第n个该类型的孩子

• ​ E:nth-last-of-type(n)

​ 获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子

• ​ E:empty

​ 获取到空的E元素（注：连空格都不能有）

（七） 属性选择器

• ​ E[attr]

​ 拥有attr属性的E元素添加样式 如div[class];

• ​ E[attr=“val”]

​ 拥有attr属性值 为 val的E元素添加样式 如p[class=“ab”]

• ​ E[attr*=“val”]

​ attr属性值 包含 val的E元素添加样式

​ 如ul[class=“c”] 指class类名中包含有c字母的E元素

• ​ E[attr^=“val”]

​ attr属性值以val 开头 的E元素添加样式

• ​ E[attr$=“val”]

​ attr属性值以val 结尾 的E元素添加样式

注意： 

​       =  绝对等于

​       *= 包含（通配）

​       ^= 以..开头

​       $= 以..结尾


/* 属性选择器把 id 和 class 结合了 */
/* 存在id属性的a标签
a[id]{}
*/
a[id]{
    background-color: gold;
}


/* id等于second的a标签    =   */
a[id=second]{
    background-color: green;
} 


/* class中含有links的a标签  *=  */
a[class*="links"]{
    background-color: hotpink;
}


/* 选中href中以http开头的a标签   ^=   */
a[href ^=http]{
    background-color: lawngreen;
}


/* 选中href中以pdf结尾的a标签  $=    */
a[href $=pdf]{
    background-color: lightblue;
}

（八） 伪元素

• ​ E::before

​ 给E元素添加第一个子元素 （前面）

div::before{
          content:"内容";   /*content必须有，哪怕没内容也要 content='' */
          display:block;
          width:100px;
          height:100px;
}  

• ​ E::after

​ 给E元素添加最后一个子元素（后面）

• ​ E::first-letter

​ 给E元素第一个字添加样式

• ​ E::first-line

​ 给E元素第一行添加样式

• ​ E::selection

​ 元素内容被选中时添加样式(火狐需要加前缀-moz-)

二. 网页元素美化

(一) font 字体样式

font-family: 字体

font-size： 字体大小

font-weight： 字体粗细

color ：字体颜色

/*

font 复合属性写法的值应按以下顺序书写(各个属性之间用空格隔开)：

顺序：font-style | font-variant | font-weight | font-size | line-height | font-family

font:italic 700 55px 宋体; /* 复合属性 */

font-style（字体样式)：normal（正常）、italic（斜体）或oblique（倾斜）;

font-variant (字体变化)： normal（正常）或small-caps（小体大写字母）;

font-weight (字体浓淡)： 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;

font-size（字体大小)：可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em

font-family（字体族)： “Arial”、“Times New Roman”、“宋体”、“黑体”等;

*/

(二) font 文本样式

1.rgb 颜色
rgb 0~f
rgb a(透明度) 0~1

2.text-align 排版 加在父元素上
text-align 排版、居中(text-align:center) 默认左对齐

3.text-indent 段落首行缩进
text-indent 段落首行缩进

​ /*

​ 1em 就是一个字的大小(默认是16px)
​ 随着你的 font-size 改变

​ */

4.line-height 行高
行高 和 块的高度 一致，就可以上下居中（单行文字上下居中）

​ line-hight:height(这里填盒子的height数值)可以实现文字的纵向居中

5.text-decoration 文本装饰
上划线 overline
中划线 line-through
下划线 underline
超链接去下划线 none

6.text-shadow 字体阴影
格式：text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径

h1{
 color: #0000FF;
 	/* color:aquamarine; */
 	/* color:rgba(0,151,225,0.9); */
 	text-align: center;
}
.p1{
	 text-indent: 2em;/*首行缩进*/
}
.p2{
 	background-color: bisque;
 	height: 300px;
 	line-height: 300px; /*行高  实现文字纵向居中*/
	text-shadow: forestgreen 10px 10px 2px; /*阴影*/
  }
}
 .l1{
 	 text-decoration: overline;  /*上划线*/
 }
 .l2{
 	 text-decoration: line-through;  /*删除线*/
 }
 .l3{
	 text-decoration: underline;  /*下划线*/
 }

*VS Code element语法

HTML的element语法

<!-- 带 class 的div                  .类名    -->
<div class="app"></div>

<!-- 带 id 的div                     #id名    -->
<div id="app"></div>

<!-- 交集选择器 -->
<!-- 带 class 和 id 的 p              p.haha#hehe    -->
<p class="haha" id="hehe"></p>

<!-- 同级选择器                        +    -->
<!-- 一个 div，同级一个 p              div+p    -->
<div></div>
<p></p>

<!-- 父子级选择器                      >    -->
<!-- 一个 div，里面一个 p              div>p    -->
<div>
    <p></p>
</div>

<!-- 带多个li的列表                    ul>li*3    -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!-- 内部文本 -->
<!-- 里面带1个文本内容的列表             ul>li{文本内容}    -->
<ul>
    <li>111</li>
</ul>

<!--  里面带3个相同文本内容的列表         ul>li{文本内容}*3    -->
<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>

<!-- ul里有3个li，li的内容分别是{1,2,3}   ul>li{$}*3    -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS的element语法

 /* CSS的element语法 */
p{
    /* 提示CSS属性：单词首字母 */
    /* font-size 为 7px                   fsz7     */
    font-size: 7px;
    /* font-weight 为 600                 fw600    */
    font-weight: 600;

    /* 宽300px，高200px，背景颜色pink       w300+h200+bgc    */
    width: 300px;
    height: 200px;
    background-color: #fff;
}

背景

1.background-color 背景颜色

2.background-image 背景图片

3.background-repeat 平铺方式

repeat    水平和垂直方向平铺 (默认)
repeat-x  水平平铺
repeat-y  垂直平铺
no-repeat 不平铺

4.background-position 背景位置

5.background-size 背景图片缩放
参数：

​ ① 数字+px；

​ ② 百分比 相对于当前盒子自身的宽高百分比

​ ③ contain 包含，将背景图片等比例缩放，直到不会超出盒子的最大(可能会留白)

​ ④ cover 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白(可能显示不完整)

6.background 复合属性写法： background:color image repeat position/size

div{
     width: 1000px;
     height:700px;
     border:1px solid red;/*边框：粗细，样式，颜色*/
     background-image: url("images/背景.jpg");
     /*默认是全部平铺的 */
 }
 .div1{
     background-repeat:repeat-x ;
     /*
     background-repeat:
     repeat-x 水平平铺
     repeat-y 垂直平铺
     */
 }
 .div2{
     background-repeat: repeat-y;
 }
 .div3{
	 background-repeat: no-repeat;
 }

渐变

参考网站：渐变Grabient

background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

三. 显示模式 display

格式：display:block;

1. 行内元素

​ 显示特点：

​ ① 一行可以显示多个

​ ② 宽度和高度默认由内容撑开

​ ③ 不可以设置宽高

​ 代表标签: div、p、h、ul、dl、dt、dd、form、header、nav、footer…

2. 块级元素

​ 显示特点：

​ ① 独占一行(一行只能显示一个)

​ ② 宽度默认是父元素的宽度，高度默认由内容撑开

​ ③ 可以设置宽高

​ 代表标签：a、span、b、u、i、s、strong、ins、em、del…

3. 行内块元素

​ 显示特点：

​ ① 一行可以显示多个

​ ② 可以设置宽高

​ 代表标签: input、textarea、button、select…

​ ⚠️注意：img标签有行内块元素特点，但是Chrome调试工具显示结果是 inline

⚠️注意：浏览器解析行内块和行内标签时，如果标签之间换行书写，会产生一个空格的距离

四. CSS三大特性：层、继、优

CSS三大特性：层叠性、继承性、优先级

层叠性

​ 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠） 另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

可以继承的常见属性(文字控制属性都可以继承):

​ 1.color

​ 2.font-style、font-weight、font-size、font-family…

​ 3.text-indent、text-align…

​ 4.line-height

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

范围越小越精准 优先级越高！

⚠️注意：

​ !important 写在属性值的后面，分号的前面；

​ !important 不能提升继承的优先级，继承的优先级固定最低！

​ !实际开发中不建议使用 !important

权重叠加计算

⚠️特殊情况：如果选择器都是继承，那么看选中目标的外一层元素，用权值叠加计算的方法判断外一层元素的样式，目标元素的样式和外一层元素样式相同。

五. 伪元素

一般页面的非主体内容可以使用伪元素

区别：

1.元素：HTML设置的标签

2.伪元素：由CSS模拟出来的标签效果

种类：

1.::before 在父元素内容最前面加一个伪元素

2.::after 在父元素内容最后面加一个伪元素

用来在标签内插入文字比较多

注意点：

1.必须设置content属性才能生效 (可以设为 content:’’ (空内容) )

2.伪元素默认是行内元素

六. 盒子模型

​ 1.margin 外边距

格式：margin:0 0 0 0 ;上右下左（顺时针）不够的和对面的样式一样

​ 只给盒子的某个方向加margin：

​ margin-top

​ margin-bottom

​ margin-left

​ margin-right

​ 外边距妙用：居中

​ margin:0 auto (前提：父级是块元素，有固定宽度)

​ 2.border 边框

​ border连写格式：bordr:10px solid red; (顺序可以任意换)

​ 只给盒子的某个方向加border：
​ border-top

​ border-bottom

​ border-left

​ border-right

​ 2.1 border-radius

​ 4个值：左上 右上 右下 左下（顺时针）(缺少的和对面一样)

​ 2个值：主对角线（左下右上） 次对角线（左上右下）

​ 正圆：

​ height=width

​ border-radius: 50%;

​ 圆角=半径+边框 (有边框情况) （border-radius=height/2+border）

​ 半圆：

​ height=width/2

​ 圆角=height height 0 0 (border-radius=height height 0 0)

​ 扇形（四分之一圆）：

​ height=width

​ 圆角=height 0 0 0 (border-radius=height 0 0 0)

​ 胶囊按钮：

​ border-radius:height/2;(短边高的一半)

/* 圆 */
#div1{
 width: 100px;
 height: 100px;
 border: 2px solid red;
 /*border-radius: 50%;  无边框情况  */
 border-radius: 52px; /* 52px 52px 52px 52px */
}

/* 半圆 */
#div2{
 width: 100px;
 height: 50px;
 border: 2px solid red;
 border-radius: 50px 50px 0px 0px;
}

/* 扇形 */
#div3{
 width: 100px;
 height: 100px;
 border: 2px solid red;
 border-radius: 100px 0 0 0;
}

​ 3.padding 内边距

​ 只给盒子的某个方向加padding：
​ padding-top

​ padding-bottom

​ padding-left

​ padding-right

​ 4.box-shadow 盒子阴影

格式：x偏移量 | y偏移量 | (模糊半径) | 扩散半径 | 颜色

​ box-shadow:10px 10px 102px yellow;

如果网页不设置margin的值，body默认为：8

一般写带盒子的样式顺序：

​ 先写宽高背景色，出现效果，再调节内容的位置，最后控制文字细节

最终的样式位置从上到下的顺序按照：

​ 1.float / display

​ 2.margin / border / padding

​ 3.width / height / background-color

​ 4.文字样式

自动内减模式

给盒子设置:

box-sizing:border-box

浏览器将border 和 padding数值包含在width和height中。使得修改border和padding时盒子大小始终是 width 和 height，不会变。

​

清除所有内外边距

项目在写CSS前，经常在最开始清除所有内外边距 ( padding 和 margin )

*{
	margin:0;
	padding:0;
}

外边距塌陷现象(坑爹现象)

互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上，使得父子元素一起向下移动。

解决方法:

1.给父元素设置border-top 或者 padding-top (分割子元素的 margin-top)

2.给父元素设置 overflow:hidden (溢出隐藏) · 最推荐

3.转换成行内块元素 display:inline-block (只有 块元素 有外边距塌陷问题,行内块没有) · 推荐

4.设置浮动 float · 推荐

七. 浮动 float

实现行内元素排列的方式
display: 
    block  块元素
    inline 行内元素
    inline-block 既是块元素又是行内元素
    none  此元素不会被显示

float：
	left  左浮
	right 右浮

浮动后的元素具有 行内块inline-block 的特点，但比行内块还高级。

浮动能解决很多问题：外边距塌陷问题、行内块换行出现空格问题…

浮动元素的特点：

​ 1.浮动元素会脱离标准流(脱标)，在标准流中不占位置(相当于飘到了空中)

​ 2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素

​ 3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动(默认紧贴)

​ 4.浮动元素有特殊的显示效果(类似行内块)

​ ① 一行可以显示多个

​ ② 可以设置宽高

⚠️注意点：

​ 浮动元素不能通过 text-align:center 或 margin:0 auto 居中

父级边框塌陷问题

父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受到影响，会显示到上面的位置。

一般用来清除浮动的类名就叫’clearfix’，谁要清楚浮动引入这个类名即可

父级边框塌陷问题的解决方案：
1.增加父级元素的高度（low，高度限制）

2.额外标签法
父级中增加一个空的子级div（放在父级元素里的最后面),清除浮动（不建议）
<div class="clear"></div> 
.clear{
    clear: both;
    /*
    margin: 0;
    padding:0;
    */
} 

3.父元素设置overflow:hidden
在父级元素中增加一个overflow:hidden（一般）
hidden 隐藏
scroll 滚动条

4.单伪元素清除法
父级元素添加一个伪元素 ：after(推荐)
.clearfix：after{
    content:'';
    display:block;
    clear:both;
    /*补充代码：在网页中看不到伪元素*/
    height:0;
    visibility:hidden;
}

5.双伪元素清除法
父级元素添加一个伪元素 ：after(最认可、最推荐的方法)
⭐️此方法即可以解决父级边框塌陷问题，还能解决外边距塌陷的问题
/* .clearfix::before的作用:解决外边距塌陷的问题 */
.clearfix::before,
.clearfix::after{
    content:'';
    display:table;
}
/*真正清楚浮动的标签*/
.clearfix::after{
    clear:both;
}

对比 display 和 float

display
    不能控制方向
float
    可以控制浮动方向
    浮动起来会脱离父级边框，所以要解决父级边框塌陷问题

八. 定位

网页常见的布局方式:

​ ① 标准流

1.块级元素独占一行 ---> 垂直布局
2.行内元素/行内块元素一行显示多个 ---> 水平布局

​ ② 浮动

可以让原本垂直布局的块级元素变成水平布局

​ ③ 定位

1.可以让元素自由的摆放在网页的任何位置
2.一般用于盒子之间的层叠情况

使用定位步骤：

​ ① 设置定位方式：

​ 属性名：position

​ 常见属性值：static (默认) 、relative、 absolute、 fixed

​ ② 设置偏移量：

​ 偏移设置分为两个方向，水平和垂直方向各选一个使用即可

​ 选取的原则一般是就近原则 (离哪边近用哪个)

div{
    /*定位方式*/
    position:relative;
    /*偏移量*/
    left:50px;
    top:50px;
}

1. 相对定位

特点
1.占有原来的位置
2.仍然具备标签原有的显示模式的特点(这里仍旧是block)
3.改变位置参照自己原有的位置 (自恋型)
如果left和right都有，以left为准
如果top和bottom都有，以top为准

格式(以左上浮动为例)

position:relative;
left:50px;
top:50px;

应用范围

1.配合绝对定位(子绝父相)
2.用于小范围移动

.box{
    /*相对定位*/
    position: relative;
    left: 200px;
    top: 100px;
    
    width: 200px;
    height: 300px;
    background-color: pink;
}

2. 绝对定位

特点

1.脱标，不占有原来的位置
2.改变标签的显示模式特点：具备行内块特点(一行共存，宽高生效)
3.相对于非静态定位的父元素进行定位移动（详细往下看）

格式(以左上浮动为例)

position:absolute;
left:50px;
top:50px;

应用范围

1.绝对定位(子绝父相)

绝对定位查找"父级"方式：

​ 先找已经定位的父级(广义父级，爷爷、太爷爷都可)，如果有这样的父级，就以这个父级为参照物进行定位

​ 如果逐层查找不到这样的父级，以浏览器窗口为参照物进行定位(有父级但父级没有定位，也以浏览器窗口为参照物)

.father{
    position: relative; /* 父元素只要有position即可，定位类型、偏移量*/
    
    width:500px;
    height:400px;
    
}
.box{
    /*绝对定位*/
	position:absolute;
    left:50px;
    top:50px;
    
    width: 200px;
    height: 300px;
    background-color: pink;
}

绝对定位居中

⚠️/* 绝对定位的盒子不能用 margin:0 auto 居中 */

绝对定位居中方法 1 
	left: 50%;
	margin-left:-宽度的一半px;
	top: 50%;
	margin-top: -高度的一半px;
例如：
    /* left: 50%; 整个盒子移动到中间偏右的位置 */
    left: 50%;
    /* 把盒子向左侧移动:自己宽度的一半，实现真正居中 */
    margin-left: -150px;
    /* top: 50%; 整个盒子移动到中间偏下的位置 */
    top: 50%;
    /* 把盒子向上侧移动:自己高度的一半，实现真正居中 */
    margin-top: -150px;


绝对定位居中方法 1 进阶，可以减少代码修改带来的繁琐性 
transform: translate(-50%,-50%);

	/* 位移自己宽度高度的一半 */
    left: 50%;
    top: 50%;
	/* 把盒子向左侧移动:自己宽度的一半，把盒子向上侧移动:自己高度的一半，实现真正居中 */
    transform: translate(-50%,-50%); /*第一个参数是左右    -左 +右，  第二个参数是上下   -上 +下   */

3. 固定定位

特点

​ 1.脱标，不占有原来的位置
​ 2.改变位置参照浏览器窗口 位置永远固定不变
​ 3.改变标签显示模式，具备行内块 inline-block 特点

格式(以左上浮动为例)

position:fixed;
left:50px;
top:50px;

应用范围

固定窗口、导航栏

.box{
    width: 200px;
    height: 300px;
    background-color: pink;
	
	/*固定定位*/
    position: fixed;
    left: 0;
    top: 0;
}

4.显示层级 z-index

z-index 属性设置元素的堆叠顺序

默认的情况下，定位的盒子，后来者居上
z-index:整数 取值越大，显示顺序越靠上， z-index的默认值是0
注意: z-index必须配合定位才生效

九. 精灵图

精灵图由来：
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

使用精灵图核心：

background-image:url('');
background-position: x y;

1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为 sprites 精灵图 或者 雪碧图。
3.移动背景图片位置， 此时可以使用 background-position。
4.移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同。
5.因为一般情况下都是往上往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：

1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现—background-position。
3.一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理）
优势：减少服务器接收和发送请求的次数，提高页面的加载速度（当网页中的图像过多时）。
缺点：图片文件比较大，放大缩小可能失真、修改困难——采用字体图标。

十. 过渡

​ 通常当 CSS 的属性值更改后，浏览器会立即更新相应的样式，例如当鼠标悬停在元素上时，通过 :hover 选择器定义的样式会立即应用在元素上。在 CSS3 中加入了一项过渡功能，通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需借助 flash 或 JavaScript。

CSS 中提供了 5 个有关过渡的属性，如下所示：

• transition-property：设置元素中参与过渡的属性；
• transition-duration：设置元素过渡的持续时间；
• transition-timing-function：设置元素过渡的动画类型；
• transition-delay：设置过渡效果延迟的时间，默认为 0；
• transition：简写属性，用于同时设置上面的四个过渡属性。

要成功实现过渡效果，必须定义以下两项内容：

• 元素中参数与过渡效果的属性；
• 过渡效果持续的时间。

提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过渡时间的默认值为 0。

1. transition-property

transition-property 属性用来设置元素中参与过渡的属性名称，语法格式如下：

transition-property: none | all | property;

参数说明如下：

• none：表示没有属性参与过渡效果；
• all：表示所有属性都参与过渡效果；
• property：定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号,进行分隔。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2. transition-duration

transition-duration 属性用来设置过渡需要花费的时间（单位为秒或者毫秒），语法格式如下：

transition-duration: time;

其中，time 为完成过渡效果需要花费的时间（单位为秒或毫秒），默认值为 0，意味着不会有效果。

如果有多个参与过渡的属性，也可以依次为这些属性设置过渡需要的时间，多个属性之间使用逗号进行分隔，例如transition-duration: 1s, 2s, 3s;。除此之外，也可以使用一个时间来为所有参与过渡的属性设置过渡所需的时间。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行效果如下图所示：

图：transition-duration 属性演示

3. transition-timing-function

transition-timing-function 属性用来设置过渡动画的类型，属性的可选值如下：

值	描述
linear	以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1)
ease	以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程，等同于 cubic-bezier(0.25,0.1,0.25,1)
ease-in	以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1)
ease-out	以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1)
ease-in-out	以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
            transition-timing-function: ease;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4. transition-delay

transition-delay 属性用来设置过渡效果何时开始，属性的语法格式如下：

transition-delay: time;

其中，参数 time 用来设置在过渡效果开始之前需要等待的时间，单位为秒或毫秒。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
            transition-delay: 3s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行效果如下图所示：

图：transition-delay 属性演示

5. transition

transition 属性是上面四个属性的简写形式，通过该属性可以同时设置上面的四个属性，属性的语法格式如下：

transition: transition-property transition-duration transition-timing-function transition-delay;

transition 属性中，transition-property 和 transition-duration 为必填参数，transition-timing-function 和 transition-delay 为选填参数，如非必要可以省略不写。另外，通过 transition 属性也可以设置多组过渡效果，每组之间使用逗号进行分隔，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行效果如下图所示：

图：transition 属性演示

上面的代码也可以写成如下所示的样子：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background, transform;
            transition-duration: .25s, 1s, 2s;
            transition-timing-function: linear, ease, ease;
            transition-delay: 1.9s, 2s, 0s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

十一. 其他装饰

基线问题

基线：浏览器文字类型元素排版居中存在用于对齐的基线(baseline)

垂直对齐方式 vertical-align

格式：

 vertical-align: middle; 

浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象

1.行内标签和带文字的button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */
    input {
      height: 50px;
      box-sizing: border-box;

      vertical-align: middle;
    }

  </style>
</head>
<body>
  <input type="text"><input type="button" value="搜索">
</body>
</html>

vertical-align:middle前：

没对齐！

vertical-align:middle后：

​

对齐了！

2.img和行内元素不对齐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   img {
     /* 在较大的里面加   vertical-align: middle; */
     vertical-align: middle;
   }
  </style>
</head>
<body>
  <img src="../study/images/1.jpg" alt=""><input type="text">
</body>
</html>

vertical-align:middle前：

vertical-align:middle后：

3.行内标签未完全贴合父元素顶部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    input {
      /* vertical-align: middle; */
      vertical-align: top;
    }

  </style>
</head>
<body>
  <div class="father">
    <input type="text">
  </div>
</body>
</html>

vertical-align:top前：

vertical-align:top后：

4.父级元素没有width

默认基线对齐，背景露出一部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    img {
      /* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
      /* vertical-align: middle;    vertical-align 和 display 二选一*/
      display: block;
    }

  </style>
</head>
<body>
  <div class="father">
    <img src="../study/images/1.jpg" alt="">
  </div>
</body>
</html>

vertical-align: middle前：

vertical-align: middle后：

5.图片居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 600px;
      height: 600px;
      background-color: pink;
      line-height: 600px;
      text-align: center;
    }

    img {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="father">
    <img src="../study/images/1.jpg" alt="">
  </div>
</body>
</html>

vertical-align: middle前：

vertical-align: middle后：

光标类型 cursor

格式：cursor:pointer

.box{
    width: 400px;
    height: 300px;
    background-color: pink;
    cursor: pointer; /*小手*/
    /* cursor:text; 能复制 */
    /* cursor:move; 移动 */
}

溢出部分显示效果 overflow

溢出部分：指的是盒子的 内容部分 所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条…

属性名：overflow

常见属性值：

.test{
    width: 300px;
    height: 200px;
    background-color: pink;

    /* 溢出隐藏多余部分 */
    overflow: hidden;
    /* 滚动 无论内容是否超出，都显示滚动条 */
    /* overflow: scroll; */

    /* 根据内容是否超出，判断是否显示滚动条 */
    /* overflow: auto; */
}

元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

常见属性：

​ visibility：hidden

​ display：none

(拓展)元素整体透明度

场景：让某元素整体(包括内容)一起变透明

属性名：opacity

属性值：0~1直接的数字

​ 1：表示完全不透明

​ 0：表示完全透明

注意点：opacity会让元素整体透明，包括里面的内容，如文字、子元素等…

div{
    width: 300px;
    height: 200px;
    background-color: pink;
    
    /* 占位隐藏 */
    /* visibility: hidden; */
    
    /* *****常用: 不占位隐藏 */
    display: none;
  	
}

​