前端html+css基础知识汇总（个人学习内容总结，希望对你有帮助 内含部分代码）

*小知识点

0.定位和浮动做布局，移动transform做效果 例如;京东盒子上升效果

快捷键：ctrl+f 快速查找 ctrl+g 快速跳转行号

1.text-aline:center可以让什么元素居中： 行内块元素，行内元素

2.浮动的元素压不住文字，浮动的初衷就是用来做文字环绕效果的

3.margin负值的运用，margin正值往右移动，那么margin负值就是往左移动

4.z-index 可以提高元素的层级

5.属性选择器 [] 用处：在同一个标签里选择自己想要的标签 （依据属性） 权重为10

6.结构伪类选择器 : nth-child () :first-child :last-child :nth-of-type() 权重为10

7.伪元素选择器（重要）::before ::after 权重为10 必须要具有content属性 生成的是行内元素

8.常用字体图标和伪元素选择器来做小图标 搭配定位，使得结构简单

9.相对定位保持盒子本身的特性，绝对定位可以给盒子设置宽高 固定定位也可以直接设置宽高

10.css3新特性：

css3滤镜 filter 属性 属性值：blur（函数）变模糊 数值越大 ，图片越模糊 数值加单位 px

需求 子盒子永远比父盒子小50px

css3函数 calc函数 计算 通常搭配 width 或者heigh

11.使用绝对定位的盒子不能够使用margin：0 auto;实现盒子居中 要用transform：translate（x，y）

12.如何利用：hover 选中伪元素：:hover::after

13.正方形做圆 border-radius：50%，长方形做半圆 把需要的值拉满，其他的设置为0

14.transition 过渡 过渡的是数值，只要是数值的 都能做过渡 颜色也是数值

15.2d转换 transform：translate（） rotate（） scale（）..... 移动 旋转 放大 更改中心点 transform-origin 括号里两个值要用逗号隔开 连写时 函数要用空格隔开 复写时要先写移动函数 免得出现错误

16.animation 动画 通常会增加多个节点，实现更复杂的动画效果 先定义动画，再调用动画

17.letter-spacing：px 用来控制文字间距的

18.在使用css3盒子模型之后，行高要等于内容的高度，才能够实现居中，不要行高等于盒子高度

19.可替换元素：类似行内快元素 与行内块元素的区别是 一个本身自带高度和宽度，而可替换元素是只能在css样式里设置宽高 要使行内快元素垂直居中，除了要添加line-heighjt 之外，还要添vertical-aline

20.以后写标签的时候要起一个不容易被重复的名字，而且写样式的时候写的层级少一些，容易复制粘贴

21.background：linear-gradient（left，red，blue） 为了考虑兼容性，要这样写 background：-webkit-linear-gradient（方向，第一个颜色，第二个颜色）方向默认是top

22.z-index仅能在定位元素上有效

23.固定定位的盒子必须要有宽度，而且固定定位始终跟随浏览器可视区域定位 所以要手动调节盒子的位置

（一）网页布局总结

1.1 标准流

可以让盒子上下或者左右排列，垂直的块级盒子显示就用标准流布局

1.2 浮动 float

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

1.3 定位 position

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由的在某个盒子内移动就用定位布局

（二）继承 inherit

1.与字体样式有关的都可以继承，text- line- font- 这些开头的样式，以及字体颜色color

2.宽高不会被继承，标签必须要设置宽高，如果不设置宽度，默认是父盒子的宽度，如果不设置高度，默认是内容的高度，即由内容撑开

（三）清除浮动 float

3.1 单伪元素清除浮动

.clearfix{
  *zoom:1  /*兼容IE浏览器6、7低版本*/
}
.clearfix::after{
  content:"";
  height: 0;
  line-height: 0;
  display: block;
  clear: both;
  visibility: hidden;/*将元素隐藏起来*/
  /*在页面的clearfix元素后面添加了一个空的块级元素，这个元素清除了浮动*/
}

3.2 双伪元素清除浮动

