CSS

一、css常用属性和值

1. 字体font-family

font-size: 30px;
color: pink;
font-family:  "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";
font-family: "\9ED1\4F53";   /* 这是unicode 黑体字体  */
font-weight: 700;  /* 字体粗细：700 等价于 bold */
font-weight: normal;  /* 让粗体变的不加粗 */
font-style: italic;    /* 字体风格：让字体倾斜 */
font-style: normal;  /* 让斜体变的不倾斜 */

 /* font 综合写法 更简洁 */
font: font-style  font-weight  font-size/line-height  font-family;
font: italic bold 14px "微软雅黑" ; 
font: 14px "微软雅黑" ; /* 必须保留font-size和font-family属性，否则font属性将不起作用 */  

/* CSS Unicode字体 */
/* 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。 */
/* 
方案一： 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。
方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。 
*/

自定义字体2步骤

// 求字体网 http://www.qiuziti.com/ 发现字体
// 示例
// 1. 声明字体
@font-face{ font-family: "LCD";  src:url(./LCDAT&TPhoneTimeDate.ttf)}
// 2. 使用字体
p{font-family: LCD; font-size:80px;color:skyblue;}

//ps: 网络字体同自定义字体，将url中的地址换成远程地址即可，注意跨域问题

Iconfont字体图标

// 1.引入css文件(文件中声明了字体名 地址 类名)
<link rel="stylesheet" type="text/css" href="./iconfont.css"/>
// 2.使用相应图标 并获取类名, 应用于页面
<i class="iconfont icon-xxx"></i>

2.颜色值

color:red  |  #fff  |rgb(255,0,0)  |  rgba(255,0,0,0.2);
/* 预定义的颜色值  |  十六进制  |  RGB代码  |  文字半透明 */

3.文本

/* 文本装饰：默认 | 下划线 | 上划线 | 删除线  */
text-decoration: none | underline | overline | line-through;	
text-align: center; /* 文字水平对齐 */
text-indent: 2em;  /* 首行缩进：此时2em 就是2个汉字的宽度 */
text-shadow： 设置文本阴影	

/* 文字阴影：水平位置 垂直位置 模糊距离 阴影颜色 (前2个参数必须写，后面的2个参数可以省略 默认值)*/
text-shadow: 5px 11px 3px rgba(0,0,0,0.5);  

letter-spacing: 2px; /* 中文字间距 */
word-spacing: 10px;  /* 英文单词间距 中文无效 */

line-height: 42px;  /* 行间距: 这个行高给父亲， 行高会继承 */
vertical-align:middle; /* 默认字体基线base-line底部对齐 */

color: rgba(255,0,0,0.2);  /*文字半透明css3：a 是alpha 取值范围 0~1之间 4个参数 不能省略 */

/* 图片与文字对齐  html: <img src="images/2.jpg" > 我好尴尬呀    */
img{vertical-align: baseline | middle;} /*对于块级元素无效,img行内块默认基线(底)对齐|中线对齐*/ | 
img{vertical-align: top | middle;}  /* 用的最多，解决图片底部有缝隙的问题 */

超出的文字显示省略号

/* 超出的文字显示省略号 */
white-space: nowrap;  /* 01.首先先需要添加这句话 强制一行显示内容 */
overflow: hidden;    /* 02.其次必须有这句话  text-overflow: clip; 直接裁剪 用的较少*/
text-overflow: ellipsis | clip;  /* 03.文字溢出：超出的部分，省略号代替  */

