CSS

★ 1、让盒子和文字水平垂直居中的方法

1. 让盒子水平垂直居中的方法 :

①第一种方法：

/* 先定位父盒子 
  水平居中：*/  
left: 50%;   
margin-left: -100px;
/* 垂直居中：   */      
top: 50%;
margin-top: -100px;

②第二种方法：

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

③第三种方法：

left: 50%;   
/* 0.5 * 父盒子宽度（200） = 父盒子一半的宽度（100）  */

top: 50%;
transform: translate(-50%, -50%);

2. 让单行文字居中的方法 :

text-align: center;  /* 居中 */
text-align: left;    /* 左对齐（默认值）：left */
text-align: right;   /* 右对齐：right */

★ 2、定位

定位：将盒子定在某一个位置，所以定位也是摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式：指定一个元素在文档中的定位方式。 边偏移：决定该元素的最终位置。

定位的分类：
① 静态定位 (position: static; ) ：元素默认定位方式，无定位的意思。

position: static;

② 相对定位 ( position: relative; )：对于原来的位置来移动的。（不脱标，继续保留原来的位置）

position: relative;

③ 绝对定位 ( position: absolute; )：元素在移动位置的时候，是相对与它祖先元素来说的（拼爹型）

position: absolute;

特点： 如果无祖先元素或祖先元素无定位，以浏览器为准定位。
如果祖先元素有定位，以最近一级有定位的祖先元素为参考移动位置。
绝对定位不再占有原先的位置。（脱标）

子绝父相：父级需要占有位置（相对定位），子盒子不需要占有位置（绝对定位）。

④ 固定定位( position: fixed; )：元素固定于浏览器可视区的位置。
场景：浏览器页面滚动时位置不会改变。

position: fixed;

特点： 以浏览器的可视窗口为参照点移动元素。（跟父元素没有任何关系、不随滚动条滚动）
固定定位不占有原先的位置。

⑤ 粘性定位( position: sticky; )：相对定位和固定定位的混合。

position: sticky;

特点： 以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top、left、right、bottom 其中一个才有效

开发常用的：

position: relative;     /* 相对定位 */
position: absolute;     /* 绝对定位 */

在使用定位布局时，可能会出现盒子重叠的情况。此时可以用 z-index 来控制盒子的前后次序（z轴）

z-index: 1;
/* 注意：只有定位的盒子才有 z-index 属性。 */

数值可以正整数、负整数或0，默认是auto，数值越大，盒子就越靠上。
如果属性值相同，按照书写顺序，后来居上。
数字后面不能加单位。

★ 3、盒子模型：border、padding、margin

1. 盒子模型边框 border

合并相邻的边框 :

border-collapse: collapse; 

边框的粗细 (一般情况下都用 px ) :

border-width: 5px; 

边框线的种类 :

border-style: solid;     /* 实线边框 */
border-style: dashed;    /* 虚线边框 */
border-style: dotted;    /* 点线边框 */

边框颜色 :

border-color: red;  

可以给任何边框专门设置其他颜色 层叠性

border-top: 1px solid red;    /* 上边框 */
border-bottom: 3px solid red; /* 下边框 */
border-left: 4px solid red;   /* 左边框 */
border-right: 2px solid red;  /* 右边框 */

也可以简写 :

border: 5px solid blue;

取消边框 :

border: none;

2. 盒子模型内边距 padding （顺时针）

padding-top: 5px;    /* 上内边距 */
padding-right: 5px;  /* 右内边距 */
padding-bottom: 5px; /* 下内边距 */
padding-left: 5px;   /* 左内边距 */

/*  简写：
1个值：上下左右。
2个值：上下、左右。
3个值：上、左右、下。
4个值：上、右、下、左（顺时针） */
padding: 5px 10px 20px 30px; 

3. 盒子模型外边距 margin

margin-left: 20px;   /* 左外边距 */
margin-right: 20px;  /* 右外边距 */
margin-top: 20px;    /* 上外边距 */
margin-bottom: 20px; /* 下外边距 */

外边距可以让块级盒子水平居中，但必满足以下条件：
① 盒子必须指定了宽度（width）
② 盒子左右的外边距都设置为 auto

/* 开发中常见的写法：（盒子水平居中显示） */
margin: 0 auto;
/* 行内元素和行内块元素水平居中给父元素添加： */
text-align: center

4. 可以解决塌陷问题：

/* ① 可以为父元素定义上边框 */
border: 1px solid transparent;
/* ② 可以为父元素定义内边距 */
padding: 1px;
/* ③ 可以为父元素添加 overflow:hidden; */
overflow:hidden;

5. 清除内外边距：

/* 这句话也是我们 css 的第一行代码 */
* {
    padding: 0;   /* 清除内边距 */
    margin: 0;    /* 清除外边距 */
}
/* 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，
不要设置上下内外边距，但是转换为块级元素和行内块元素就可以了。 */

6. 圆角边框

border-radius: 20px;
/* 半径设置成盒子宽度的一半就是圆 */

