CSS学习(十八)-滚动条拖动元素轮廓线

Posted bwshqh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS学习(十八)-滚动条拖动元素轮廓线相关的知识,希望对你有一定的参考价值。

一、理论:
1.overflow-x/overflow-y
a.visible 默认值,不添加滚动条
b.auto 添加滚动条
c.hidden 内容溢出容器时,所有内容都将隐藏,不显示滚动条
d.scroll 不论有无溢出,都显示滚动条
e.no-display 当内容溢出容器时不显示元素
f.no-content 当内容溢出容器时不显示内容
2.resize
a.none 用户不能拖动元素修改尺寸大小
b.both 用户可以拖动元素,同时修改元素的宽度和高度
c.horizontal 用户可以拖动元素,但只能改动宽度
d.vertical 用户可以拖动元素,但只能改动高度
e.inherit 继承父元素的resize属性值
3.outline 
a.outline 颜色、样式、宽度、偏移值
4.outline与border线的对比
a.border属于盒模型的一部分,outline的轮廓线不会破坏网页布局
b.outline创建的外轮廓线在元素各边都一样
c.border创建的元素可以单边设置,outline创建的外轮廓线是闭合的
d.border仅可以设置元素的边框,只能向外扩展,outline可以向元素内部创建封闭的轮廓

二、实践:

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    div{
        width : 200px;
        margin : 20px auto;
        outline : 10px solid #ccc;
        padding : 20px
    }
    </style>
</head>
<body>
    <div>快上八个菜</div>
</body>
</html>
2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .form1 textarea{
            background:#123586;
            resize:none;
        }
        .form2 textarea{
            background:#298529;
            resize:both;
        }
    </style>
</head>
<body>
    <form action = "#" method="post" class = "form1">
        <textarea name = "test" rows = "15" cols = "20" placeholder="修改文本域大小" ></textarea>
    </form>
    <form action = "#" method="post" class = "form2">
        <textarea name = "test" rows = "15" cols = "20" placeholder="修改文本域大小" ></textarea>
    </form>
</body>
</html>




 

以上是关于CSS学习(十八)-滚动条拖动元素轮廓线的主要内容,如果未能解决你的问题,请参考以下文章

CSS 如何添加水平滚动条

音频处理Melodyne 网络缩放功能 ( 音符分离线 | 片段分离线 | 窗口滚动条 | 网格缩放 | 修改图像显示位置 | 显示五线谱 )

控制浏览器的滚动条

在可拖动事件上,元素随着滚动条窗口顶部的高度向下移动

动态操作滚动条

怎样才能 使dbgrideh 拖动滚动条时不改变当前选中记录