/* 超出指定行数：例超出2行 显示省略号 */
.over2Row {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

4.背景

background-color  背景颜色
background-image：none | url(url)	背景图片    /* 背景图片后面的地址，url不要加引号 */
background-repeat: repeat | no-repeat | repeat-x | repeat-y    是否平铺

background-position:x坐标 y坐标	 
// 背景位置:必须先指定background-image属性,默认值为：0% 0%
// 如果只指定了一个值，该值将用于横坐标。   纵坐标将默认为50%。第二个值将用于纵坐标。
    // 1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位
    // 2. 精确单位和方位名字混合使用，必须x坐标在前，y坐标在后。比如 background-position: 15px top;

background-attachment: scroll | fixed    // 背景附着:背景图像是随对象内容滚动 | 背景图像固定
background: rgba(0,0,0,0.3);  // 背景透明 CSS3

background-size: cover | contain   // 背景缩放CSS3:必须先指定background-image属性
设置背景图片的尺寸 , 参数设置如下：
1. 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
2. cover: 会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏,用的最多
3. contain: 自动调整缩放比例，保证图片始终完整显示在背景区域  **/

/* 背景简写 */
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

/* css3新特性 */
background-origin：   规定背景图片的定位区域。
	☞ padding-box    背景图像相对内边距定位（默认值）
	☞ border-box	 背景图像相对边框定位【以边框左上角为参照进行位置设置】
	☞ content-box    背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

   ps： 默认盒子的背景图片是在盒子的内边距左上角对齐设置。

background-clip：  	 规定背景的绘制区域。
	☞ border-box	 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】
	☞ padding-box	 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
	☞ content-box	 背景被裁切到内容区域【将背景图片在内容区域显示】

5.盒模型

每个盒子由元素的内容width/height、内边距padding、边框border和外边距margin组成。

border : border-width || border-style || border-color 
/* 边框样式属性值： none | solid | dashed | dotted | double 
                 没有边框 | 单实线 | 虚线 | 点线 | 双实线    */
table{ border-collapse:collapse; }     /* 边框合并在一起 */
border-radius: 50%;  /* 正方形变圆 */  

/* css3 新特性 */
 box-shadow：      盒子阴影
 border-radius：   边框圆角
 border-image:	  边框图片

/* 设置边框图片 */
border-image-source: url("2.png");

/* 边框图片裁切 : 不需要带单位*/
border-image-slice: 20;

/* 设置边框图片的平铺方式 */
/* border-image-repeat: stretch; */
border-image-repeat: round;
/*  border-image-repeat: repeat; */
border-image-width: 20px;

内边距(padding) 和外边距(margin)

*{margin: 0; padding:0;}  /* 清除元素的默认内外边距 */
padding： 1个值  上下左右 相同
                  2个值  上下 + 左右
                  3个值  上 + 左右 + 下
                  4个值  上 右 下 左

margin： 取值顺序跟内边距相同
margin:0 auto;  /*外边距实现盒子居中:1.必须是块元素 2.盒子必须指定了宽度 */
/* 注意：
1. 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
2. 嵌套块元素垂直外边距的合并：如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并
  解决方案：
    a.为父元素添加overflow:hidden
    b.为父元素定义1像素的上边框或上内边距。
 */

content宽度和高度

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3、**如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小**。

CSS3盒模型

box-sizing: content-box | border-box 标准盒模型 | 怪异盒模型

标准盒模型：    盒子大小为width + padding + border
怪异盒模型：    盒子大小为 width   （padding 和 border 是包含到width里面的）

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影inset/outset；
box-shadow: 0 10px 5px 5px rgba(0,0,0,0.2);

/* 
1. 前两个属性是必须写的。其余的可以省略。
2. 默认外阴影 outset 但是不能写,  想要内阴影  inset 
*/

6.浮动float

脱离标准普通流的控制,移动到其父元素中指定位置的过程

浮动的目的就是为了让多个块级元素同一行上显示。

• 浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
• 浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。
• 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
• 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动
• 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

float:left | right;   /* 向左浮动 | 向右浮动 */

清除浮动

为了解决父级元素因为子级浮动引起内部高度为0 的问题。 清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

clear: left | right | both;


/* 1. 额外标签法：在浮动元素末尾添加一个空的标签 */
<div style=”clear:both”></div>

/* 2.父级添加overflow属性方法：触发BFC的方式，可以实现清除浮动效果 
缺点：  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。 */
overflow: hidden | auto | scroll;

/* 3.使用after伪元素清除浮动 */
.clearfix:after {  
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  }   

.clearfix { *zoom: 1; }   /* IE6、7 专有 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。 */

/* 4.用before和after双伪元素清除浮动 --强烈推荐使用*/
.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}

7.定位

元素的定位属性主要包括定位模式和边偏移两部分。 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换,都转换为 行内块模式.

/* 1. 定位模式 */
positon: relative | absolute | fixed;
/*
relative相对定位:相对于自身位置移动(以自己的左上角为基点),继续占有原来位置   --> 相对定位不脱标
absolute绝对定位:相对于最近的定位父元素移动位置，不占位置,完全脱标，  “子绝父相”：子级是绝对定位的话,父级要用相对定位。
fixed:相对于浏览器定位，固定定位完全脱标，不占有位置，不随着滚动条滚动
*/
  