border-top-left-radius: 50px;     /* 左上 */
border-top-right-radius: 50px;    /* 右上 */
border-bottom-right-radius: 50px; /* 右下 */
border-bottom-left-radius: 50px;  /* 左下 */
/* 圆形：是盒子宽度和高度的一半 */
/* 矩形：是盒子高度的一半 */

7. 盒子阴影

box-shadow: 10px 10px 10px -3px rgba(0,0,0,.3);

★ 4、取消默认样式

1. 取消 input 的默认样式

outline: none;   /* 取消聚焦样式 */
border: none;    /* 取消边框 */

2. 取消 button 的默认样式

outline: none;
padding: 0;
border: none;
background-color: #fff;

3. 取消 a 标签的样式

text-decoration: none;      /* 取消下划线 */

伪类选择器：不能颠倒 LVHA 的顺序

a:link { }     /* 未访问的链接 */
a:visited { }  /* 点击过的链接 */
a:hover { }    /* 鼠标经过的链接 */
a:active  { }  /* 鼠标正在按下还没有弹起鼠标的链接 */

4. 取消li标签的样式

list-style: none;

★ 5、浮动

浮动 (float) 属性值有:

float: none;   /* 不浮动 默认值 none  */
float: left;   /* 向左浮动 left      */
float: right;  /* 向右浮动 right     */

浮动特性：
一、脱标：

1. 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
2. 浮动的盒子不再保留原先的位置

二、浮动盒子一行显示：

1. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
2. 浮动的元素是相互贴靠在一起的（不会有间隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

三、浮动的元素具有行内块元素的特点

1. 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特点
2. 如果行内块元素有了浮动，则不需要转换 块级\行内元素就可以直接给高度和宽度。

浮动布局的注意点：
① 浮动和标准流的父盒子搭配
（先用标准流的父盒子排列上下位置，之后内部元素采取浮动排列左右位置）。
② 一个元素浮动了，理论上其余的兄弟元素也要浮动
（一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题）。 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流

只要是通栏的盒子（和浏览器一样宽） 不需要指定宽度

清除浮动：

1. 额外标签法：

clear: both;
/* 新添加的元素必须是块级元素 如：<div> */

2. 父级添加overflow

overflow: hidden;

3. :after伪元素法 （类型一般用：clearfix）

.clearfix: after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
 /*  IE6、7 专有   */
*zoom: 1;
}

4. 双伪元素 （类型一般用：clearfix）

.clearfix: before,
.clearfix: after {
content: "";
display: table;
}

.clearfix: after {
clear: both;
}

.clearfix {
*zoom: 1;
}

★ 6、块/行内/行内块元素以及显示模式转换

1. 块元素: 独占一行，高、宽、内外边距可控制。（里面可放行内或者块级元素）
   常见的块元素有：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
<!-- 其中<div>是最典型的块元素 -->

2. 行内元素: 一行可显示多个，高宽设置无效。（只容纳文本或其它行内元素）
   常见的行内元素有：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
<!-- 其中<span>是最典型的行内元素，又称为内联元素 -->

3. 行内块元素: 一行可显示多个（行内特点），内外边距可控制（块特点）。

<img/>、<input/>、<td/> 
<!-- 他们同时具有块元素和行内元素的特点 -->

4. 转换成块级元素

a {
    display: block;  
    /* 把行内元素a转换为 块级元素 */
} 

5. 转换成行内元素

div{ 
    display: inline;  
    /* 把块级元素div转换为 行内元素 */
}

6. 转换成行内块元素

span {
   display: inline-block; 
   /* 把行内元素span转换为 行内块元素 */
}

★ 7、选择器

1. 基础选择器

/* ① 标签选择器 */
p { } 、div { }                    

/* ② 类选择器 */
.red { }       /* <div class="red">变颜色</div>  */

/* ③ id选择器 */
#pink { }      /* <div id="pink">迈克尔</div>   */

/* ④ 通配符选择器(选择全部标签) */
* { }   

2. 复合选择器

① 后代选择器：不管是自己的儿子还是孙子都包含。（从最外边的标签依次写到最里面的） */

ol li {
    color: red;
}
ol li a {
    color: gold;
}

<ol>
    <li>孩子</li>
    <li><a href="#">孙子</a></li>
</ol> 

② 子选择器：.类名>标签（只认儿子）

.nav>a {
    color:salmon;
}

<div class="nav">
    <a href="#">儿子</a>  /* 只认儿子 */
    <p>
        <a href="#">孙子</a>
    </p>
</div>

③ 并集选择器：逗号隔开（兄弟选择器）

div,
    p,
    .jerry li {
        color: red;
    }

<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="jerry">
    <li>tom</li>
    <li>jerry</li>
    <li>Spike</li>
</ul>

④ 伪类选择器：不能颠倒 LVHA 的顺序

a:link { }   /* 未访问的链接 */
a:visited { } /* 点击过的链接 */
a:hover { }  /* 鼠标经过的链接 */
a:active  { }  /*鼠标正在按下还没有弹起鼠标的链接 */

<a href="#">jerry</a>

/* :focus伪类选择器：一般情况<input>类表单元素才能获取 */
input:focus { }

<input type="text">

这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序， 选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

nth-child

8、字体相关

/* 字体颜色 : */
color: red; 

