CSS学习

CSS(cascading style sheets)

是一种标记语言，层递样式表。
选择器 |属性 |值（键值对）
选择器 键值对 中间保留空格

 p{color: red;}

css选择器的作用：
选择器的分类：基础选择器和复合选择器
基础选择器：标签选择器、类选择器、id选择器、通配符选择器

• 标签选择器
  html标签名称
• 类选择器
  单独选择其中一个或者几个标签 可指定多个类名
  （样式点定义 结构类调用 一个或多个 开发最常用）
  class= .类名{属性：值；}
• id选择器（只能调用一次 经常和JavaScript一起使用）
  html 以id属性来设置id选择器，css中的id选择器用#来定义
• 通配符选择器
  用*来定义选中页面所有元素 特殊场景使用
  * { margin: 0; padding: 0;}

CSS font（字体） 字体系列

  font-family: '微软雅黑'，Ariel;
  font-family: 'Times New Roman', Times, serif;

字体大小

 font-size: 20px; 像素一定有单位

字体粗细

   font-weight: bold;粗体
   font-weight: normal;正常
   font-weight: bolder;ie+特粗体
   font-weight: lighter; ie5+细体
   提倡：number数值 ie5+ 100 200 300  400 不要单位

文字样式-风格

  font-style: italic;斜体 em斜体
  font-style: normal;正常

字体复合属性
（ 节约代码 不能随意更换顺序 ，必须保留 font-size 和font-family）

 font: font-style font-weight font-size/line-height font-family;
 font: italic 700 15px 'Microsoft yahei';

CSS文本属性 外观

文本颜色

 color: yellow; 英文
 color: #f00;
 color: #ff0000; 十六进制 最常用
 color: rgb(255, 255, 255);RGB代码

对齐文本

水平调整位置
   text-align: center;
   text-align: right; 
   text-align: left;

装饰文本

  text-decoration: none;默认 没有装饰线 最常用
  text-decoration: underline; 下划线 a链接自带下划线 常用
  text-decoration: overline; 上划线
  text-decoration: line-through; 删除线

文本缩进

首行缩进
text-indent: 2em; 2个文字大小
text-indent: 10px;

行间距

上间距 文本高度 下间距 = 行高
  line-height: 26px; 

CSS引入方式

• 行内样式

内部样式表  嵌入式引用  也可以放到body中，控制整个页面中的样式  并没有完全分离
<style>
	样式
</style>

• 行内样式表

用于修改简单样式  控制当前标签  行内式引入
 <div style="color: red;"></div>

• 外部样式表（推荐)

单独写CSS样式文件 外部引用 控制多个页面
      新建一个demo1.css
 引入：
 <link rel="stylesheet" href="demo1.css">

CSS 第二天

• Emmet语法
  快速生成html结构