/* 声明清除浮动的样式 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;  //转换成块级元素，并且在同一行显示
}
.clearfix:after {
clear: both;  （重要代码）
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
*zoom:1;
}

（四）元素的显示与隐藏

4.1 本质：让一个元素在页面中显示或者隐藏起来

4.1.1 display 显示与隐藏 （☆用的更多）

display：none 隐藏

display：block 显示 （除了具有转换成块级元素的功能外，还有显示元素的功能）

特点：隐藏元素且不占位置（人死了，钱也没了）

4.1.2 visibility （可见性）显示与隐藏

visibility：hidden 隐藏

visibility：visible 显示

特点：隐藏元素但是占有位置 （人死了，钱没花了）

4.1.3 overflow 溢出元素显示与隐藏

overflow：visible 默认超出文字显示出来

overflow：hidden 超出文字隐藏

overflow：scroll 不论文字超出还是不超出 都显示滚动条

overflow：auto 在需要的时候添加滚动条

ps：有定位的元素慎用overflow：hidden

（五）精灵图

5.1 为什么需要精灵图？

减少传输的次数，使用精灵图传输一次就可以，从而减少服务器的传输次数，提高页面的加载速度，多个小图片集成一张大的大图片

5.2 精灵图的使用

主要针对小的背景图片使用精灵图片 sprites

代码：background-position：-x，-y；

坐标：往左走是负值，往下走是正值，所以x，y坐标一般都为负值

5.3 补充内容：背景background属性

5.3.1 background： 背景图片 背景颜色 背景位置 背景平铺 背景固定等

background：url() rgb() center no-repet

5.3.2 背景位置 background-position：

方位名词：center top bottom left right 写位置时与顺序无关，如果只写第一个，那么第二个默认center

精准坐标：第一个写x， 第二个写y

5.3.3 背景固定 background-attachment

5.3.3.1属性值：

1.scroll ：背景图像随内容滚动 （默认）

2.fixed ：背景图像固定

5.3.4 背景大小 background-size

1. cover 完全覆盖

2. contain 等比例缩放，当盒子尺寸比例与图片比例不一致时，会出现一侧的空白

（六）form表单

form表单元素 主要可以分为三类学习，分别为 input输入表单元素 select下拉表单元素 textarea文本域表单元素

6.1 input标签 输入表单元素

行内块元素，可以设置宽高

6.1.1 属性

6.1.2 type属性：

属性值有text 文本框 password 密码框 radio 单选按钮 CheckBox 复选框

6.1.3 name属性：

1.radio 和 CheckBox必须要有相同的name值，这样才能够实现单选和多选

2.name属性是后台人员用的，用来告诉后台人员，是什么

6.1.4 value属性：

提前规定表单元素的值，后台人员提前写入的，单选和多选要有不同的value值

6.1.5 checked属性：

默认选中的那个，首次加载就选中的，主要针对单选和多选框

checked=”checked“

6.1.6 maxlength属性：（了解）

规定输入的最大长度

6.1.7 file属性 文件上传：

6.1.8 submit提交按钮：

6.1.9 reset重置按钮：

6.1.10 button按钮

不会提交注册表的内容，通常会搭配js做一些事情，比如发送短信验证码.....

6.1.11 HTML5 新增

1.新增表单类型

新增的表单完美的限制了用户输入的类型

重点记忆：number tel search

2.新增的表单属性

以下属性的属性值均为自身 重点记忆：placeholder 和 multiple

required 属性 属性值：required 表单拥有该属性表示其内容不能为空

placeholder属性 表单的提示信息

autofocus属性 属性值：autofocus 自动聚焦属性 刷新页面，光标会自动定在某个获得autofocus的表单上 多用于search表单

multiple属性 属性值：multiple 可以多选文件提交

6.2 label标签

6.2.1 定义

label标签为input元素定义标注（标签）

label标签不属于表单标签，但是通常会和表单标签搭配使用

6.2.2 使用场景

label标签通常用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点转移到或者选择对应的表单元素上，用来增加用户体验

6.2.3 使用语法

<label for="sex">
    男
</label>
<input type="radio" name="sex" id="sex"/>
​

label标签先将文字包裹进去，然后再添加for属性，for属性的属性值是对应的input标签的id属性值

label标签必须要有for属性，属性值是需要绑定的input标签的id值，这样才能够建立练习

6.3 select 下拉表单元素

6.3.1 语法规范

<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
    <option>选项四</option>
    .....
</select>

由两组标签构成 父标签 <select> 翻译就是选择 子标签 <option> 选项

可以设置默认选项 在某一个option中 selected=stlected

6.4 textarea 文本域元素

6.4.1 使用场景

当需要用户输入大量文字时，可以用textarea标签

6.4.2 代码

<textarea rows="" cols="">
    文本内容
</textarea>

rows 指定textarea显示多少行

cols 显示多少字

通常不会用

（七）字体图标 iconfont

7.1 产生

产生原因：精灵图文件比较大，且图片本身放大或者缩小会失真，一旦图片制作完毕想要更换就十分困难。

字体图标，表现得是图标，但本质是字体可以随意更改大小，颜色等....

7.2 下载

下载网站：

icomoon字库 Icon Font & SVG Icon Sets ❍ IcoMoon 国外网站，打开网速慢

阿里iconfont字库 iconfont-阿里巴巴矢量图标库 重点 免费！！！

7.3 引入

1.把下载包里面的fonts文件夹放入页面的根目录下

2.在css样式中全局声明字体：简单理解把这些字体文件通过css引入到我们的页面中

*/\* 1、字体声明 \*/*    
 @font-face {  
font-family: 'icomoon'; 
src:  url('fonts/icomoon.eot?p4ssmb'); 
src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),    url('fonts/icomoon.woff?p4ssmb') format('woff'),    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); 
font-weight: normal;  
font-style: normal;  
font-display: block; 
}

1. 使用 ：新建 <span>标签 然后去demo.html 里面找自己想要用的字体图标

2. 给<span>指定字体

   <style>
       span {
           font-family:'icomoon';
   }
   </style>

7.4 字体图标的追加

把压缩包里面的selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可

（八）css三角做法

span {
position:absolute;
width:0px;
height:0px;
border:10px solid blue;
/*为了照顾兼容性*/
line-height:0;
font-size:0;
}
​

