CSS学习(十八)-滚动条、拖动元素、轮廓线
来源:互联网 发布:vm linux 共享文件夹 编辑:程序博客网 时间:2024/06/07 03:26
一、理论:
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.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>
0 0
- CSS学习(十八)-滚动条、拖动元素、轮廓线
- CSS轮廓,突出元素
- 水平滚动条拖动
- 子元素scroll父元素容器不跟随滚动(JS实现),子元素内滚动条没有(css实现)
- CSS学习笔记(4)定位/表格/滚动条
- 拖动MediaPlay控件的滚动条来控制媒体播放--silverlight(银光)学习(4)
- 拖动滚动条加载数据
- CSS学习之 轮廓
- 拖动滚动条时,背景图片随之滚动
- 页面元素滚动条
- CSS十八条技总结
- CSS十八条技总结
- CSS十八条技总结
- CSS十八条技总结
- 鼠标中键按下拖动滚动条(平移视图)
- css实现图片横向排列,溢出隐藏/滚动条横向拖动
- HTML页面 css 怎么让内容自适应 出现拖动的滚动条
- 元素随滚动条滚动特效(广告,标题栏等)
- 【FastDev4Android框架开发】AndroidAnnnotations注入框架使用之注入组件Components(九)
- android View 系统 touch 事件处理
- 1080. Graduate Admission (30)【排序】——PAT (Advanced Level) Practise
- [leetcode] Word Pattern
- zookeeper的领导者选举和原子广播
- CSS学习(十八)-滚动条、拖动元素、轮廓线
- Android 性能优化之使用MAT分析内存泄露问题
- web页面局部刷新问题
- android_广播者监听软件的安装和卸载
- 待思考的问题
- ||OC||OC语言基础知识框架结构//个人整理使用|仅供参考|尚未整理完
- 113. Path Sum II
- jni 调用sock_raw -- 端口扫描
- python扩展之爬虫基础