在某些场景下，需要将滚动条居左显示（默认居右），只需要改变scrollbar的x坐标即可。
其实以webkit为核心的浏览器，包括但不限于Safari和Chrome，也有一个关于浮动和边距的bug，同样会造成布局错误。...这个BFC元素没有指定宽度值（或者指定width:auto） 当满足触发条件时，该BFC元素的另一侧的边距将不再受css控制（在webkit核心浏览器下），而是由你所指定的与浮动元素相同的边距决定，即使你在...具体来说，可以分为两种情况： 当BFC与浮动方向相同的边距小于或等于浮动元素占据的总宽度（width+margin+padding+border）时，BFC另一侧的边距等于所设定方向上的边距（下图前两种情况...）； 当BFC与浮动方向相同的边距大于浮动元素占据的总宽度时，BFC另一侧的边距等于浮动元素占据的总宽度（下图第三种情况）。...image.png 第一种情况：main的左边距为50px，小于sider的总宽度100px，于是它右侧自动出现了50px的边距（等于margin-left）； 第二种情况：main的左边距为100px
最近，自定义滚动条又回来了，不过是在 Webkit 内核中。相比之前，这次的属性名字加了供应商前缀（例如 ::-webkit-scrollbar）并且使用了 "Shadow DOM"。...David Hyatt 在 2009 年就写了一篇 博文 并且把几乎你期待的所有滚动条样式的组合都整合成了一个范例页面。 干货 不同的部件 下面是一些伪元素以及它们实际对应的滚动条的部件。...Webkit 博客上 David 的博文，因为他介绍的非常棒：（译者注：指代伪元素部件的部分保留其英文名，方便与上文对照） :horizontal – horizontal 伪类应用于每一个水平方向上的滚动条部件...10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } 我们可以在一个有纵向滚动条的 div 中看见效果： ?...这里有一点特别好的是，滚动条是在 body 元素上的，所以滚动条的并不是像常见的那样贴在顶部、底部和浏览器窗口的右侧。
常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%； 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...visible float不为none position不为static或者relative display属性为inline-block、flex、table-cell等 BFC作用 可以避免外边距重叠的问题...自适应布局 两栏布局 左边左浮动，右边margin-left（float+margin） 左元素float:left 右边父元素BFC（float+BFC） 左元素绝对定位，left:0...;右边margin-left（定位+margin） 父元素display:flex；右边元素flex:1（flex） 三栏布局 左元素左浮 右元素右浮，中间设置margin-left和margin-right...) 多行文本 -webkit-line-clamp:2 //（用来限制在一个块元素显示的文本的行数） display: -webkit-box//（将对象作为弹性伸缩盒子模型显示） overflow
这个宽度是指对象的可见内容的左边界到右边界的距离。（这个左边界和右边界是如何理解，也没有说清楚，不过下面给了个链接，我懒的去看。）...（1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 右内边距 （2）没有滚动条，有内容。...2、IE 7 （1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 右内边距 （2）有滚动条，有内容。...3、IE 8 （1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 内容宽度 + 右内边距 （2）有滚动条，有内容。...再来看看firefox是如何表现的。 4、Firefox （1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 内容宽度 + 右内边距 （2）有滚动条，有内容。
; } } .text{ // border: 1px soild red; flex: 1; // 写上这句话之后 会自动布局 padding-left: 20rpx; // 左内边距...; //特别显示模式 -webkit-line-clamp: 2; //行数 line-clamp: 2; -webkit-box-orient: vertical;...-- 设置滚动条方向为横向 --> 的颜色 // 通过渗透来消除状态栏下方的下划线 /deep/ ::-webkit-scrollbar { width: 4px !...color:#333; // 设置颜色 } } .content{ padding: 30rpx; // 定义内边距 .row{ // 定义每一行的样式 border-bottom
高度：12px； 边框底部：1px实心＃999; 右边框：1px实线＃999; 变换：rotate（-45deg）; } 4，超过1行/ 2行显示省略号 .line-1 { 宽度：100px； 空白：...//控制多行的行数 -webkit-box-orient：垂直; } 5，水平/垂直居中定位 //绝对定位未知高度，距顶部，左边50％，然后转换：translate（-50％，-50％），不支持IE9...中央 { 位置：绝对； 最高：50％； 左：50％； 边距：-50px 0 0 -50px; //假设宽高都为100px } //弹性布局 。...; padding-right：constant（安全区域插入权）; } 7，占位符样式设置 ::-webkit-input-placeholder {} / *使用webkit内核的浏览器* / ：-...选择器均不支持占位文本 8，去掉图片底部至少边距 img { 边界：0; 垂直对齐：底部； } 9，去掉按钮点击高亮样式 按钮{ -webkit-tap-highlight-color：透明； }
一：webkit 下CSS设置滚动条 主要有下面7个属性： ::-webkit-scrollbar 滚动条整体，可以设置宽度等① ::-webkit-scrollbar-button 滚动条两端的按钮...:increment decrement 类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。) :start 伪类也应用于按钮和滑块。...:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。...webkit团队有计划扩展它并推动成为一个标准的伪类) 实例： /* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 12px; } /* 滚动槽 */ ::-...）*/ scrollbar-3dlight-color: red; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: red; /*滚动条的高亮颜色（左阴影
fixed 固定 不出现滚动条 scroll 出现滚动条 no 没有滚动条 6)).背景大小...通过通用选择器，可以设置所有的元素的border padding margin 初始值为0： *{ margin:0; padding:0; border:0 } 所有的边距都可以用em px...{ float:left } left 左浮动 right 右浮动 none 不浮动 11).溢出Overflow 元素内容超过了框架的大小 div{ overflow:scroll } visible...内容不会被修剪，会呈现在元素框之外 hidden 内容会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容...在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
; bottom: 60px; } 之所以top:60;bottom:60;是因为header和footer的高度均为60px； 这里，section的flex布局可以不存在，因为右边内容区域使用...} 总结： fixed固定定位 top+bottom方位值拉伸 margin边距 二、上中下 左不固定 - flex ?...article { flex: 1; } 或者其他两列布局的方式，比如浮动、margin负边距实现。...: 280px; 右边article用left躲过左边的宽度： left: 280px; 最后，左右再分别使用padding空出header和footer的位置 padding: 68px 20px...top: 48px; bottom: 48px; 超出会出现滚动条，不超出就没有滚动条： overflow：auto 总结： 全屏三大块元素均使用absolute布局。
/style> ::: 两行（多行）超出显示省略号 overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box...; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 显示的行数由line-clamp样式的值决定。...; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } ::: JS判断是否显示了省略号...知识点拓展 scrollHeight：元素内容的高度，包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。...clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。 offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
的字体样式 单行和多行文本超出省略号 负边距使用技巧 定位同时设置方位情况 相邻兄弟选择器之常用场景 outline属性的妙用技巧 隐藏滚动条或更改滚动条样式 纯CSS绘制三角形 虚线框绘制技巧 卡券效果制作...负边距使用技巧」 ❝规律: 左为负时，是左移，右为负时，是左拉。...background: white; } .scroll-container::-webkit-scrollbar-corner, /* 滚动条角落 */ .scroll-container...::-webkit-scrollbar-thumb, .scroll-container::-webkit-scrollbar-track { /*滚动条的轨道*/ border-radius...} .scroll-container::-webkit-scrollbar-thumb { /* 滚动条手柄 */ background-color: #00adb5; } <p
「列举一下效果」 设置input的placeholder的字体样式 单行和多行文本超出省略号 负边距使用技巧 定位同时设置方位情况 相邻兄弟选择器之常用场景 outline属性的妙用技巧 隐藏滚动条或更改滚动条样式...负边距使用技巧」 ❝规律: 左为负时，是左移，右为负时，是左拉。...background: white; } .scroll-container::-webkit-scrollbar-corner, /* 滚动条角落 */ .scroll-container...::-webkit-scrollbar-thumb, .scroll-container::-webkit-scrollbar-track { /*滚动条的轨道*/ border-radius..., 160, 120, 0.5); } .scroll-container::-webkit-scrollbar-thumb { /* 滚动条手柄 */ background-color
scroll 强制在水平和垂直方向添加滚动条 auto 自动在溢出方向添加可用滚动条 边框 边框实现 语法： border: width style color; 边框样式为必填项，分为...作用 border-top 设置上边框 border-bottom 设置下边框 border-left 设置左边框 border-right 设置右边框 网页三角标制作 元素设置宽高为0 统一设置四个方向透明边框...左右 三个值 表示分别设置上右下，左右保持一致 注：顺时针取值 内边距 属性：padding 作用：调整元素内容框与边框之间的距离 取值： 20px; 一个值表示统一设置上右下左 20px...30px; 两个值表示分别设置(上下) (左右) 20px 30px 40px; 三个值表示分别设置上右下，左右保持一致 20px 30px 40px 50px; 表示分别设置上右下左 单方向内边距...距参照物的顶部 right 距参照物的右侧 bottom 距参照物的底部 left 距参照物的左侧 分类 relative 相对定位：元素设置相对定位,可参照元素在文档中的原始位置进行偏移
属性 A. visible 默认值，溢出可见 B. hidden 溢出隐藏 C. scroll 滚动，默认显示滚动条，内容溢出时，滚动条可用 D. auto 自动，只有在溢出的方向才会显示滚动条 8....框模型(Box Model) ，框模型定义了元素框处理元素内容尺寸、内边距、边框和外边距的一种方式 ,元素一旦增加框模型对应属性的属性，那么实际的占地区域会发生改变元素的实际宽度=左右外边距 + 左右边框...左右外边距 v3 下外边距 margin:v1 v2 v3 v4; v1 上外边距 v2 右外边距 v3 下外边距 v4 左外边距 margin-方向:value；方向：top/right/bottom...v4；v1 上内边距 v2 右内边距 v3 下内边距 v4 左内边距 padding-方向:值；方向：top/right/bottom/left ①....语法:float:value ①. none 默认值，即无任何浮动 ②. left 元素左浮动，停靠在父元素的左边或其他已浮动元素的右边上 ③. right 元素右浮动，停靠在父元素的右边或其他已浮动元素的左边上
安装两列布局的传统做法，我们可以想到两列都浮动、左栏浮动+右栏左边距以及负边距等很多方案。...但是再对比一下需求，右栏的特性否决了两栏都浮动的方式，左栏的宽度不固定否定了负边距的方式。...左栏浮动加右栏左边距将会遭遇[cref bfc-element-margin-bug-in-webkit webkit核心浏览器的BFC元素边距bug]。...* img要左浮动，img和txt之间的距离只能加在img上（原因之前说了，webkit的bug）。 * txt要创建BFC，要清除浮动（这两个问题在模拟zoom的时候一并解决了）。...block; height: 0; visibility: hidden; } .img-txt:after {clear: both;} .img-txt {zoom: 1;} 然后是img的左浮动加右边距
;说明:/*分别为上右下左内边距*/〓外边距属性〓margin:10px 5px 15px 20px;说明:/*分别为上右下左外边距*/〓文本属性〓文本对齐 text-align: ①center;说明...left:把文本排列到左边，默认值：由浏览器决定，right 把文本排列到右边，justify 实现两端对齐文本效果。...正数值控制左边，负数值控制右边)*/③2px/*垂直偏移值(即控制上下阴影。.../ padding: 1px 1px 1px 1px; /*文件列表区内边距，分别为上右下左*/ margin: 1px 2px 1px 2px; /*文件列表区外边距，分别为上右下左*/ max-width...p { margin: 2px 1px 2px 1px; /*与外边缘的距离，分别为上右下左外边距*/ background-color: white; /*"首页上页下页末页"区域背景色*/ color
前言 《CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins》中提到在没有floated兄弟盒子时，line box的左右边框会与所属的containing...而Viewport的尺寸固定为 浏览器的工作区域尺寸 - 垂直/水平滚动条尺寸 通过JS获取Viewport的高宽 ;(function(exports){ var doc = document,...，拖动滚动条后，Viewport所产生的containing block也会跟随移动，从而保持与Viewport重合。...如果 'direction' 是 'ltr'，包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ，右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding...如果 'direction' 是 'rtl'，包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding
这是因为 Bootstrap 给 .table 设置了一个下边距 margin-bottom: 20px; ，将其改为 -1px 就可以了。 ?...可以参照 CSS滚动条选择器设置滚动条的样式，如下。 以下伪元素选择器可以修改 webkit 浏览器的滚动条样式： ::-webkit-scrollbar 整个滚动条....::-webkit-scrollbar-button 滚动条上的按钮（上下箭头） ::-webkit-scrollbar-thumb 滚动条上的滚动滑块 ::-webkit-scrollbar-track...滚动条轨道 ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分...::-webkit-resizer 某些元素的corner部分的部分样式（如：textarea的可拖动按钮） 语法： ::-webkit-scrollbar { styles here } 例子： 直接隐藏滚动条
和 外边距的 一种方式 有框模型的属性介入到元素中的时候，元素实际占地面积就会发生改变 元素实际占地宽度=左右外边距+左右边框+左右内边距 + width;...v4; 上 右 下 左 3、页面中具备默认外边距的元素 在页面中...页面中 元素边框内 的尺寸计算方式 元素边框内宽度=左右边框+左右内边距+width div{...元素边框内宽度=左右边框+左右内边距+width 元素边框内高度=上下边框+上下内边距+height 2、border-box...固定,背景图不会随着滚动条的滚动而改变位置 6、背景图片定位/位置 作用：改变背景图像在元素中的默认位置 属性：background-position
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
