CSS基础知识总结

前言：学习Vue要求要有中级的html,css和js的基础，来补一下css的基础
一、CSS简介
1.1页面美容师

• 功能：美化网页，布局页面
• CSS：层叠样式表，标签语言
• 最大价值：让HTML专心去做结构，结构（HTML）与样式（CSS）分离
  1.2CSS语法规范
• 组成：选择器+一条或者多条声明
• 选择器是指定HTML标签
  1.3CSS代码风格
• 选择器与大括号之间要有一个空格
• 属性值与前面的冒号之间要有空格
  1.4选择器分类
• 基础选择器和复合选择器
• 基础选择器包括：标签选择器；类选择器；id选择器;通配符选择器
• 标签选择器：用HTML标签名作为选择前，但不能差异化设计
• 类选择器：单独选一个或者几个标签，使用类选择器；类名是自己命名的，尽量使用英文命名，但不能和标签名重名；长名称或词组可以使用中横线来；命名要尽量做到见名知意；样式点（.）定义，结构类（class）调用，一个或多个，开发最常用;多个类名之间使用空格隔开
• id选择器：样式#定义，结构id调用，只能调用一次，一般和js搭配使用
• 通配符选择器：*选择所有的标签，特殊情况下使用
  二、字体属性
  2.1字体系列(font-family)
• 多个字体间要使用逗号隔开
• 有多个单词组成的字体加单引号
• 微软雅黑：Microsoft Yahei
• 字体大小（font-size):不同浏览器默认显示的字体大小不一致，尽量明确规定px(像素）；可以给body指定整个页面文字的大小；
• 字体粗细（font-weight):更经常用number,700为加粗，400为正常（变细）,数字后面不加px
• 文字样式（font-style 斜体/不斜体）：很少给文字加斜体（italic),更多的是让倾斜的正过来（normal)
• font复合属性写法：font: style weight size family,前两者都可省，但后面两个不可省略
  三、文本属性
  3.1文本颜色
• 预定义的颜色值 red blue
• 16进制#FF00000(开发中更多用，但不用记，后期提取即可）
• rgb代码：rhgb(250,0,0)
  3.2文本对齐