（九）用户界面样式

9.1 鼠标样式 cursor

属性：cursor

属性值：point 小手 move 移动 text 文本 not-allowed 禁止

9.2 取消表单轮廓线 outline

<input type=text> 文本框被选定时会有默认的轮廓线，并不好看。

取消轮廓线： 给表单添加 outline:0;或者outline:none; 样式之后，就可以去掉默认的蓝色边框

9.3 防止拖拽文本域 resize

1. resize：none；

2. 文本域尽量放在一行中，不要空格 例：

   ​
   ​

（十） vertical-aline 垂直对齐方式

只针对行内元素或者是行内块元素 对块级元素无效

属性值：top middle bottom

可用于解决图片底部留白问题 只需要给图片加一个 vertical-aline：middle就可以

或者把图片display：block 因为对齐方式只对于行内元素和行内块元素有效

项目中 vertical-align 可以解决的问题

1. 文本框和表单按钮无法对齐问题

2. input和img无法对齐问题

3. div中的文本框，文本框无法贴顶问题

4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

5. 使用line-height让img标签垂直居中问题

（十一）省略号

11.1 单行省略号

/* 强制一行内显示，不换行 */

​      *white-space*: nowrap;

​      /* 超出部分隐藏 */

​      *overflow*: hidden;

​      /* 文字用省略号代替超出的部分 */

​      *text-overflow*: ellipsis;

11.2 多行省略号

overflow: hidden;
text-overflow:ellipsis;
/*考虑兼容性问题，只适合于webkit浏览器或者移动端，因为移动端大部分是webkit内核*/
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*设置或检索盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 3;

（十二） HTML5 提高

12.1 HTML5新增语义化标签  移动端强烈推荐

<header> 头部标签  
<nav> 导航栏标签  
<article> 内容标签   
<section>  定义文档某个区域   相当于大号的div
<aside>  侧边栏标签  
<footer>  尾部标签

可以反复多次使用

（十三） css3新增过渡属性transition

1.语法规范：transition：要过渡的属性 花费时间 运动曲线 何时开始；

2.口诀：谁做过渡给谁加 如果想要写多个属性，则用逗号分割