CSS新内容

 margin 外边距                                 *

margin  属性值最多有4个
                 * ① 只写一个值：四个方向的margin均为这个值
                 * ②  写两个值：上 右两个值  下默认=上  右默认=左
                 * ③   三个值：  上 右下三个值  左默认=右
                 * ④  四个值     上 右 下  左 四个方向
                 * ⑤  写三个值加 auto 控件居右显示
                 *     margin: 50px 30px 20px auto;
                 * margin: 0px auto; 设置控件在父容器中水平居中*/
        
     border
            
             * 三个属性值  宽度width 样式style 颜色color
             * 原则上：三个属性都需要手动指定
             * */

padding 内边距
            
             * 使用方式：同margin
             * 注意：使用padding会将整个控件撑大，使用时需注意控件可视区域的实际大小
            
 [box-shadow 盒子阴影]
             * 1、六个属性值，空格分割：
             *     x轴阴影距离：(必选) 可正可负，正——右移   负——左移
             *     y轴阴影距离：(必选) 可正可负，正——下移  负——上移
             *     阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
             *     阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
             *     阴影颜色：(可选) 默认为黑色
             *     内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
            
[border-radius 圆角]
             * 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
             *    例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
             * 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
             *     例如：border-radius: 50px 0px ;
             *          =border-radius: 50px 0px 50px 0px;
             *          =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
             *
             * 3、只写一个数，默认8个值均相等。

 [border-image 图片边框]
                 * 1、十个属性：
                 *     ① 图片路径：url()
                 *     ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
                 *         写的时候，不能带px单位
                 *     ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
                 *         写的时候，必须带px单位
                 *     ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
                 *         【铺满和平铺区别】
                 *         平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
                 *         铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
                 *
                 * 2、属性值写法：border-image: ① ②/③px ④;
                 *     第②部分可以只写1个、2个、3个，判断方式同margin

[border-image 图片边框]

* 1、十个属性：

* ① 图片路径：url()

* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。

* 写的时候，不能带px单位

* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框

* 写的时候，必须带px单位

* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)

* 【铺满和平铺区别】

* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；

* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。

* 2、属性值写法：border-image: ① ②/③px ④;

* 第②部分可以只写1个、2个、3个，判断方式同margin

 

*绝对定位

 

* 1 position：absolute；设置元素为绝对定位元素

* 2 定位机制：

* ① 相对于第一个非static的祖先元素（即使用了relative/absolute/fixed定位的祖先元素）进行定位

* ② 如果所有的祖先元素 均未定位 则位于浏览器左上角*

*使用absolute的元素 会从文档流中完全删除 原有空间释放不在占有。

* 固定定位 fixed

* 1position:fixed;是一种特殊的绝对定位 父容器无法使用relative锁住

* 2 定位机制：永远相对于浏览器进行定位。/

绝对定位元素水平居中的方式

* 1 left: 50%;

2 设置margin-left为-width/2:margin-left: -50px;

*/

z-index

* 1 作用：设置定位元素的z轴层叠顺序

* 2 使用要求：①必须是定位元素才能使用。relative/ablosute/fixed

* ② 使用z-index需要考虑父容器的约束，如果父容器为z-index：auto；则自容器的z-index可以不受父容器的约束，如果父容器为z-index进行了设置则自容器的层叠将以父容器的z-index为准，（在同一父容器的不同子元素，仍可以通过自己的层叠进行调整）

* 3 z-index: auto;和z-index: 0;的异同

* ①z-index: auto为默认值与z-index: 0;处于同一平面

* ②z-index: auto不会约束子元素的z-index层次、面。 而z-index：0；会约束子元素，必须与父元素处于同一平面。

* 4z-index相同（处于同一平面的定位元素）的层叠关系，后来者居上

* z-index默认为auto*/

* 相对定位

* 1使用position:relative;设置元素为相对定位的元素

* 2 定位机制①相对于自己原来文档流中的位置定位，当不指定top等的位置时，不会改变元素位置

* ②相对定位元素仍会占据原有文档流中的位置，不会释放