• text-align:left(默认左对齐）、right、center
  3.3装饰文本
• text-decoration（装饰文本）:none(默认无装饰线线）underline(下划线）line-through(删除线） overline(上划线）
  3.4行间距
• line-height:用于设置行之间的距离，分为上间距、文本高度、下间距三个部分，像素变大改变的是上下间距
  四、CSS的引入方式：
  4.1内部样式表：CSS代码写在HTML页面中，实现结构与样式的部分分离
  4.2行内样式表：在元素标签内的style属性中中设定CSS样式，一般很少用
  4.3外部样式表（开发使用较多）
• 需要实现的样式比较多
• 单独开个.css文件，需要引用的时候在head中写link按table，后面写上css的路径即可
  五、Emmet语法
• 生成标签：直接写标签名然后按tab键
• 生成多个多个标签：加即可，如div3
• 父子级关系：如ul>li
• 兄弟级关系：如div+p
• 如果要生成带有类名或者id名的，直接写.demo和#two，tab键即可，如果是在p里面写类名可以使用p.one这样写
• 如果要生成的div类名是有顺序的，使用自增符号$
• 在生成的标签内写内容可以用{}表示
• 也可以使用简写按Tab键来快速实现CSS样式的书写
  六、复合选择器
  6.1后代选择器（很经常使用）
• 两元素可以是任意选择器，之间使用空格隔开
• 不仅可以是儿子，还可以是孙子，如.nav ol li
  6.2子元素选择器（亲儿子选择器）
• 两元素使用>隔开
• 只选择离他最近的那一个，孙子重孙都不归他们管
  6.3并集选择器
• 语法规范：元素1，元素2{}
• 任何选择器都可作为并集选择器的一部分
  6.4伪类链接选择器
• a🔗选择未被访问过的链接
• a:visited:选择已经被访问过的链接
• a:hover（重点）:选择鼠标位置位于其上的链接
• a:active:选择鼠标点击了但还没有松开的链接
• 为确保生效：按照LVHA的顺序声明
• 开发时候最常用的是给a颜色，然后写一个a:hover就行了
  6.5伪类focus选择器
• ：focus:光标定在哪里，就修改哪里，如input:focus
  七、CSS的元素显示模式
  7.1显示模式
• 释义：标签以什么方式显示
• HTML标签分为块元素和行内元素两种
  7.2块元素
• 比较霸，自己占一行
• 高度、宽度、外边距、内边距可以设置
• 宽度默认和父级容器一样
• 里面可以放行内或者块元素
• 注意:p和h这种属于文字类块元素，里面不能再放其他块元素（比如p里面不能再放div）
  7.3行内元素
• 一行中可以显示多个
• 高、宽直接设置无效
• 默认宽度是本身的宽度
• 里面只能放文本或者其它行内元素
• 注：链接内不能再放链接；a里面可以块级元素
  7.4行内块元素
• img,input,td，既具有块元素特点，也具有行内元素特点
• 一行可以显示多个，宽度默认为本身宽度，可以直接设置宽和高
  7.5模式转换
• 转换为块元素：display:block
• 转换为行内元素：display:inline
• 转转换为行内块元素：display:block-inline
  7.6单行文字垂直居中
• 文字行高等于盒子高度（让上空隙和下空隙把文字挤到中间）
  八、CSS背景
  8.1背景颜色
• background-color
  8.2背景图片
• background-image:url()
• 常用于一些Logo/ 装饰性的小图片/很大的背景图
• 优点：便于控制位置
• 背景平铺（background-repeat):repeat(横向纵向平铺）no-repeat(不平铺） repeat-x(x轴方向平铺） repeat-y(y轴方向平铺）
  8.3背景位置
• background-position: x y,可以使用方位名词或者精确单位
• 方位名词：top center left right bottom
• 如果两个值都是方位名词，则两个值写的顺序无关
• 如果只写了一个方位名词，另一个省略，后者默认居中
• 也可以使用参数：使用参数的话严格按照前x后y来写
• 如果只写了一个，y就默认是居中
• 如果用混合单位：前者是x,后者是y
  8.4背景固定
• background-attachment:scroll或者fixed,前者图片会随滚轮滚动而滚动
• 背景符合写法：background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置（无硬性要求，这只是推荐写法）
  8.5背景颜色半透明
• background:rgba(0,0,0,x)最后一个参数是透明度参数，取值范围在0-1之间，0.3可以省略掉0写.3
  九、CSS三大特性
  9.1介绍
• 层叠性、继承性、优先级
  9.2层叠性
• 层叠性：相同选择器设置相同样式，后面的样式会覆盖冲突的样式
  9.3继承性
  继承性：子标签会继承父标签的某些样式（并不是所有样式），一般为文字样式，如给div上样式，子标签p也会被上样式
• 像素可以不跟单位px,代表的是当前文字大小的倍数，方便不同的子集根据自身的文字大小调整自身的行高
  9.4优先级
• ！important>标签内style>ID选择器>类选择器、伪类选择器>元素选择器
• 继承的权重是0
• a是比较特殊的，浏览器默认了是蓝色且有下划线，权重要高于0
• 复习选择器存在权重叠加问题（ul li=0,0,0,2>li=0,0,0,1)
  十、盒子模型
  10.1网页布局本质
• 网页是由许许多多盒子来组成的，利用CSS来摆盒子、往盒子里面装内容
• 盒子模型的组成：边框、外边距（盒子与盒子之间的间距）、内边距、内容
  10.2边框（border)
• border-weight:边框粗细（单位为px)
• border-style:边框样式（solid-实线，dashed虚线，dotted加点）
• border-color:边框颜色
• 合并相邻边框（border-collapse:collapse)
• 边框会影响盒子实际的大小
  10.3内容、内边距
• 内边距（padding):padding-top:10px等调节上下左右的边距
• padding的复合写法：一个值：上下左右都是这个；两个值：前为上下，后为左右；三个值：前为上，中为左右，后为下；四个值就正常
• 内边距会撑大盒子，需要相应调整盒子大小
• 导航栏中的文字不一样多，可以不设置盒子的宽度，设置相同的内边距，这样看起来效果就比较一样了
• 如果盒子本身没有制定weight/height，则padding不会撑开盒子
  10.4外边距（margin)
• 用法以及复合写法与padding都一样
• 外边距可以让块级盒子居中对齐：要设置宽度+左右外边距设置为auto(margin:0 auto)
• 行内元素或行内块元素要居中对齐的话找其父元素设置text-align:center
• 嵌套外边距的坍塌：对于两个有父子关系的的块元素，父亲有外边距，儿子也有外边距，父亲会塌陷较的的外边距，儿子不动。可以给父标签添加overflow:hidden来解决
• CSS要写的第一行*{padding:0;margin:0;}清楚所有的内外边距。行内元素只设置左右内外边距，块级元素和行内块元素任意设置
• 只要将图片的宽度修改为100%，图片就能和盒子一样宽
• 去掉无序列表前的原点：list-style:none
  10.5圆角边框
• border-radius:length(数值/百分比）
• 对于正方形变圆形，设置为宽的一般或者50%即可
• 对于圆角矩形，设置为高的一半即可
  10.6盒子阴影（box-shadow)
  -水平阴影位置 竖直阴影位置 阴影的虚实程度 阴影的大小 阴影的颜色 阴影的内外边距
  10.7文字阴影（test-shadow)
• 和盒子阴影用法一样，不过只有前四个
  十一、浮动
  11.1传统网页三种布局方式
• 标准流（标签按照默认的方式来进行排放）、浮动、定位
  11.2为什么学习浮动
• 多个块级元素纵向排列找标准流，横向排列找浮动
• 语法规范：float:none(不浮动） left(左浮动） right(右浮动）
  11.3浮动特性
• 脱标：脱离标准流控制移动到指定位置；浮动的盒子不再保留原来的位置，标准流会补上浮动空出来的位置，浮动盒子浮在标准流盒子的上面
• 浮动的盒子一行内显示且上对齐.显示不开的盒子自动换行显示
• 任何元素都可以浮动，添加浮动后会具有行内块元素的特点（块级盒子没有宽度，默认和父级一样，浮动后根据内容大小决定）（浮动盒子中间是没有空隙的，行内元素加浮动后也是如此）
• 为约束浮动盒子的位置，先用标准流的父元素排上下元素，内部子元素采取浮动的方式排列左右元素
• 注意：浮动的盒子只会影响到后面的标准流，不会影响到前面的标准流
  11.4清除浮动
• 额外标签法（不常用）：在最后一个浮动子元素的后面添加一个额外的块级标签
• 父级元素overflow:hidden（在父级元素中添加overflow:hidden)
• after伪元素法（父级）：用的较多，后期具体讲解；升级版的额外标签法，相当于用CSS在后面添加了一个盒子
• 双伪元素清除浮动：后门前门都给关上
  11.5学成在线实践
• html与css量比较大的话可以选择分开写，但要记得在html中用link连接起来
• CSS属性的较规范书写顺序：布局定位属性（display、position、float…);自身属性（width\height…)；文本属性（color、font、text-decoration…);其他属性(content\box-shadow…)
• 页面布局整体思路：确定版心；分析行模块以及行模块内的列模块；一行中的列通常采用浮动来做，先确定列的大小，再确定列的位置；遵循现有结构，再有样式
• 在实际开发中，导航栏不会直接就使用a,而是采用li包含a的做法
• 浮动的盒子是不会有外边距问题的
• 行高会继承给孩子
  十二、定位
  12.1为什么要使用定位
