前端学习笔记（四）2020.02.29
溢出文本显示省略号--必须满足三个条件
1.单行文本
/*先强制一行内显示文本(默认normal自动换行）*/
wihte-space：nowrap；
/*2.超出部分隐藏*/
overflow：hidden；
/*3.文字用省略号替代超出部分*/
text-overflow：ellipsis；
2.多行文本
多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大多是webkit内核）
/*弹性伸缩盒子模型显示*/
display：-webkit-box；
/*限制在一个块元素显示文本的行数*/
-webkit-line-clamp：2；
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient：vertical；
常见布局技巧
1.巧妙利用margin负值运用
1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则添加相对定位（保留位置），如果有定位，则加z-index）
2.文字围绕浮动元素
在自定义块中，添加图片与文字时，利用float文字环绕图片而节省文字部分盒子的开支
3.行内块巧妙运用
制作页脚样式
4.CSS三角强化
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
构建直角三角形
CSS初始化
不同浏览器对有些标签的默认值不同，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化
简单理解：CSS初始化是指重设浏览器样式。（也称为CSS reset）
每个网页都必须首先进行CSS初始化。
这里我们以 京东CSS初始化代码为例。
Unicode编码字体：
把中文字体名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题
比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
HTML5 和 CSS3
1.HTML5的新特性
HTML5的新特性主要是针对以前的不足，增加了一些新的标签、新的表单 和 新的表单特性
这些新特性都有兼容性的问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性的问题，可以大量使用这些新特性。
1.1HTML5新增的语义化标签
注意：
---这种语义化标签主要是针对搜索引擎的
---这些标签新页面中可以使用多次
---在IE9中，需要把这些元素转化为块级元素
---其实，我们移动端更喜欢使用这些标签
---more
2.HTML5新增的多媒体标签
支持三种格式：mp4,ogg,webm(尽量使用MP4格式)
属性：
autoplay="autoplay" 自动播放 （muted=“muted”静音播放）
controls =“controls” 向用户显示播放控件
loop=“loop” 无限循环播放
preload =“” auto 预先加载视频
none 不应加载视频
poster imgurl 预加载图片
autoplay
controls
loop
muted
preload
多媒体标签总结
音频和视频文件使用方式几乎一致
浏览器支持情况不同
谷歌浏览器吧音频和视频自动播放禁止掉了
可以给视频添加muted来静音视频，音频不行（可通过Javascript来解决）
3.HTML5新增的input
| 属性值 type |
说明 |
| |
输入必为Email类型 |
| url |
输入必为URL类型 |
| date |
输入必为日期类型 |
| time |
输入必为时间类型 |
| month |
输入必为月类型 |
| week |
输入必为周类型 |
| number |
输入数字必须为数字类型 |
| tel |
手机号码 |
| search |
搜索框 |
| color |
生成一个颜色选择表单 |
属性：
required=“required” 不能为空
placeholder=“内容” 搜索框预选灰色内容
autofocus autofocus 自动获取焦点
autocomplete on/off 默认记录之前输入的文字
multiple multiple 可以多选文件提交
CSS3新特性
1.css3的现状
新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于PC端
不断改进ing
应用相对广泛
主要学习：新增选择器 和 盒子模型 以及其他特性
2.CSS3新增选择器
选择器
1.属性选择器
2.结构伪类选择器
3.伪元素选择器
属性选择器：
可以不用借助于类或者id选择器
属性选择器可以选择属性
/*必须是input，但是同时具有value值的输入框*/
input[value]{
color:pink;
}
属性选择器还可以选择属性=值的某些属性
input[value=text]{
color:pink;
}
属性选择器还可以选择属性值开头的某些属性
input[class^=icon]{
color:pink;
}
属性选择器还可以选择属性值结尾的某些属性
input[class$=icon]{
color:pink;
}
·属性选择器还可以选择含有属性值的某些属性
input[class*=icon]{
color:pink;
}
PS：类选择器、属性选择器、伪类选择器权重都是 0，0，1，0
结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于高内聚父级选择器里面的子元素
ul li:first-child 选择ul里第一个li孩子
ul li:last-child 选择ul里最后一个li孩子
nth-child(n) 选择某个父元素的一个或者多个特定的元素
---n可以是数字、关键字、公式
---n如果是数字，就是选择第n个关键字
---n可以是关键字，odd奇数，even偶数
---nth-child(n) 从0开始每次加一，往后计算，必须是n
ps：nth-child给每个孩子都排序号
nth-of-type给指定类型的孩子标签排序号
CSS3新增选择器
伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签，简化HTML结构
::before 在元素内部前面插入内容
::after 在元素后面插入元素
ps：
---before和after创建一个元素，但是属于行内元素
---新创建的这个元素在文档中是找不到的，所以称为伪元素
---语法： element::before{}
---before和after必须有content属性
---before在父元素内容的前面创建元素，after在父元素内容后面插入元素
---伪元素选择器和标签选择器一样，权重为0，0，0，1