* 3 使用top left right botton时 当left和right同时存在，则left生效。当top和botton同时存在，则top生效。*/

1实现会计元素在块级元素中水平垂直居中

① 设置自容器为定位元素：

② left：50% margin-left：-width/2

top：50% margin-top：-height/2

【HTML5 新增结构标签】

section：表示页面中的一个内容区块，文档的主体部分，用于将网页或文章划分章节、区块。

article：表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。

aside：表示article元素内容之外的，与article元素内容相关的辅助信息。(常用于相关推荐啊等)

header：网页或文章的头部。

footer：网页或文章的底部。

nav：表示页面中导航链接的部分

hgroup：用于整个页面或页面中一个内容区块的标题进行组合。

 

【HTML5表单属性】

Form:指向特定表单id，实现input无需放于form中，即可通过form提交；

Formaction/Formmethod:设置某个submit按钮，提交到指定的action地址，使用指定的method方法。 会覆盖form中的action和method属性

Placeholder:自动提示

Autofocus:自动获得焦点

Autocomplete:自动完成功能 

 

List：指向指定的datalist的ID，为input绑定一组指定的datalist提示信息(datalist具有和Autocomplete类似的自动筛选完成功能)

>>>写法：<input type="text" list="data1"/>

<datalist id="data1">

<option>1234</option>

<option>2234</option>

<option>3234</option>

</datalist>

>>> 效果图：

 

 * background-origin：设置背景图的定位方式。border-box从边框外缘开始，padding-box从边框内缘，content-box从文字内容区开始

* background-origin不改变背景图显示区域大小，只决定左上角定位位置。

* background-clip：裁切背景图和背景色显示区域。border-box从边框外缘开始显示，padding-box从边框内缘开始显示，content-box从文字内容区开始显示 。不在显示区域内的背景图或背景色，会被裁切不显示

* background-clip不改变定位位置，只是通过裁切显示部分区域。

* transform的定义变换
             * 常用变换：translate 平移
                 *         scale 缩放
                 *         rotate 定义旋转
                 * transform可同时进行多种变换，多种变换之间空格分割：
                 * 例如：transform: scale(1.8,3.0) translateY(0px) rotate();
                 * transform-origin： 定义变形起点。
                 * 可选值：left/center/right  top/center/bottom
                 *       或者，直接写X Y轴坐标点。
                 * 例如：transform: rotate(180deg);
                 *         transform-origin: right bottom;
                 *     表示，绕左下角，旋转180度。
            /*.div1{
                width: 300px;
                height: 300px;
                overflow: hidden;
            }
            .div1 img{
                width: 300px;
                height:300px;
            }
            .div1:hover img{
                transform: scale(1.5,5.0) translate(0px,-30px) rotate(360deg);
                transition: all 3s ease;
                height: 100px;}*/
                /*transition
                 * 1 参与过度的属性，可以单独指定某个CSS属性,也可以all或none
                 * 2 过渡开始到过渡完成的时间
                 * 3 过渡的样式函数 长选 esea
                 * 4 过渡开始前的延迟时间 可以省略
                 * 5 transition属性可以同时定义多个过渡效果 用逗号分开。*/
   CSS动画的使用
              * 1 声明一个动画
              * @keyframes name{
              *     from{}
              *      to{}
              * }
              * 阶段：
              * ① 每个阶段用百分比显示，从0%到100%
              * ② 起止必须设置即0%到100%或者from和to
              * 2在CSS选择其中，使用Animation动画属性，调用声明好的关键帧。
*  Animation缩写顺序：
              * Animation-name 动画名称(@keyframes 名称)
        
        Animation-duration 动画持续时间
        
        Animtaion-timing-function动画速度曲线 常选ease
        
        Animtaion-delay 动画延迟时间
        
        Animation-iteration-count 播放次数，默认为1，无限次Infinite  
        
        Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）
        
        * animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）
        
        >>> 注意animation-name和animation-duration必须设置
        >>> animation可以同时设置多个动画 动画之间用,分隔
            animation:frame1 .3s,frame2 .5s…
    */

转载于:https://www.cnblogs.com/LJYqq/p/6581095.html