• 让盒子自由的在某个盒子内移动位置或是固定他的位置
  12.2定位模式
• 静态定位（static):可以简单理解为标准流，不常用
• 相对定位（relative):总是相对于自己原来的位置来移动的；原来的位置并不是空出来，会继续的占有
• 绝对定位（absolute):如果没有祖先元素或者祖先元素没有 定位，则以浏览器为准；如果祖先元素有定位，则以最近一级的有定位的的祖先元素为参考点；绝对定位不占有位置
• 子绝父相：子集要浮在父级盒子里并且位置多变，所以使用绝对定位。父级盒子要用来定位，要占有位置，所以选择相对定位
• 固定定位(fixed)：以浏览器的可视窗口为参照点移动元素；不随滚动条滚动；固定定位不保留原先的位置
• 固定到版心右侧的小算法：先让left走50%，再用margin-left走版心宽度一半的距离
• 粘性定位（了解）：以浏览器的可视窗口为参照点；占有原来的位置；上下左右必须添加其一才能起作用
  12.3定位叠放次序
• z-index:xx;
• 数字后面不能加单位；数字大的在上面；相同属性后面的在上；有定位的盒子才有index属性
• 绝对定位的盒子居中：加了绝对定位的盒子不能用margin直接实现剧终了；使用left:50%，然后margin-left:进行居中调节
  12.4定位的特殊性
• 行内元素加了绝对或者固定定位的话，可以直接设置高度和宽度
• 块级元素加了绝对或者固定定位的话，默认的大小是内容的大小
• 浮动元素会压住下面标准流的盒子，但不会压住下面标注流盒子的元素（浮动的初心就是做文字环绕）
• 绝对定位会压住下面标准流的所有内容
• 如果给一个盒子既加了左，又加了右，则会默认执行左属性
  12.5元素的显示与隐藏
