css前端知识点总结（前端面试准备笔记之html和css）
css前端知识点总结（前端面试准备笔记之html和css）基础盒子模型选择器颜色属性文字效果用户界面
目录- HTML5新增的一些特性
- CSS3新增的一些属性
- input 标签中的type属性有哪些
- css选择器中，优先级排序，由高向低。
- css 优先级规则
- 伪类和伪元素的区别
01.HTML5新增的一些特性
- 语义化标签
<header> 头部标签
<nav> 导航标签
<footer> 尾部标签
<section> 块级标签
- 多媒体标签
<audio src=" 文件地址" controls=" controls"></audio>
<video>
- input 表单和表单属性
type="email" 邮箱
type="url" 路径
type="data" 日期
type="time" 时间
type="month" 月份
type="week" 周
type="tel" 手机号
type="search" 搜索框
// 表单属性类
required 表示变淡内容不能为空，必填
placeholder 表单的提示信息
autofocus 自动聚焦，页面加载完焦点自动到指定表单
multiple 可以提交多选文件
02.CSS3新增的一些属性
边框属性
- border-color：设置边框多种颜色
- border-image: 图片边框
- border-radius: 圆角边框
- box-shadow: 阴影效果
背景属性
- background-size: 指定背景图片尺寸
- background-origin: 指定背景图片从哪里开始显示
- background-clip: 指定背景图片从什么位置开始裁剪
颜色属性
- HSL colors
- HSLA colors
- opacity
- RGBA colors
文字效果
- text-shadow 文本阴影
- word-wrap 自动换行
- text-overflow 规定当文本溢出包含元素时发生的事情。
用户界面
- box-sizing 允许您以特定的方式定义匹配某个区域的特定元素。
- resize 属性规定是否可由用户调整元素的尺寸。
- outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
选择器
- attribute selectors
基础盒子模型
- overflow-x
- overflow-y
动画效果
- transform 变换效果，可以将元素实现旋转、缩放、平移
- animation 动画效果，指定属性的初始状态和结束状态
过度效果
- transition
03.input 标签中的type属性有哪些
- button
- checkbox
- file
- hidden
- image
- password
- radio
- reset
- submit
- text
04.css选择器中，优先级排序，由高向低。
- !important
- 行内样式，在style属性中写样式
- id 选择器
- class 选择器
- 标签选择器
- 伪类/属性
- 通配符选择器
- 浏览器自定义的属性和继承
05.css 优先级规则
- css 选择规则的权值不同时，权值高的优先;
- css 选择规则的权值相同时，后定义的优先;
- css属性后面加 ！important时，无条件绝对优先;
一般划分4个等级:
- 第一级，内联式，如style=“”，权值为1000;
- 第二级，代表ID选择器，如#id="" 权值为0100;
- 第三级，代表class|伪类|属性 选择器 如clas|:hover :link :target|[type] 权值 0010.
- 第四级，代表标签|伪元素 选择器，p|::after ::before ::fist-inline ::selection 权值0001.
权值计算公式：
- 权值=第一等级个数 第二等级个数 第三等级个数 第四等级个数
- 比较时，是从高往低逐级进行比较的。
06.伪类和伪元素的区别
- 伪元素的操作对象时新生成的dom元素，而不是原来的dom结构里就存在的;而伪类恰恰相反，伪类的操作对象时原来的dom结构里就存在的元素。
- 伪类和伪元素的根本区别在于：操作的对象元素是否存在于原来的dom结构里。
伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类为其添加样式。例如a元素的，:hover :active
伪元素主要是用来创建一些不存在原dom结构树中的元素。例如::before ::after在一些元素前后添加文字样式等。这些内容不会改变文档的内容，不会出现在DOM中，仅仅是在CSS渲染层加入。
写在最后本文是写的html和css系列的第二篇文章，由于以上内容纯手敲，可能有手误的地方，也可能有错误的地方，希望大家指正和见谅。最后，希望与每一个努力的人同行，一起加油！！！
