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. Python form...import...和import的区别(自己理解的)

    Python有两种导入包和模块的方式,区别如下 form...import... import 相对导包 导入不同包子模块 可以导入模块所需变量/函数/类   init文件的__all__特殊变量(模 ...

  2. 什么是HTML 5？

    HTML 5是HTML的新标准,其主要目标是无需任何额外的插件如Flash.Silverlight等,就可以传输所有内容.它囊括了动画.视频.丰富的图形用户界面等. HTML5是由万维网联盟(W3C) ...

  3. 复杂JSON字符串解析，可以少走弯路

    发现一个好文章:装载至http://www.verejava.com/?id=17174254038220 package com.json5;    import org.json.JSONArra ...

  4. spark 写csv文件出现乱码 以及写文件读文件总结

    参考链接:https://blog.csdn.net/qq_56870570/article/details/118492373 result_with_newipad.write.mode(&quo ...

  5. Docker最常用的镜像命令和容器命令

    一.镜像相关命令 官方文档:https://docs.docker.com/referenc 1.1查看镜像 [root@localhost ~]# docker images REPOSITORY ...

  6. 【控制】模型预测控制 MPC 【合集】Model Predictive Control

    1.模型预测控制--运动学模型 2.模型预测控制--模型线性化 3.模型预测控制--模型离散化 4.模型预测控制--预测 5.模型预测控制--控制律优化二次型优化 6.模型预测控制--反馈控制 7.模 ...

  7. MySQL数据库设置编码格式和时区

    MySQL数据库设置编码格式和时区 MySQL5版本: url=jdbc:mysql://localhost:3306/test?characterEncoding=utf-8 MySQL6版本及以上 ...

  8. 在react项目中使用redux-thunk，react-redux，redux;使用总结

    先看是什么,再看怎么用: redux-thunk是一个redux的中间件,用来处理redux中的复杂逻辑,比如异步请求: redux-thunk中间件可以让action创建函数先不返回一个action ...

  9. （ICONIP2021）On the Unreasonable Effectiveness of Centroids in Image

    目录 摘要 1.引言 2.提出的方法 2.1 CentroidTripletloss 2.2 聚合表示 3.实验 3.1 数据集 3.2 应用细节 3.3 Fashion检索结果 3.4 行人再识别结 ...

  10. 机器学习系列：LightGBM 可视化调参

    大家好,在100天搞定机器学习|Day63 彻底掌握 LightGBM一文中,我介绍了LightGBM 的模型原理和一个极简实例.最近我发现Huggingface与Streamlit好像更配,所以就开 ...