H5C3提高

overflow: hidden; 
text-overflow: ellipsis; 
/* 弹性伸缩盒子模型显示 */ 
display: -webkit-box; 
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2; 
/* 设置或检索伸缩盒对象的子元素的排列方式 */ 
-webkit-box-orient: vertical;

七、常见布局技巧

margin负值运用

1 . 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框 2 . 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加 z-index ）。

文字围绕浮动元素(运用浮动元素不会压住文字的特性)

行内块巧妙运用

页码在页面中间显示 : 1 . 把这些链接盒子转换为行内块，之后给父级指定 text-align:center; 2 . 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中。

CSS 三角强化

原理图：

一个小盒子将width和height设置为0，border设置为一定大小但不同颜色时，有下图：

则要做出CSS蓝色小三角，需要把设置border右边有颜色，其他三条边为透明颜色；设置border左边、下边值为0，上边值比左边值大即可。

width: 0; 
height: 0; 
border-color: transparent red transparent transparent; 
border-style: solid; 
border-width: 22px 8px 0 0;

八、CSS 初始化

1.不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化。

简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）每个网页都必须首先进行 CSS初始化。以京东 CSS 初始化代码为例：

*{margin:0;padding:0}
em,i{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
button{cursor:pointer}
a{color:#666;text-decoration:none}
a:hover{color:#c81623}
button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}
body{-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}
.hide,.none{display:none}
.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}
.clearfix{*zoom:1}

2.Unicode编码字体：把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：黑体 \9ED1\4F53 宋体 \5B8B\4F53 微软雅黑 \5FAE\8F6F\96C5\9ED1

HTML5 和 CSS3 提高：

一、HTML5 的新特性

1.HTML5 新增的语义化标签(均为块级元素)

<header> ：头部标签 <nav> ：导航标签 <article> ：内容标签

<section> ：定义文档某个区域 <aside> ：侧边栏标签 <footer> ：尾部标签

注意：这种语义化标准主要是针对搜索引擎的。这些新标签页面中可以使用多次。在 IE9 中，需要手动把这些元素转换为块级元素。

2. HTML5 新增的多媒体标签

视频<video>

①当前 <video> 元素支持三种视频格式，但尽量使用 mp4格式

②语法

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

/*为保证浏览器兼容性*/
<video controls="controls" width="300"> 
    <source src="move.ogg" type="video/ogg" > 
    <source src="move.mp4" type="video/mp4" > 
    您的浏览器暂不支持 <video> 标签播放视频
</ video >

③视频<video>标签——常见属性

音频<audio>

① 当前 <audio> 元素支持三种音频格式：

②语法

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

/*为保证浏览器兼容性*/
< audio controls="controls" > 
    <source src="happy.mp3" type="audio/mpeg" > 
    <source src="happy.ogg" type="audio/ogg" > 
    您的浏览器暂不支持 <audio> 标签。 
</ audio>

③音频<audio>标签——常见属性

注意：谷歌浏览器把音频和视频自动播放禁止了

3.HTML5 新增的 input 类型

重点记住： number tel search 这三个

4.HTML5 新增的表单属性

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
    color: pink;
}

二、CSS3 的新特性

1.CSS3 新增选择器

注意：类选择器、属性选择器、伪类选择器，权重为 10。

属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者 i d 选择器。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。

①nth-child (n) 选择某个父元素的一个或多个特定的子元素（重点）

n 可以是数字，关键字和公式。n 如果是数字，就是选择第 n 个子元素，里面数字从1开始… 。n 可以是关键字：even 偶数，odd 奇数。n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 ) ：

②区别：

nth-child 对父元素里面所有孩子排序选择（序号是固定的）。先找到第n个孩子，然后看看是否和E匹配。

nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再在E标签中找第n个孩子。

伪元素选择器（重点）

语法：标签名::before {} / ::after {}

注意：

①before 和 after 创建一个元素，但是属于行内元素 。

②新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。

③before 和 after 必须有 content 属性。

④before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。

⑤伪元素选择器和标签选择器一样，权重为1。

⑥利用伪元素选择器清除浮动。

例如：伪元素选择器使用场景——伪元素字体图标

p: : before { 
    position: absolute; 
    right: 20px; 
    top: 10px; 
    content: '\e91e'; 
    font-size: 20px; 
}

2.CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒子模型，可以分成两种情况：

①box-sizing: content-box 。盒子大小为 width + padding + border (以前默认的)。

②box-sizing: border-box 。盒子大小为 width。如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了(前提是padding 和border不会超过width宽度)。

3.CSS3 其他特性（了解）

图片变模糊

CSS3滤镜filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数 ( ); 例如： filter: blur(5px); blur 模糊处理，数值越大越模糊

计算盒子宽度 width: calc 函数

CSS3 calc 函数: calc( )此CSS函数让你在声明CSS属性值时执行一些计算。括号里面可以使用 +、-、*、/ 来进行计算。

例如：width: calc(100% - 80px); /*始终比父盒子宽度小80px */

4.CSS3 过渡变化（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，过渡动画是从一个状态渐渐的过渡到另外一个状态，我们现在经常和 : hover 一起搭配使用。

语法：transition: 要过渡的属性花费时间运动曲线何时开始 ;

①属性：想要变化的 css 属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。

②花费时间：单位是秒（必须写单位），比如 0.5s 。

③运动曲线：默认是 ease(可以省略)。

④何时开始：单位是秒（必须写单位），可以设置延迟触发时间，默认是 0s (可以省略)。

记住过渡的使用口诀：谁做过渡给谁加

让我再睡会儿呗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5C3提高

2022.3.2 学习笔记目录CSS第七趴：六、溢出的文字省略号显示1.单行文本溢出显示省略号2.多行文本溢出显示省略号七、常见布局技巧margin负值运用文字围绕浮动元素(运用浮动元素不会压住文字的特性)行内块巧妙运用CSS 三角强化八、CSS 初始化HTML5 和 CSS3 提高：一、HTML5 的新特性1.HTML5 新增的语义化标签(均为块级元素)编辑2. HTML5 新增的多媒体标签3.HTML5 新增的 input 类型4
复制链接

扫一扫