HTML5+CSS3笔记

HTML5+CSS3笔记

一、新增语义化标签

header、nav、aside、article、section、footer标签

二、新增input表单

新增表单input type=search 的盒子模型是box-sizing:border-box

三、css 选择器

1.结构伪类选择器

1.常见伪类：

四、伪元素

1.常见伪元素如下图：

img、input、iframe，标签是不支持类似 img::before 这样使用
究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。

单标签
<br><hr><img><input><param><meta><link>

五、2D变换 transform

transfomr是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。

1.2d移动之一 translate 可以改变元素在页面中的位置

语法：transform：translate(x轴,y轴);

总结： 1.translate中的百分比单位是相对于自身元素的宽和高translate:(50%,50%);
2.translate移动不会影响其他元素
3.对行内标签没有效果

2.2d移动之一 rotate

transform:rotate(度数45deg)

总结：1.角度为正时顺时针位负时为逆时针 2. 默认旋转的中心点是元素的中心点

transform:scale(宽的倍数,高的倍数)

####属性都写上：transform:translate() rotate() scale()

动画animation

使用 1.先在css中定义动画
2.给目标元素使用动画

动画序列

   /* 我们想页面一打开，一个盒子就从左边走到右边 */
   from和to等价于 0% 和 100%
        /* 1. 定义动画 */        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用（使用）动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
                /* infinite 无限次 */
            animation-iteration-count: infinite;
            animation-timing-function: ease;
            /* alternate 反方向 */
            animation-direction: alternate;
              /* 动画等待或者结束的状态 */
            animation-fill-mode: forwards;
            
             /* 动画属性缩写 */
            animation: movebox 10s linear 0s 1 alternate forwards;
        }

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

去除图片底部空隙问题（嵌入在一个元素内）

1.将图片转换为块级对像
display:block
2.设置图片的垂直对齐方式
vertical-align属性为「top，text-top，bottom，text-bottom,middle」
3.设置图片的浮动属性
img{float:left}
4.改变父对象的属性
如果父对象的宽、高固定，图片大小随父对像而定，那麽可以设置： overflow:hidden; 来解决。
5.行高足够小 - 基线位置上移

css3线性渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义