1. div +tab 生成 <div></div>
2. div*3 生成3个div
3. 3.父子级的关系 用ul>li
4. 兄弟级的用 div+p
5. 如果生成类或者id名字 直接写 .demo 或者#two tab键
6. 如果生成div有顺序 可以用$自增符号‘.demo$*6`
7. 生成标签默认显示几个文字 div{我喜欢}*3

• 快速生成css

1. 缩写生成
   w100px +enter width：100px；
   h200px +enter height:100px;
   ti2em +enter text-indent:2em;
   lh24px +enter line-height:24px;
2. 格式化代码
   shift+alt+F / 右键单击 选择格式化代码
   用户下面的setting.json 设置

 "editor.formatOnType": true,   
 "editor.formatOnSave": true

CSS的复合选择器

包括：后代选择器、子选择器、并集选择器、伪类选择器等

• 后代选择器（重要）
  元素1 元素2 { } 空格隔开 父亲加孩子/孙子/重孙子
• 子选择器
  元素1>元素2{ 样式声明 } 最近一级子元素 亲儿子
• 并集选择器（重要）
  元素1，元素2 {样式声明} 英文逗号分隔 和的意思 用于集体声明
• 伪类选择器
  a:link选择未被访问的链接
  a:visited选择所有已被访问的链接
  a:hover选择鼠标指针位于其上的链接
  a:active选择活动链接（鼠标按下未弹起的链接）
  顺序按照 LVHA
  ：focus用于选择选取获得焦点 input：focus

CSS元素显示模式

html元素一般分为块元素和行内元素两种。

块级元素：div h1-h6 p ul ol li

1.比较霸道自己占一行
2.高度宽度以及内边距 都可以控制
3.宽度默认是容器的100%
4.是一个容器盒子，里面可以放行内或者块级元素
注意：文字类元素不能再使用块级元素 p h1-h6

行内元素：span a strong em i del s ins u

1.一行可以显示多个
2.高度宽度 设置无效
3.默认宽度是他本身的高度
4.行内元素只能容纳文本或者其他行内元素
注意：链接里面不能再放链接了 a里可以放块级元素 a转换块级元素更安全

行内块元素：img input td 同时具有行内元素和块级元素的特点

1.和相邻行内元素在一行，但是会有空白缝隙 一行显示多个（行内）
2.默认它本身内容的宽度（行内）
3.高度 行高 外边距及内边距都可以控制（块级）

元素显示模式转换

 display: block;  转换为块级元素
 display: inline;  转换为行内元素
 display: inline-block; 转换为行内块元素

截图小工具 Snipaste

1.F1截图 同时测量大小 书写文字
2.F3桌面置顶显示
3.点击图片 alt可以取色 按下shift可以切换取色模式
4.按esc取消图片显示
电脑自带：shift+win+s

垂直居中的代码

line-height:文字行高等于盒子的高度；
文字小于盒子高度偏上
文字大于盒子高度偏下

CSS的背景

背景颜色 背景图片 背景平铺 背景图片位置 背景图像固定

背景颜色
background-color：transparent ;（透明）
background-color：pink；

背景图片
装饰性背景图片
background-image：none | url（地址）; 小的话默认平铺的效果， none无背景

背景平铺
background-repeat: repeat ; 平铺默认
background-repeat: no-repeat ; 不平铺
background-repeat:repeat-x ; X轴平铺
background-repeat:repeat-y ; Y轴平铺

页面元素可以添加背景图片也可以添加背景颜色 只不过背景图片会压住背景颜色

背景图片位置
x,y坐标 可以使用方位名词或者精确单位
background-position: x y;

方位名词 前后两个值顺序无关
background-position: left top; ==  background-position:  top left;
background-position: center right; ==  background-position: right center;

指定一个方位名词 第二个默认居中
background-position: right; 第一个右对齐 第二个垂直居中
background-position: top; 第一个顶部对齐 第二个水平居中

可以是数值  第一个是x   第二个是y （一个不设置 另一个居中）
background-position：20px 50px;

背景图像固定

background-attachment：fixed  | scroll（默认）

背景复合写法

background：transparent  url(imahe.jpg)   no-repeat   fixed   top;（无固定要求顺序)

背景的透明写法

background：rgba(0,0,0,0.3);
background：rgba(0,0,0,.3);
0-1之间 透明度越高越厚

CSS三大特性

层叠性 、继承性、优先级

层叠性 ： 就近原则，覆盖前面重复的样式；
继承性 ： 子承父业，简化代码（text-、 font-、 line-、color）；

body{
	font：12xp/1.5  'Microsoft YaHei'; 
	//1.5 就是当前元素文字大小 font-size的1.5倍  里面的子元素可以根据自己的文字大小自动调整行高
    }
		

优先级：
继承/* (0,0,0,0) <元素选择器（0,0,0,1）<类选择器,伪类选择器(0,0,1,0)< ID选择器(0,1,0,0)<行内样式 style=““(1,0,0,0) <!important 重要的(无穷大)

范围越大优先级越小

复合选择器权重叠加问题 需要计算权重

0,0,0,1+0,0,0,1=0,0,0,2
0,0,0,1 +0,0,1,0=0,0,1,1
div ul li ---->0,0,0,3

CSS盒子模型

1.盒子模型（Box Model）组成

*border: 边框

border：border-width ||  border-style ||  border-color （顺序无规定）

border-width 边框粗细 PX
border-style 边框样式 （solid实线 dashed虚线边框 double 双实线 dotted 点线 none hidden）
border-color 边框颜色

注意：一个（四边） 二个（上下 左右） 三个（上 左右 下） 四个（分别设置）
边框会影响实际大小

padding：内间距

padding-top 上内边距
padding-right 右内边距
padding-left 左内边距
padding-bottom 下内边距

复合型写法：
padding：5px；
padding：10px 10px；
padding：10px 5px 6px；
padding： 12px 19px 5px 10px；
注意：一个（四边） 二个（上下 左右） 三个（上 左右 下） 四个（分别设置）
padding 会撑大盒子

如果说盒子本身没有指定width/height（不会继承）的属性 则此时不会撑大盒子大小

margin：外边距

margin-top 上外边距
margin-right 右外边距
margin-left 左外边距
margin-bottom 下外边距

margin 外边距典型应用：
让块级盒子水平居中: 1.盒子必须指定宽width 2. 盒子左右外边距设置为auto
常见写法：
margin-left：auto； margin-right：auto；
margin：auto；
margin：0 auto；

**注意：**以上是块级元素书水平居中，行内元素或者行内块元素居中给其父元素添加text-align：center；即可。

外边距合并
1.相邻块元素垂直外边距的合并
两个相邻的盒子 一个设置margin-top 一个设置 margin-bottom 最后取最大的值
尽量给一个盒子添加margin

2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的边缘值。

解决方案：
为父元素定义一个上边框
为父元素定义一个内边距
为父元素添加overflow：hidden；

比如还有其他方法，浮动、固定、绝对定位、盒子不会有塌陷。

清除内外边距
list-style：none;去除圆点

不同网页元素有很多自带的默认的内外边距，不同浏览器也不一致。

 * {      
	  padding: 0;   //清除内边距
	  margin: 0;    //清除外边距
   }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级元素和行内元素就可以了。

PS基本操作

• 文件->打开 我们要测量的图片
• Ctrl+R 打开标尺，或者视图->视图
• 右击标尺，把里面的单位改为像素
• Ctrl++ 放大 Ctrl±缩小
• 移动图片 按住空格键 抓手工具
• 矩形选取 可以测量大小
• Ctrl+D可以取消选取 或者在旁边空白处点击 也可以取消选取
• 吸管工具 可以看颜色

CSS新增

圆角边框

盒子变成圆角
border-radius：length； 后面加数值（px）或者百分比

如果是正方形，想要设置为一个圆，把数值设置为宽带或者高度的一半即可，或者直接写50%
如果是个矩形，设置高度为一半就可以做圆角矩形
该属性是个简写属性，分别代表左上角 右上角 右下角 左下角
也可分开写 border-top-left-radius、 border-top-right-radius 、border-bottom-right-radius 、border-bottom-left-radius

盒子阴影

不占空间 不会影响其他盒子排列

box-shadow：h-shadow v-shadow  blur   spread   color   inset ；

h-shadow 必需 水平阴影的位置 x
v-shadow 必需 垂直阴影的位置 y
blur 可选 模糊距离 影子是模糊的还是实的
spread 可选 阴影尺寸 影子大小
color 可选 阴影颜色 rgba（0，0，0，0.3）
inset 可选 外部阴影outset（不能写 会无效） 改为inset

文字阴影

用于文本

text-shadow：h-shadow v-shadow  blur color；

h-shadow 必需 水平阴影的位置 允许负值
v-shadow 必需 垂直阴影的位置 允许负值
blur 可选 模糊的距离
color 可选 阴影的颜色

CSS浮动

传统网页布局三种方式 普通流 、浮动、 定位

** 普通流（标准流/文档流）**
按照标签规定默认方式排列，最基本的排列方式

1.块级元素会独占一行，从上往下顺序排列
常用元素：div hr p h1-h6 ul li ol dl form table
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行。
常用元素：span a i em

浮动 float
可以改变元素标签默认的排列方式 可以让多个块级元素一行内排列显示
网页排列第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

 选择器 {  float ： 属性值；}

属性值：
none 元素不浮动（默认）
left 元素左浮动
right 元素右浮动
浮动重难点
1.浮动元素会脱离标准流（不保留原先的位置）
2.浮动元素会一行内显示并且元素顶部对齐（中间不会有缝隙）
3.浮动的元素会具有行内块元素的特性

浮动元素经常和标准流父级搭配使用
小米布局案例
常见网页布局形式
样式布局案例
浮动布局中的注意点：
1.浮动和标准流的父盒子搭配
2.一个元素浮动了 理论上其余的兄弟元素也要浮动（浮动的盒子会对后面的盒子有影响 对前面的盒子没有影响）
思考：
1.有些父盒子 不给高度让子盒子自己撑开
2.父盒子没添加高度 浮动会导致无高度 影响下面的标准流 排版
解决办法:可以清除浮动

清除浮动

选择器 { clear：属性值 ；}

left 不允许左侧有浮动元素
right 不允许右侧有浮动元素
both 同时清除左右两侧浮动（最多只用）

清除浮动方法：

• 额外标签法 也称隔墙法 W3C推荐

在浮动元素末尾添加一个空的标签。<div style="clear:both;"></div>或者其他标签<br/>
**注意：**最后一个标签必须是块级元素

• 父级添加overflow属性

父级overflow：hidden； 将其父级属性值设置为hidden auto scroll 切除漏出的部分

• 父级添加 :after伪元素（高级隔墙法）

 .clearfix:after {
         content: "";   //必须有     
         display: block;   //必须转换     
         height: 0;        
         clear: both;        
         visibility: hidden;      
         }      
.clearfix {
	//ie6,7专有
        *zoom: 1;      
        }

• 父级添加双伪元素

.clearfix:before,.clearfix:after {
		       		   content: "";        
		     		   display: table;//模式转换成表格
		                 }
.clearfix:after{
		  clear:both;
		}
 .clearfix {
            *zoom: 1;     
            }
 

 	

PS切图

• jpg/jpeg 色彩效果好 产品类经常用

• png 透明背景图片 png

• gif 小动画

• psd photoshop专用格式 直接从上面复制文字，获得图片还可以测量大小和距离

• 图层切图：1.选中图层 -> 右键导出为png 2.将两张或多张图层 ctrl+e 合并图层 ，然后右键导出为png

• 切片切图：1.直接用切片工具选中切图 ->选择存储为web所用格式-> 存储为jpg或者别的格式

• PS插件切图：cutterman是photoshop插件 （要去PS必须是完整版不能是绿色版）
  cutterman官网下载地址：https://www.cutterman.cn/zh
  选择你要输出的图片格式，输入路径设置 ，选择图层直接导出。
  如果图层多可以直接勾选合并图层导出。

CSS属性书写顺序

先定位，再大小,定文字，后特效。
学成在线案例

CSS定位

定位 = 定位模式 + 边偏移

1.定位模式：position属性

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.边偏移

top	顶端偏移量 px
bottom	底边偏移量
left	左边偏移量
right	右边偏移量

static 静态定位（了解）

无定位方式 默认定位position：static;
按照标准流摆放位置，没有边偏移。 布局很少使用。

相对定位 relative （重要）
position：relative; top：200px; left:200px;
自恋型定位 按照自身原来位置为准，原来的位置保留不脱标，给绝对定位当爹。

绝对定位 absolute （重要）

相对于祖先元素来说（拼爹型）没有父元素 参照body 浏览器为准
position：absolute; top：200px; left:200px;
绝对定位脱离标准流，不保留原来位置，参照最近带有定位的元素。
子绝父相
父亲一定要保留位置，所以用相对定位。
孩子不需要保留位置，用绝对定位。
hotnew

固定定位 fixed（重要）
position: fixed; top: 20px; right: 200px;
固定于浏览器可视窗口内不变， 浏览器滚动时滚动元素位置不会改变。
脱离标准流不随滚动条滚动，跟父元素没有任何关系。

小技巧：如何固定在版心右侧位置。
left：50%走浏览器宽度的一半；：margin-right：往右走版心宽度的一半

粘性定位sticky（了解）
可视窗口为参照点移动元素。
粘性定位占有原先的位置。必须要添加top left right bottom其中的一个才有效。
与页面滚动搭配使用，兼容性差，ie不支持。

定位总结

定位：叠放次序

z-index：1
可以为正整数 也可以实负整数 ，默认auto 数值越大越靠上。
如果是属性值相同，后来者居上。数字后面不加单位。只有定位的盒子才有z-index属性。

如何给绝对定位的盒子实现水平居中（同理推出垂直居中）：
margin：0 auto；不可以居中，需要用小算法：
left：50% ；浏览器宽度的一半。 margin-left：—盒子宽度的一半。

定位的特殊用法
1.行内元素添加固定或者绝对定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定，如果不给宽度或者高度，默认大小是内容的大小。

浮动元素、绝对定位（固定定位） 元素都不会触发外边距合并的问题。
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。
但是绝对定位或者固定定位会压住标准流所有的内容包含文字。
浮动最初是为了做文字环绕效果的，文字会围绕浮动元素。

元素的显示与隐藏

display
搭配js可以做网页特效
display：none； 隐藏对象（重点） 不保留原来位置
display：block；显示元素

visibility 可见性
inherit 继承
visible 可见
hidden 隐藏 保留原来位置
collapse 表格合并

overflow 溢出
溢出部分直接截除，不显示
visible 显示 默认 不剪切内容不添加滚动条，clip属性将失效
auto 此为body和textarea的默认值。剪切内容时在需要时添加滚动条
hidden：不显示超过对象尺寸的内容
scroll：溢出部分总是显示滚动条

如果有定位的盒子请慎用overflow：hidden；它会隐藏多余部分

CSS高级技巧

精灵图
减少服务器压力 有效减少服务器接收和发送次数，，提高网页加载速度。CSS精灵技术（CSS Sprites 、CSS雪碧），将网页中小图片整到一张大图片上这张图就是精灵图或者雪碧图。
移动背景图片位置，使用background-position 默认左上角
移动的距离就是这个目标图片的X与Y轴 注意网页中的坐标有所不同。

缺点：图片文件较大，图片放大缩小会失真。一旦图片制作完毕想更换十分复杂。

字体图标 iconfont

轻量级：比图像小很多，一旦字体加载了，图标会马上渲染出来，减少服务器压力。
灵活性：本质属于字体：可以换颜色，字体，变换大小与位置，透明效果、旋转。
兼容性：几乎支持所有浏览器。

无法替代 只是提升和优化。结构样式简单用字体图标。

字体图标下载：

iconmoon字体库：http://iconmoon.io
阿里iconfont字体库：http://www.iconfont.cn/



下载完毕后 我们保存好压缩包 解压 使用，引入。

把fonts文件夹放到HTML的旁边

用css引入 字体文件

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ylz1cb');
  src:  url('fonts/icomoon.eot?ylz1cb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ylz1cb') format('truetype'),
    url('fonts/icomoon.woff?ylz1cb') format('woff'),
    url('fonts/icomoon.svg?ylz1cb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

字体图标的追加
在压缩包中找到selection.json文件重新上传。

CSS三角

	  width: 0;
      height: 0;
      border-top: 10px solid pink;
      border-bottom: 10px solid blue;
      border-left: 10px solid skyblue;
      border-right: 10px solid greenyellow;

	  border: 10px solid transparent;
      border-bottom-color: greenyellow;

CSS用户界面样式

鼠标样式

cursor：pointer； 小手
default：默认小白
move：移动
text：文本
not-allowed：禁止

轮廓线outline

取消input和textarea的轮廓蓝色线

outline：none;
outline：0;

防止文本域拖拽resize
textarea：最好在一行上来写 要不然会有空格

resize：none;

vertical-align属性应用
图片和文字垂直居中 textarea行内块都可以用

解决图片底部空白缝隙：
1.给图片添加vertical-align：middle top bottom 等 （提倡使用）
2.把图片转为display：block； 不过会破坏布局。

溢出的文字省略号显示：
单行文本溢出怎么用省略号：

1.强制一行内显示文本：white-space：nowrap；（默认normal自动换行）
2.超出的部分隐藏：overflow：hidden；
3.文字用省略号替代超出的部分：text-overflow：ellipsis；

 white-space：nowrap;
 overflow：hidden;
 text-overflow：ellipsis; 

多行文本怎么用省略号：
有较大的兼容性问题，适合于webkit 浏览器或移动端 。

 overflow：hidden;
 text-overflow：ellipsis;
 display：-webkit-box;
 -webkit-line-clamp：2;
 -webkit-box-orient：vertical;

弹性伸缩盒子模型显示：display：-webkit-box；
限制在一个快元素显示的文本的行数：-webkit-line-clamp：2；
设置或检索伸缩盒对象的子元素的排列方式：-webkit-box-orient：vertical；

margin负值的运用：

margin-left：-1px；把边框盒子解决掉
鼠标经过某个盒子 需要提高当前层级使用relative ，如果有其他定位需要使用z-index来提高层级。

文字围绕浮动元素
左侧加浮动 文字围绕图片

行内块元素巧妙运用
见案例
css 三角强化
见案例

CSS初始化

每个网页都必须进行css初始化。也称为css reset

新增 HTML5 和CSS特性

如何创建BFC

body 根元素

1. 浮动元素：float 的值不是none*
   2.position 的值不是static 或者时relative — position (absolute、fixed)
   3.display 的值时inline-block、 flex 或者是inline-flex*
   4.overflow 除了 visible 以外的值 (hidden、auto、scroll) (好用) 溢出盒子边框内容隐藏padding 还存在。
   作用：1.取消盒子margin塌陷 2.阻止元素被浮动元素覆盖