标签搜索
搜索到
6
篇与
的结果
-
CSS常用片段 清除浮动.clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { zoom: 1; }垂直水平居中绝对定位方式且已知宽高position: absolute; top: 50%; left: 50%; margin-top: -3em; margin-left: -7em; width: 14em; height: 6em;绝对定位 ＋ 未知宽高 ＋ translateposition: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); //需要补充浏览器前缀flex 轻松搞定水平垂直居中(未知宽高)display: flex; align-items: center; justify-content: center;利用绝对定位宽高拉升原理，中心居中元素 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;利用相对定位于 CSS3 使元素垂直居中 position: relative; top: 50%; -webkit-transform: -webkit-translateY(-50%); -moz-transform: -moz-translateY(-50%); -o-transform: -o-translateY(-50%); transform: translateY(-50%);文本末尾添加省略号宽度固定，适合单行显示...overflow: hidden; text-overflow: ellipsis; white-space: nowrap;宽度不固定，适合多行以及移动端显示overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;简洁 loading 效果.loading:after { display: inline-block; overflow: hidden; vertical-align: bottom; content: "\2026"; -webkit-animation: ellipsis 2s infinite; } // 动画部分 @-webkit-keyframes ellipsis { from { width: 2px; } to { width: 15px; } }自定义文本选中样式// 注意只能修改这两个属性 字体颜色 选中背景颜色 element::selection { color: green; background-color: pink; }顶角贴纸效果<div class="wrap"> <div class="ribbon"> <a href="#">Fork me on GitHub</a> </div> </div> /* 外层容器几本设置 */ .wrap { width: 160px; height: 160px; overflow: hidden; position: relative; background-color: #f3f3f3; } .ribbon { background-color: #a00; overflow: hidden; white-space: nowrap; position: absolute; /* shadom */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; /* rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* position */ left: -50px; top: 40px; } .ribbon a { border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; /* shadow */ text-shadow: 0 0 5px #444; }input 占位符input::-webkit-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; } input::-moz-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; } input::-ms-input-placeholder { color: green; background-color: #f9f7f7; font-size: 14px; }移动端可点击元素去处默认边框-webkit-tap-highlight-color: rgba(255, 255, 255, 0);首字下沉element:first-letter { float: left; color: green; font-size: 30px; }鼠标手型a[href], input[type="submit"], input[type="image"], input[type="button"], label[for], select, button { cursor: pointer; }屏蔽 Webkit 移动浏览器中元素高亮效果在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，使用以下代码屏蔽这种样式-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;去默认样式//移除常用标签的浏览器默认的 margin 和 padding body, p, h1, h2, h3, h4, h5, h6, dl, dd, ul, ol, th, td, button, figure, input, textarea, form { margin: 0; padding: 0; } //统一 input、select、textarea 宽度 input, select, textarea { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } table { /*table 相邻单元格的边框间的距离设置为 0*/ border-spacing: 0; /*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/ border-collapse: collapse; } //移除浏览器部分元素的默认边框 img, input, button, textarea { border: none; -webkit-appearance: none; } input { /*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/ text-align: inherit; } textarea { /*textarea 默认不可以放缩*/ resize: none; } //取消元素 outline 样式 a, h1, h2, h3, h4, h5, h6, input, select, button, option, textarea, optgroup { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; color: inherit; outline: none; } //取消超链接元素的默认文字装 a { text-decoration: none; } ol, ul { /*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/ list-style: none; } button, input[type="submit"], input[type="button"] { /*鼠标经过是「小手」形状表示可点击*/ cursor: pointer; } input::-moz-focus-inner { /*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/ padding: 0; border: 0; } //取消部分浏览器数字输入控件的操作按钮 input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }chrome 内核 浏览器 position: fixed 防止抖动position: fixed; -webkit-transform: translateZ(0);强制换行/自动换行/强制不换行/* 强制不换行 */ white-space: nowrap; /* 自动换行 */ word-wrap: break-word; word-break: normal; /* 强制英文单词断行 */ word-break: break-all; -
CSS动画 一. transform转换transform-origin(x,y)基位translate(x,y)拉伸scale(x,y)缩放rotate(Xdeg)旋转skew(xdeg,ydeg)倾斜二. transition过度transition-property 指定CSS属性的name，transition效果(all全部属性)transition-duration transition效果需要指定多少秒或毫秒才能完成transition-timing-function 指定transition效果的转速曲线(默认ease)transition-delay 定义transition效果延迟的时间三. @keyframes逐帧动画0-100%from（与 0% 相同）to（与 100% 相同）四. animation动画animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function 规定动画的速度曲线。(ease)animation-delay 规定在动画开始之前的延迟。animation-iteration-count 规定动画应该播放的次数。(infinite无限)animation-direction 规定是否应该轮流反向播放动画。五. box-shadow盒子阴影h-shadow 必需的。水平阴影的位置。允许负值v-shadow 必需的。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的大小color 可选。阴影的颜色inset 可选。从外层的阴影（开始时）改变阴影内侧阴影六. text-shadow文字阴影h-shadow 必需。水平阴影的位置。允许负值。v-shadow 必需。垂直阴影的位置。允许负值。blur 可选。模糊的距离。color 可选。阴影的颜色。参阅 CSS 颜色值。
-
css笔记一 在编写样式中经常遇见, 尺寸的计算.css3中提供了一个计算函数calc(),它支持(+ - * /).如:top: calc(50% - 30%);注意的是在运算符前后都得添加一个空格,否则无效.(支持IE9及以上)去掉input[type="number"]的默认样式input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 利用媒体查询分辨横竖屏@media screen and (orientation:portrait) { /* css[竖向定义样式] */ ...... } @media screen and (orientation:landscape) { /* css[横向定义样式] */ ...... }去手机端点击出现的高亮框-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓，4.0以下 */ css居中的方式利用伪类使元素居中div:after{ content:""; display:inline-block; height:100%; vertical-align: middle; } 利用定位//这里要使用到css的子绝父相 div{ position:relative; top:0; left:0; right:0; bottom:0; margin:auto; }
-
css滚动条样式 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; } 详细设置定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。[css] view plain copy :horizontal //horizontal伪类适用于任何水平方向上的滚动条 :vertical //vertical伪类适用于任何垂直方向的滚动条 :decrement //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮 :increment //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮 :start //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面 :end //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面 :double-button //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。 :single-button //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。 :no-button no-button伪类表示轨道结束的位置没有按钮。 :corner-present //corner-present伪类表示滚动条的角落是否存在。 :window-inactive //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。 ::-webkit-scrollbar-track-piece:start { /*滚动条上半边或左半边*/ } ::-webkit-scrollbar-thumb:window-inactive { /*当焦点不在当前区域滑块的状态*/ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /*当鼠标在水平滚动条下面的按钮上的状态*/ }原文地址：http://www.xuanfengge.com/css3-webkit-scrollbar.html
-
CSS定位方式 display属性每一个元素都有默认的display属性，使用最多的是block, inline和inline-block，不常用的是table-cell。根据display属性，我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是:block元素可以设置宽度，独占一行。inline元素宽度由内容决定，与其他元素并列在一行。常见的block属性元素有：div, h1-h6, ul, li, ol, dl, dd, dt。常见的inline属性元素有: span, a, em。block宽高可以自行设置，默认宽度由父容器决定，默认高度有内容决定。自己独占一行。inline宽度和高度都有内容决定，与其他元素共占一行。inline-block宽度可以自行设置，类似block，但是与其他元素共占一行，类似inline。长用于设置垂直居中。table-cell此属性指让标签元素以表格单元格的形式呈现，单元格有一些比较特殊的属性，可以设置元素的垂直居中等。position属性元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为static。它其实是未被设置定位的。元素如果被定位了，那么它的top,left,bottom,right值就会生效，能设置定位的属性是relative,absolute和fixed。需要注意的另一点是被定位的元素层次(z-index)会得到提高。relative（相对定位）设置了相对定位之后，通过修改top,left,bottom,right值，元素会在自身文档流所在位置上被移动，其他的元素则不会调整位置来弥补它偏离后剩下的空隙。absolute（绝对定位）设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性（position值不为static）的元素。且如果元素为块级元素（display属性值为block)，那么它的宽度也会由内容撑开。因为：默认文档流中块级元素如果没有设置宽度属性，会自动填满整行。fixed(固定定位)设置了固定定位之后，元素相对的偏移的参考是可视窗口，即使页面滚动，元素仍然会在固定位置。
-
CSS3新增特性 @Font-face 特性加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。Word-wrap & Text-overflow 样式Word-wrap设置word-wrap: break-word的话，在单词换行的情况下，可保持单词的完整性。Text-overflow它与 word-wrap 是协同工作的，word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容器的边界时如何显示, 我们在父容器设置overflow: hidden, 然后设置“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。"clip"表示直接切割，"ellipsis"表示用省略号代替。文字渲染（Text-decoration）Text-fill-color: 文字内部填充颜色Text-stroke-color: 文字边界填充颜色Text-stroke-width: 文字边界宽度CSS3 的多列布局（multi-column layout）Column-count：表示布局几列。Column-rule：表示列与列之间的间隔条的样式Column-gap：表示列于列之间的间隔边框和颜色（color, border）支持rgba和hsl表示颜色, 支持圆角，阴影等效果。CSS3 的渐变效果（Gradient）支持线性渐变和径向渐变。CSS3 的阴影（Shadow）和反射（Reflect）效果阴影效果，阴影效果既可用于普通元素，也可用于文字。CSS3 的背景效果“Background Clip”，该属确定背景画区“Background Origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。“Background Size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。“Background Break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。多背景图片支持CSS3 的盒子模型display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal;“display: -webkit-box; display: -moz-box;”，它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”，他表示水平排列的盒子模型。如果配合元素的box-flex属性：.flex { -webkit-box-flex: 1; -moz-box-flex: 1; } .flex2 { -webkit-box-flex: 2; -moz-box-flex: 2; }水平方向设下的宽度，就可以按照1:2的比例关系自动去计算了。CSS3 的 Transitions, Transforms 和 AnimationTransitionstransition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡transition-duration：用于指定这个过渡的持续时间transition-delay：用于制定延迟过渡的时间transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezierTransforms指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。Animation @-webkit-keyframes anim1 { 0% { Opacity: 0; Font-size: 12px; } 100% { Opacity: 1; Font-size: 24px; } } .anim1Div { -webkit-animation-name: anim1 ; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; }
