一些特殊的CSS属性

最新推荐文章于 2023-04-26 17:15:16 发布

weixin_30273931

最新推荐文章于 2023-04-26 17:15:16 发布

阅读量157

点赞数

原文链接：http://www.cnblogs.com/L-xjco/p/10732052.html

版权

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、

转载于:https://www.cnblogs.com/L-xjco/p/10732052.html

weixin_30273931

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一些特殊的CSS属性

1、<form>标签的enctype属性 enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，属性值如下: application/x-www-form-urlencoded：在发送前编码所有字符（默认）； multipart/form-data不对字符编码，在使用包含文件上传控件的表单时，必须使用该值； ...
复制链接

扫一扫