/* 字体大小 : */
font-size: 12px; 

/*字体：微软雅黑  */
font-family: 'Microsoft Yahei'; 

/* 字体加粗 : */
font-weight: 700;     
/* 或 */
font-weight: bold;   


/*  字体不加粗 :  */
font-weight: 400;   
/* 或 */
font-weight: normal; 


/* 字体倾斜 : */
font-style: italic; 
font-style: normal;  /* normal 默认值（不倾斜） */

复合属性用法:
复合属性：字体倾斜 字体粗细 字体大小/行间距（行高） 字体

font: font-style font-weight font-size/line-height font-family; 
font: italic 700 20px 'Microsoft yahei'; 
/* 顺序不能更换，属性间以空格隔开 */
/* 不需要的属性可以省略（取默认值），但必须保留font-size和font-family属性 */

单行文字居中 :

text-align: center;  /* 居中 */
text-align: left;    /* 左对齐（默认值）：left */
text-align: right;   /* 右对齐：right */

装饰线 :

text-decoration: line-through;  /* 删除线 */
text-decoration: none;          /* 删除装饰 */
text-decoration: underline;     /* 下划线 */
text-decoration: overline;      /* 上划线 */

/* 首行文本缩进两个文字大小 */
text-indent: 2em; 

/* 行间距（让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中） */
line-height: 26px; 

/* 取消无序列表前面的小圆点 */
list-style: none;   

/* 文字阴影 */
text-shadow: 5px 5px 6px rgba(0,0,0,.3); 

9、引入css（样式表）

1. 内部样式表（嵌入式）：写到style标签内

div {
    color: red;
}

2. 行内样式表：写到标签内

<p style="color:rgb(255, 72, 0)";>前端</p>

3. 外部样式表：写在title标签后面，会打开.css文件

<link rel="stylesheet" href="style.css">
<!-- css文件里面只有样式没有标签 -->

10、背景

1. 背景颜色（预定定义值/十六进制/RGB代码）:

background-color: red; 
background-color: transparent;   /* transparent 透明的  */

2. 背景图片 url（图片路径）:

background-image: url(); 

3. 背景图片平铺 :

background-repeat: repeat;     /* repeat （平铺）     */
background-repeat: no-repeat;  /* no-repeat（不平铺） */
background-repeat: repeat-x;   /* repeat-x（x轴平铺） */
background-repeat: repeat-y;   /* repeat-y（y轴平铺） */

4. 背景图像固定 :

background-attachment: fixed; 
/* scroll随着内容滚动（默认的） */

5. 背景位置 : 水平和垂直居中

background-position: center top; 
/* 
top    （上）
bottom （下） 
left   （左）
right  （右）
也可以是x轴、y轴 */

五个可以总结到一行 :

background: yellow url(../img/wzry.jpg) no-repeat fixed center top;
/* background:  背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置; */

背景颜色半透明 :

background: rgba(0,0,0,0.3); 

11、CSS 的三种特性

1. CSS 的层叠性：
   样式冲突（遵循就近原则），执行离得近的那个。 样式不冲突，不会层叠。

2. CSS 的继承性：
   子标签继承父标签的某些样式（如文本颜色和字号text-,font-,line-以及 color 属性），子承父业。
   CSS行高的继承：
   行高可以跟单位也可以不跟单位。 如果子元素没有设置行高，则会继承父元素的行高的1.5倍
   此时的元素行高是：当前子元素的文字大小*1.5 body 行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整好高

3. CSS 的优先级：
   当同一个元素指定多个选择器，就会有优先级的产生。 选择器相同，则执行层叠性。

选择器不同，则根据选择器权重执行：
!important (重要的)【∞】>行内样式 style=""【1,0,0,0】>ID选择器【0,1,0,0】>类选择器，伪类选择器【0,0,1,0】>元素选择器【0,0,0,1】>继承或者通配符【0,0,0,0】 */

继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

12、圆角边框

1. 圆：

border-radius: 20px;   /* 圆角 */
 
border-radius: 100px;  /* 半径设置成盒子宽度的一半就是圆 */ 
border-radius: 50%;    /* 50%就是盒子宽度和高度的一半 等价于100px */

2. 圆角矩形

/* 盒子高度的一半  */
border-radius: 50px;

border-top-left-radius: 50px;      /* 左上 */
border-top-right-radius: 50px;     /* 右上 */
border-bottom-right-radius: 50px;  /* 右下 */
border-bottom-left-radius: 50px;   /* 左下 */

13、盒子和文字阴影

1. 盒子阴影：

h-shadow:  /* 必需。水平阴影的位置。允许负值 */
v-shadow:  /* 必需。垂直阴影的位置。允许负值 */
blur:      /* 可选。模糊距离 */
spread:    /* 可选。阴影的尺寸 */
color:     /* 可选。阴影的颜色。 */
inset:     /* 可选。将外部阴影(outset)改为内部阴影(inset) */
/* 如： */
box-shadow: 10px 10px 10px -3px rgba(0,0,0,.3);

2.文字阴影：

/* 如： */
text-shadow: 5px 5px 6px rgba(0,0,0,.3);