2022.3.2 学习笔记
目录
CSS第七趴:
六、溢出的文字省略号显示
1.单行文本溢出显示省略号
--必须满足三个条件:
/*1. 先强制一行内显示文本 */
white-space:nowrap; ( 默认 normal 自动换行)
/*2. 超出的部分隐藏 */
overflow:hidden;
/*3. 文字用省略号替代超出的部分 */
text-overflow:ellipsis;
2.多行文本溢出显示省略号
多行文本溢出显示省略号,有较大兼容性问题, 适合于webKit浏览器或移动端(移动端大部分是webkit内核)。
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 (可以省略)。
记住过渡的使用口诀: 谁做过渡给谁加