/* 2.边偏移 */
top:       相对于其父元素上边线的距离
bottom：   相对于其父元素下边线的距离
left:   相对于其父元素左边线的距离
right:  相对于其父元素右边线的距离

/* 叠放次序（z-index） 调整重叠定位元素的堆叠顺序
1. z-index的默认属性值是0,取值越大，定位元素在层叠元素中越居上
2. 如果取值相同，则根据书写顺序，后来居上
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
*/

8.界面样式

/* 鼠标样式cursor */
cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本
   
/* 表单相关 */   
outline : outline-color || outline-style || outline-width 
outline: 5px solid red;  /* 表单轮廓:大小 实/虚 颜色 */

input { outline: 0; }  /* 取消表单轮廓线 */
textarea {resize: none;} /* 防止文本域拖拽 */ 

/* vertical-align 垂直对齐 只针对于 行内元素或者行内块元素，特别是行内块元素， **通常用来控制图片/表单与文字的对齐*/
vertical-align: baseline | middle | top;   基线(底)对齐 | 垂直居中 | 顶部对齐

9.标签显示模式display

块级元素block-level

-   独占一行或多整行,
-   可以对其设置宽高、对齐、行高、内/外边距等属性
-   宽度默认是容器的100%
-   可以容纳内联元素和其他块元素。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

行内元素inline-level

-   和相邻行内元素在一行上
-   仅仅靠自身的字体大小和图像尺寸来支撑结构, 默认宽度就是它本身内容的宽度
-   高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
-   行内元素只能容纳文本或则其他行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内块元素 inline-block

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

display:inline;    /* 块转行内 */
display:block;    /* 行内转块 */
display: inline-block;    /* 块、行内元素转换为行内块 */ 

/* 当一个元素 设置了 浮动 或设置了定位，这个元素就会发生模式转换，转换成行内块 */

元素的显示与隐藏

/* 1. display 显示 */
display : none 隐藏对象   隐藏之后，不再保留位置。
display:block  除了转换为块级元素之外，同时还有显示元素的意思

/* 2. visibility 可见性 */
visibility: visible;  对象可见
visibility: hidden; 对象隐藏 隐藏之后，继续保留原有位置。（停职留薪）

/* 3.overflow 溢出 */
overflow: visible | auto | hidden | scroll
不剪切内容也不添加滚动条 | 超出显示滚动条 | 超出部分隐藏 | 总是显示滚动条

10.过渡、变形、动画

/* 1. transition 过渡属性： 要过渡的属性  花费时间  运动曲线  何时开始;*/
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

/* 2. transform 2D变形属性: */
translate(50px,50px);  位移：相对元素自身的位置发生位置改变
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
/*  让定位的盒子水平居中 */
.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */  
}

/* 缩放 scale(x, y) 取值为倍数关系，缩小大于0小于1，放大设置大于1*/
transform:scale(0.8,1);

/* 旋转 rotate(deg) 取值为角度*/
transform:rotate(45deg);
div{transform-origin:left top;
  transform: rotate(45deg); }  /* 改变元素原点到左上角，然后进行顺时旋转45度 */    

/* 倾斜 skew(deg, deg)  第一个值代表沿着x轴方向倾斜,第二个值代表沿着y轴方向倾斜*/
transform:skew(30deg,0deg);

11.伸缩布局Flex

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

☞ 设置父元素为伸缩盒子【直接父元素】
display： flex
为什么在伸缩盒子中，子元素会在一行上显示？
  1. 子元素是按照伸缩盒子中主轴方向显示
  2. 只有伸缩盒子才有主轴和侧轴
  3. 主轴： 默认水平从左向右显示
  4. 侧轴： 始终要垂直于主轴

/*  父元素 */
display: flex;
flex-direction: column 垂直排列 | row 水平排列         调整主轴方向（默认为水平方向）
justify-content:center|space-between |space-around    子盒子如何在父盒子里面水平对齐           align-items：stretch默认值 | center           设置元素在侧轴的对齐方式
flex-wrap：nowrap|wrap|wrap-reverse  设置元素是否换行显示(在伸缩盒子中子元素默认都会在一行上显示)

flex-flow是flex-direction、flex-wrap的简写形式
flex-flow: column wrap;  /* 两者的综合 */

