css滚动条 | 易学教程

HTML-iframe标签

阅读更多关于 HTML-iframe标签

碎碎：这两天在实践中，用到了 iframe，之前对其不甚了解，了解之中遇到好多奇葩问题，今天记录下这两天遇到的相关的内容。嵌入的 iframe 页面的边框嵌入的 iframe 页面的背景嵌入的 iframe 页面居中嵌入的 iframe 页面的滚动条 iframe 父页面调用子页面 iframe 子页面调用父页面 1. iframe 嵌入页面的边框 //HTML 元素：主要有 src: 要嵌入的页面 <iframe id="framePage" src="iframe/inner_page.jsp"></iframe> // 默认有边框: 新建测试文件，命名：test_iframe01.html,内容如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> //为了方便区别，对应设置了样式 <style> .iframe_page{ width: 400px; height: 260px; background-color: #dfdfdf; //为了方便区别，设置背景样式 } .iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; /

CSS样式更改滚动条的样式

阅读更多关于 CSS样式更改滚动条的样式

一：webkit下面的CSS设置滚动条主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块的样式效果图： css样式 *滚动调样式*/ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-button{ display: none; } ::-webkit-scrollbar-thumb{ height: 50px; background-color: #999; outline: 2px solid white; outline-offset: -2px; border: 2px solid white; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } 来源： https://blog.csdn

css修改滚动条样式

阅读更多关于 css修改滚动条样式

css给一个内容盒子设置overflow:auto，当盒子里面的内容超过盒子的宽高时，会自动出现滚动条：这种滚动条在一些页面美观要求较高的网页上会显得很突兀，下面来修改滚动条的样式吧~ ::-webkit-scrollbar ::-webkit-scrollbar-thumb ::-webkit-scrollbar-track <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > </ title > < style type = " text/css " > .test { width : 200px ; height : 200px ; overflow : auto ; margin : 5px ; border : none ; background-color : #f2f2f2 ; margin : 200px auto ; } .test-1::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px ; /*高宽分别对应横竖滚动条的尺寸*/ height : 1px ; } .test-1::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ -webkit-box-shadow :

CSS Overflow属性详解

阅读更多关于 CSS Overflow属性详解

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。 overflow属性有四个值： visible (默认), hidden , scroll , 和 auto 。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。 1、Visible 如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。 2、Hidden 默认值visible的相反的值就是 hidden 。它会将所有超出盒子的所有内容都给隐藏掉。这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。比如有的用户设置他们的浏览器的默认字体比你预期的要大些

转载：CSS改变浏览器滚动条 ::-webkit-scrollbar

阅读更多关于转载：CSS改变浏览器滚动条 ::-webkit-scrollbar

* 当input选中的时候会出现一个边框 outline /*一般设置成 none*/ textarea:focus, input:focus{ outline: none; } * 元素内容是否可编辑 contenteditable <div id="example-one" contenteditable="true"> #example-one { margin-bottom: 10px; } [contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; } [contenteditable="true"]:hover { outline: 2px dashed #0090D2; } * webkit-playsinline video 都可以在页面中播放，而不是全屏播放 <video id="myvideo" src="test.mp4" webkit-playsinline="true"></video> * clearfix 清除浮动 .clearfix { zoom: 1; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } *