前端学习笔记（四）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新增的语义化标签

<header> : 头部标签

<nav> : 导航标签

<article> : 内容标签

<section> :定义文档某个区域

<aside> : 侧边栏标签

<footer> ：尾部标签

注意：

---这种语义化标签主要是针对搜索引擎的

---这些标签新页面中可以使用多次

---在IE9中，需要把这些元素转化为块级元素

---其实，我们移动端更喜欢使用这些标签

---more

 

 

2.HTML5新增的多媒体标签

<video src="文件地址" controls="controls">

支持三种格式：mp4,ogg,webm(尽量使用MP4格式)

属性：

autoplay="autoplay" 自动播放 （muted=“muted”静音播放）

controls =“controls” 向用户显示播放控件

loop=“loop” 无限循环播放

preload =“” auto 预先加载视频

none 不应加载视频

poster imgurl 预加载图片

 

<audio>音频标签(mp3,wav,ogg)

<audio src="文件地址" controls>

autoplay

controls

loop

muted

preload

 

多媒体标签总结

音频和视频文件使用方式几乎一致

浏览器支持情况不同

谷歌浏览器吧音频和视频自动播放禁止掉了

可以给视频添加muted来静音视频，音频不行（可通过Javascript来解决）

 

 

 

3.HTML5新增的input

属性值 type	说明
email	输入必为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