1、<form>标签的enctype属性

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，属性值如下:

application/x-www-form-urlencoded：在发送前编码所有字符（默认）；

multipart/form-data不对字符编码，在使用包含文件上传控件的表单时，必须使用该值；

text/plain：空格转换为"+"加号，但不对特殊字符编码。

2、outline

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用（简写属性）。

outline[outline-color outline-style  outline-width]

style；none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit

width：thin、medium、thick、length、inherit

3、@media

@media screen and (max-width: 600px) {  .className {  property：value; }  }   max-width: 600px表示所允许的最大宽度是600px，@media下的样式，在0~600px时，页面才会有效果，也就是说要小于或等于600px.

@media screen and (min-width:  600px) {   .className { property: value; } }

min-width: 600px表示在至少（大于）600px的宽度时，@media下的css才会在页面中有效果。

4、<a>标签的hreflang属性

hreflang：不是指定标签中的内容所使用的语言，而是指定被href属性调用的文档使用的语言。详情http://www.runoob.com/tags/att-a-hreflang.html

5、<img>标签的usemap属性

usemap：指定了一个图片的客户端图像映射(一个可点击区域的图片映射),该属性与map元素的名称(name)属性相关。属性值是一个哈希字符("#")加上map元素的名称。

6、Form对象的length属性

length：返回的是form表单中元素（如：input、button）的个数。

7、contentWindow，contentDocument

　contentWindow属性能够以HTML对象来返回iframe中的文档，contentDocument属性以HTML对象返回框架容纳的文档，它们都可以通过所有标准的DOM方法来处理被返回的对象，语法如下：

　frameObject.contentDocument或者iframeObject.contentDocument。

8、贝塞尔曲线Bezier Curve

一次曲线是条直线。

二次曲线：

三次曲线：

 9、vertical-align

　　设置一个元素的垂直对齐方式（该属性定义一个行内元素的基线相对于该元素所在行的基线垂直方向对齐方式），值如下：

　　baseline：默认，元素放置在父元素的基线上；

　　sub：垂直对齐文本上标的下标；

　　super：垂直对齐文本的上标；

　　top：把元素的顶端与行中最高元素的顶端对齐；

　　middle：把元素放在父元素的中部；

　　bottom：把元素的顶端与行中最低元素的顶端对齐；

　　text-top：把元素的顶端与父元素字体的顶端对齐；

　　text-bottom：把元素的底端与父元素字体底端对齐；

　　%：使用”line-height“属性的百分比值来排列该元素，允许使用负值；

　　inherit：规定应该从父元素继承vertical-align属性值；

　　length：-----------------------------------------------------。

10、line-height

　　设置元素中行的高度。行高指的是文本行基线间的距离，但文本之间的空白距离不仅是行高决定的，也受字号的影响。

　　行内元素会有一个行内框，行内框作为一个概念，无法显示，但又确实存在。在没有其他因素的影响下，行内框等于内容区域，设定行高则可以增加或减少行内框的高度，

http://www.ddcat.net/blog/?p=227

https://www.cnblogs.com/starof/p/4512284.html

没有做不到的事，只有做不成事的人。

11、box-sizing

　　该属性允许以某种方式定义某些元素，以适应指定区域 ->box-sizing: content-box | border-box | padding-box。

　　content-box: border、padding不计算在width内；

　　padding-box: padding计算在width内；（经测试，效果和content-box的一样）

　　border-box: border、padding计算入width之内，俗称“怪异模式”。

12、calc（）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>calc()动态指定元素的长度</title>

        <style>

            .demo {

                width: 300px;

                /* 第三步骤： 添加padding，更好的说明问题 */

                padding: 3px 0;

                background: #60f;

                border: 1px solid #000;

            }

            .box {

                /* 第四步骤： 利用calc()动态设置子元素的宽度 */

                width: 90%;  /* 用于不支持calc()的浏览器 */

                width: -moz-calc(100% - (10px + 5px) * 2);

                width: -webkit-calc(100% - (10px + 5px) * 2);

                width: calc(100% - (10px + 5px) * 2);

                /*width: 100%;*/

                height: 50px;

                /* 第二步骤：添加padding、border */

                padding: 10px;

                border: 5px solid green;

                background: #f60;

            }

        </style>

    </head>

    <body>

        <div class="demo">

            <div class="box"></div>

        </div>

    </body>

</html>
问题：在该例子中，div.box的宽度大于其容器div.demo的总宽度，从而撑破容器伸出来。
解决子容器超过父容器宽度问题方案：
　　1、子容器撑破父容器，可以计算子容器的宽度，用父容器的宽度减去子容器border和padding的值。
　　2、可利用box-sizing来改变元素盒模型类型实现效果，也可利用calc（）方法，如总宽度是100%，则子元素的内容宽度应该减去border（5px * 2）、padding（10px * 2），既是width: 100% - （5px + 10px ) * 2，
注意，对不支持calc（）方法的浏览器应该设定一个具体width值。

 13、border渐变

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .demo1 {

                width: 180px;

                height: 100px;

                margin-bottom: 20px;

                border: 5px solid;

                vertical-align: middle;

                border-image: -wekbit-linear-gradient(red, blue) 30 30;

                border-image: -moz-linear-gradient(red, blue) 30 30;

                border-image: linear-gradient(#e6ec64, #16b379, #23cad6) 1 30 20;

            }

            .demo2 {

                width: 180px;

                height: 100px;

                border: 1px solid #fff; /*处理毗邻元素margin-top，也可以使用overflow：hidden*/

                background: -webkit-linear-gradient(45deg, #e6ec64, #16b379, #23cad6);

                border-radius: 10px;

            }

            .childDiv {

                width: 170px;

                height: 90px;

                margin: 5px auto 0;

                border-radius: 7px;

                background: #fff;

            }

        </style>

    </head>

    <body>

        <div class="demo1">SO FUN~</div>

        <div class="demo2">

            <div class="childDiv">SO FUN~</div>

        </div>

    </body>

</html>

 14、艺术字体

待续。。。

　　

一些特殊的CSS属性的更多相关文章

  1. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  2. 换行的css属性

    //正常换行  word-break:keep-all;word-wrap:normal; //下面这行是自动换行  word-break:break-all;word-wrap:break-word ...

  3. jquery css属性练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  5. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  6. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  7. css学习（2）-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

  8. css属性编写顺序+mysql基本操作+html细节（个人笔记）

    css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...

  9. 前端开发--css属性书写顺序

    css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...

  10. 那些年我们错过的超级好用的CSS属性

    在看前辈写的CSS样式的时候发现好多之前都没用过的Css属性,现在看来有必要整理一下啦. 一.CSS选择器(http://www.w3school.com.cn/cssref/css_selector ...

随机推荐

  1. Maven的Scored介绍

    Maven的Scored值的介绍:http://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.ht ...

  2. Java 中，Maven 和 ANT 有什么区别？

    虽然两者都是构建工具,都用于创建 Java 应用,但是 Maven 做的事情更多, 在基于"约定优于配置"的概念下,提供标准的 Java 项目结构,同时能为应用自 动管理依赖(应用 ...

  3. centos 7环境下安装rabbitmq

    以 前在windows 7下面成功安装过rabbitmq,但是在windows 10下面安装失败,各种问题,各种解决方法都试过,还是不成功,最终放弃治疗. 后来经人指点,在linux下安装rabbit ...

  4. 细说【json&pickle】dumps,loads,dump,load的区别

    1 json.dumps() json.dumps()是将字典类型转化成字符串类型. import json name_emb = {'a':'1111','b':'2222','c':'3333', ...

  5. 编译器如何处理C++不同类中同名函数（参数类型个数都相同）

    转载请注明出处,版权归作者所有 lyzaily@126.com yanzhong.lee 作者按: 从这篇文章中,我们主要会认识到一下几点: 一.不类中的特征标相同的同名函数,它们是不同的函数,原因就 ...

  6. 高效使用Java构建工具，Maven篇｜云效工程师指北

    大家好,我是胡晓宇,目前在云效主要负责Flow流水线编排.任务调度与执行引擎相关的工作. 作为一个有多年Java开发测试工具链开发经验的CRUD专家,使用过所有主流的Java构建工具,对于如何高效使用 ...

  7. 讲清楚之 javascript中的this

    讲清楚之 javascript中的this 这一节来探讨this. 在 javascript 中 this 也是一个神的存在,相对于 java 等语言在编译阶段确定,而在 javascript 中, ...

  8. Android修改app图标

    1.按照路径找到AndroidManifest.xml中的icon 2.在drawable添加一个png图片 3.然后在AndroidManifest.xml中的icon,修改其中的值 android ...

  9. mysql 合并查询结果

     UNION 使用 UNION 关键字是,数据库系统会将所有的查询结果合并到一起,然后去除掉相同的记录:   UNION ALL 使用 UNION ALL,不会去除掉系统的记录:

  10. vue获取验证码倒计时

    <template> <div> <el-button :disabled="disabled" @click="sendcode" ...