• display用于设置一个元素应该如何显示
• display:none隐藏元素；display:block，除了转换为块级元素外，还有显示元素的功能。元素隐藏后，不再占有位置
• visibility:hidden(隐藏）\visible（显示），隐藏后保留位置
• overflow溢出：visible(默认显示溢出部分）hidden(超出部分隐藏掉）scroll(有无超出都显示滚动条）auto(有超出显示滚动条，没有就不显示）
  第二部分、CSS进阶技巧
  一、
  1.1精灵图与字体图标
  *简单的小图标用字体图标，样式较复杂的小图标用精灵图
  *字体图标的下载推荐：icomoon字库 阿里iconfont字库
  *字体图标的使用：先将下载包中的font放在根目录中；再将那一块声明写再style中；再打开demo中复制一下
  *CSS三角做法：盒子高和宽都是０，边框颜色都为透明，设置一个边有颜色即可
  1.2CSS用户样式界面
  *鼠标样式cursor :default(默认白标） pointer（小手）move(移动十字格式） text（I） not-allowed(禁止）
  *取消表单轮廓：outline:0/none
  *防止文本框拖拽：resize:none
  *vertical-align:middle：只针对行内块元素与行内元素有效，图片与表单都是行内块元素，实现图片与文字的居中对齐
  *解决图片底部空白缝隙的问题：给图片添加vertical-align去除基线对齐效果；将图片转换为块级元素
  *溢出的文字省略号显示：强制一行显示（white-space:nowrap) 溢出的部分隐藏起来（overflow:hidden) 文字溢出的部分省略号显示（text-overflow:ellipsis)
  1.3常见布局技巧
  *margin负值解决边框叠加问题，鼠标经过某个盒子通过相对定位或者z-index提升层级即可
  *盒子加上浮动，文字自动环绕
  *只要给盒子父元素添加center，盒子中的行内块元素和行内元素都能执行
  *三角形强化（直角三角形）：一个px大一个px小其余为0，保留一个颜色其余为透明
  1.4H5C3新属性
  *vidio插入视频：autoplay width height loop muted
  *input新增表单：number tel search
  *placeholder:表单的提示信息 multiple:上传多个文件
  *属性选择器[]+结构伪类选择器（：数字、关键字、公式)+伪元素选择器（CSS生成行内元素）
  *在最开始的初始化声明中写上box-sizing，避免盒子再被撑大
  *对图片进行模糊处理（filter:blur())
  *calc(100%-30px)让子盒子始终比父盒子短30px
  *transition:变化属性 变化实践 变化曲线 变化延迟
  *favicon图标的制作：png格式+比特虫转换ico+放在html根目录
  *网站TDK三大标签SEO优化：title,description,keyword
  1.5Logo的SEO优化
  *Logo盒子里放一个h1标签+h1标签中放一个a，a修饰成Logo大小，里面放上名字+将Logo的链接放在背景中
  *当内部的小盒子因为与外部大盒子边框重叠而导致换行的时候，可以将ul大盒子调整大一些，多出来的边框使用overfloat隐藏掉
  1.6 服务器
  *分类：远程服务器 本地服务器
  *免费的远程服务器网站：http://free.3v.do/
  X.在网页制作过程中经常遇到的小问题
  *点击图片实现跳转：在a里面放img（a中包含有宽度的盒子，需要转换为块级元素）
  *放在图片上有文字显示是在a标签中加的title
  *盒子内的内容比盒子大的话，对盒子的css写overflow:hidden，将内容控制在自己设置的盒子大小范围内
  *一个没有高度的盒子，里面的元素也都是浮动的，可以对父盒子加清除浮动代码，这段代码直接从网上粘就可以
  *加边框后出现抖动问题：给图片设置一个透明边框，点上去后变颜色即可
  *注册页面不需要再使用SEO优化
  *比较正规方便的右浮动：让文字所在的盒子去右浮动
  *将盒子放在页面中间的两种方式：在本盒子用margin:auto,在父盒子用text-align:center
  *border-radius：50%，做出来头像的那种圆框感觉
  *伪元素是行内元素，设置大小需要样式转换，before是在原盒子上面显示出来的
  *cursor:pointer:将箭头变为小手
  *n+2是从第二个开始选，-n+2是选前两个
  *shift+alt是可以同时更改多个盒子的内容
  *如果一个盒子用类选择器添加了定位，那其他的类选择器就不用再声明一遍定位了，可以直接进行位置的填写
  *z-index:1,将被压在下面的盒子提到上面
  三、CSS 2D转换
  *transform:tanslate(x,y)(移动）；最大优点：无论怎么改变，不会影响其他盒子的位置；跟百分比是自己长宽的百分比，可以借此替代之前50%定位之后再用margin往一边返一半长宽的垂直居中布局
  *rotate(旋转）:单位deg,可以配合过渡食用（谁变过渡在谁身上，tansition:all,0.xs);可以解决CSS三角问题：一个盒子只给两个边框，然后一旋转即可；div:hover::after-经过盒子的时候伪元素发生变化；transform-align:left bottom，改变旋转中心点
  *scale(缩放）：scale(倍数,倍数)；优势：不会影响其他盒子，而且可以更改缩放中心点；会让阴影也随着放大
  *transform也可以使用复合写法，但是位移要放在最前面，旋转后坐标轴也会发生变化.。但并不绝对，旋转木马案例就是先旋转再移动
  *浏览器私有前缀（兼容老版本）；-webkit-:safari,chrome;-o-:opera;-ms-:IE;
  -moz-:firefox;
  四、CSS3 动画
  *@keyframes 动画名称{}
  *animation:动画名称 进行时间 速度曲线（linear匀速） infinite(循环播放）
  *animation-play-state:paused鼠标放上去停止动画
  五、3D转换
  *3D位移：translate3d(x,y,z);z单位一般用px，不用百分比
  *透视：perspective:px;数值越小，要观察的那个盒子越大。透视加在被观察元素的父盒子上。z轴的数值越大，要观察的盒子越大
  *3D旋转：rotate(),使用左手准则来判断正负
  *保留子盒子立体：转动父盒子的时候，子盒子原本的立体效果消失。添加transform-style:preserve-3d（给父级添加的）
  -------------------------------------web端完结撒花------------------------------------
  -------------------------------------移动端学习开始------------------------------------
  一、移动端基础
  *background-size:cover(覆盖盒子，但可能有部分图片显示不全）；contain(长或者宽沾边就停了，会存在一些空白）
  *移动端css初始化代码https://necolas.github.io/normalize.css/
  *-webkit-tap-highlight-color:transpararent;(隐藏高亮）；-webkit-appearence:none(加上这个之后才可以修改按钮和输入框样式）；-webkit-touch-callout:none(按久之后也不会出现菜单页）
  *二倍精灵图：将精灵图等比例缩放后再量位置
  1.2 流式布局
  *用百分比代替像素去做,只管宽度，不管高度
  *无论是PC端还是移动端，图片垂直居中要vertical-align:middle，不然图片和文字是基线（最底边对齐）
  1.3 flex布局
  *给父级添加flex来控制子元素的位置和排列方式
  *flex-direction:row column
  *justify-content（调整主轴）:flex-start(默认）；flex-end(尾部排列）；center(居中);
  space-around(平分空间）；space-between(两边贴边，其余平分）
  *flex-wrap:nowrap(默认不换行）
  *align-items(调整单行侧轴）：比主轴多一个stretch(不设置高度，拉伸和父级盒子等长）
  *align-content(调整多行侧轴）:在调整主轴的五个上加了stretch
  *flex-flow:设置主轴与是否换行的复合写法
  *flex：来表示占几份
  *align-self:控制单个元素在侧轴上的排列；order:默认为0，设置负数将盒子提前
  *固定定位一定要加宽度，是相对整个页面宽度来说的
  *flex布局导航栏上下结构：将主轴调整为y,再在y上居中
  *背景线性渐变（必须加浏览器私有前缀）：-webkit-linear-gradient(left,re,blue)
  1.4 rem适配布局
  *em相对于父级文字大小；rem相对于html文字大小
  *媒体查询：@media all/print/screen and/or/only (媒体特性)，一般从小到大写；在link中可以通过media来设置不同屏幕大小实现不同css
  *less语言：css拓展语言，多了一些程序语言特性。如果是伪类、伪元素选择器，加&
  *import样式间的导入
  *制作圆角：高度的一半
  *添加！important提升到最高权重
  *flexible.js就不用我们自己划分了，宽度动一点点，高度就能自动动。代码链接https://github.com/amfe/lib-flexible
  移动端开发流程概览
  *制作轮播图借用swiper插件，将js和css引入后，将人家的代码也复制进去
  *opacity:盒子的透明度
  1.4 响应式布局
  *可以随着不同的终端自行调整
  *Bootstrap列嵌套加.row取消父级盒子的padding
  *offset（列偏移）；push推，pull拉（列排序）
  1.5 bootstrap
  ----------------------------------------css篇完结撒花----------------------------------