html5和css3新增特性

1.css三角形的做法

      .box1 {
        width: 0px;
        height: 0px;
        border: 50px solid transparent;
        border-left-color: black;
      }

2.css用户界面样式

2.1 什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

2.2 鼠标样式cursor

li {cursor:pointer;}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值	描述
default	箭头 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

2.3 轮廓线outline

给表单添加 outline：0；或者 outline：none；样式之后，就可以去掉默认的蓝色边框。

input { outline: none; }

2.4 防止拖拽文本域resize

给文本域添加resize：none；样式之后，文本域就不可以改变大小了

textarea { resize:none; }

2.5 京东商品案例

做个价格案例如下图：

 

 html部分

        <div class="box1"></div>
        <div class="price">
            <span class="miaosha">
                <i></i>
                ￥1950
            </span>
            <span class="org">￥3200</span>
        </div>

css部分

        * {
            margin: 0;
            padding: 0;
        }
        .price{
            width: 160px;
            height: 24px;
            border: 1px red solid;
            margin: 0 auto;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 88px;
            height: 100%;
            background-color: red;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            line-height: 24px;
            text-align: center;
        }
        .miaosha i {
            position: absolute;
            right: 0;
            height: 0;
            width: 0;
            border-color: transparent white transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .price .org {
            font-size: 12px;
            color: #666;
            text-decoration: line-through;
        }

3.vertical-align属性应用

css的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

语法：

vertical-align:baseline | top | middle | bottom

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素顶端对齐

4.溢出的文字省略号显示

4.1 单行文本溢出显示省略号

        /* 1.强制一行内显示文本（默认normal自动换行） */
        white-space: nowrap;
        /* 2.超出的部分隐藏 */
        overflow: hidden;
        /* 3.文字用省略号代替超出的部分 */
        text-overflow: ellipsis;

4.2 多行文本溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适用于webkit浏览器或移动端（移动端大部分是webkit内核）

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

5.HTML5的新特性

5.1 HTML5新增的语义化标签

<header>：头部标签

<nav>：导航标签

<article>：内容标签

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

<aside>：侧边栏标签

<footer>：尾部标签

5.2 HTML5新增的多媒体标签

视频<video>常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预先加载视频）none（不应加载视频）	规定是否预加载（如果有了autoplay，就忽略该属性）
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

音频audio

常见属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的URL

6.css3的新特性

6.1 css3新增选择器

css3给我们新增了选择器，可以更加便捷更加自由的选择目标元素。

6.1.1 属性选择器

属性选择器可以根据元素特定属性来选择元素，这样可以不用借助类或id选择器

 

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性且值以val开头的E元素
E[att$="val"]	匹配具有att属性且值以val结尾的E元素
E[att*="val"]	匹配具有att属性且值中含有val的E元素

 

6.1.2 结构伪类选择器

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

选择器	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

 

6.1.3 伪元素选择器

 伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

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

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

语法：element::before{}

before和after必须有content属性

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

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

6.2 css3盒子模型

css3中可以通过box-sizing 来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变

可以分成两种情况：

1.box-sizing：content-box 盒子大小为width+padding+border（以前默认的）

2.box-sizing：border-box盒子大小为width

如果盒子模型我们改为了box-sizing：border-box，那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

6.3 css3其他特性

css3 滤镜filter

filter css属性将模糊或颜色偏移等图形效果应用于元素

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

css3 calc函数

calc() 此css函数让你在声明css属性值时执行一些计算

width：calc(100%-80px);

css3 过渡

过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时元素添加效果

过渡动画：是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们经常和：hover一起搭配使用

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

如果有多个属性需要变化可以使用all

div {
  transition: all 0.5s;  
}
div:hover {
  width: 400px;
  height: 200px;
  background-color:skyblue;  
}

6.4 背景线性渐变

语法：

background:linear-gradient(起始方向，颜色1，颜色2，。。。);
background:-webkit-linear-gradient(left,red,blue);
background:-webkit-linear-gradient(left top,red,blue);

背景渐变必须添加浏览器私有前缀

起始方向可以是：方位名词或者度数，如果省略默认就是top