align-content:stretch换行后的默认值|flex-start|flex-end|center|space-around|space-between 
  (由flex-wrap产生的独立行）设置元素换行后的对齐方式

二、css选择器

1.标签选择器

标签名{属性: 属性值; }

2.类名选择器

.类名{属性:属性值; }   /* 使用.英文点号进行标识,后面紧跟类名 --> 1. 声明类 */
class="类名"      /* html标签--> 2.调用类 */

3.id选择器

#big{}   声明id    
<div id="big"></div>   调用id    

/* 注意：唯一的，只允许使用一次  */

4.伪类选择器

/* 1. 链接伪类选择器 */
a:link {}    /* 未访问的链接 */     
a:visited {} /* 已访问的链接 我们已经点击过一次的状态*/
a:hover {} /* 鼠标移动到链接上 */ 
a:active {} /* 选定的链接 当我们点击别松开鼠标 显示的状态*/

/* 2. 结构(位置)伪类选择器 css3 */
li:first-child {}  /* 选最后一个孩子 但是要求这个孩子是dd */
li:last-child {}   /* 最后一个孩子 */
li:nth-child(4) {} /* 选择第4个孩子  n  代表 第几个的意思 */ 
li:nth-child(odd) {}  /* 可以选择所有的 odd奇数 */
li:nth-child(even) {}  /* 可以选择所有的 even偶数 */
ul li:nth-child(5n) {}  /*  5n     n从0开始的， 0 1 2 3  5n 就是5 的倍数 */
li:nth-last-child(even) {}  /* 从最后一个孩子开始数  倒数 */ */


/* 3. 目标伪类选择器(CSS */
:target {}  
/*当跳转目标成功时:目标的样式 
<a href="#movie">2 演艺经历</a>....
<h3 id="movie">演艺经历</h3>  */


☞ 其他选择器：
	:target          被锚链接指向的时候会触发该选择器
	::selection	     当被鼠标选中的时候的样式
	::first-line	 选中第一行
	::first-letter	 选中第一个字符

5.伪元素选择器

**本质上是 插入一个元素（标签 盒子） 只不过是行内元素 span a**
在元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

/* 1.最常用的： ::before ::after   */
div::before {
  content: "楚乔"; background-color: pink; border: 1px solid red;
  width: 100px; height: 100px; display: block;}
    
div::after {content:"宇文玥的";display:block;
  width:50px;height:50px;border:1px solid skyblue;}

/* 鼠标经过显示边框 */
div:hover::before {  /* 鼠标经过之后 前面插入一个伪元素 */
  content: ""; width: 100%; height: 100%;
  border: 10px solid rgba(255, 255, 255, .3);
  display: block;  /* 伪元素属于行内元素  要转换 */
  position: absolute; /* 要伪元素不占位， 就用绝对定位 */
  top: 0; left: 0;
  box-sizing: border-box;  /* 把padding 和 border 都算入 width 里面 */
}    


/* 2. 其它 */
1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 文本第一行；
3. E::selection 可改变选中文本的样式；

6.属性选择器

[属性名=值] {}
[属性名] {}	   匹配对应的属性即可
[属性名^=值] {}    以值开头
[属性名*=值] {}    包含
[属性名$=值] {}	   以值结束

input[type=text] {}    /* 属性选择器  type 为 text 的文本框 */
input[type=submit]{}    /* 属性选择器  type 为 submit 的文本框 */

/* 获取到 拥有 该属性的元素 */
div[class^=font] {}  /* 表示类名以font开始的 */
div[class$=footer] {}  /* 表示类名以footer结束的类名 */
div[class*=tao] {}  /* 表示tao 在任意位置都可以 */

三、css书写位置

1.内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义,语法格式如下：

<head>
<!-- type="text/CSS"  在html5中可以省略 -->
<style type="text/CSS">  
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

2.行内式(内联样式) 尽量少用

通过标签的style属性来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

3.外部样式表(外链式)

将所有的样式放在**.CSS文件中，通过link标签将外部样式表文件链接到HTML文档中

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

注意： link 是个单标签哦!!! href：定义文件的URL，可以是相对路径，也可以是绝对路径。 type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。 rel：表示被链接的文档是一个样式表文件。

四、css书写规范

1.空格规范

• 【强制】 选择器 与 { 之间必须包含空格。
• 【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

2. 选择器规范

• 【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

3. 属性规范

• 【强制】 属性定义必须另起一行。
• 【强制】 属性定义后必须以分号结尾。