以前还没有注意过css的一些属性，近期发现有一些样式很好用，现在整理一遍。CSS3 动画属性@keyframes : 规定动画可以通过keyframes 改变一个块的样式当然这是要配合animation属性来结合的@keyframes mymove（mymove必须定义动画的名称在） { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} }@-moz-keyframes mymove /* Firefox */ { 0% {top:0px; background:red; width:100p...
一、BOM基本操作1、查看滚动条的滚动距离 window.pageXOffset/pageYOffset // IE8和IE8以下不兼容document.body/documentElement.scrollLeft/scrollTop // 兼容性比较混乱，用时取两个值相加，因为不可能同时存在两个同时有值封装兼容性方法，求滚动条滚动距离getScrollOffset()var getScrollOffset = function() {if (window.pageXOffset) {return {x: window.pageXOffset,y: window.pageYOffset}} else {return {x: document.bod...
字体相关的属性属性含义取值Font-family字体体系字体名称，宋体。。Font-size字体大小16pxFont-style是否倾斜Normal（正常）/italic（倾斜）Font-variant是否大写Normal/small-caps（小型大写）Font-weight字体粗细Normal（400）/bold（700）/bolder（更粗）/lighter 100（更细）/200..900（直接写）原文：https://www.cnblogs.com/ZhaoBa/p/14720720.html
一、CSS1&2中的文本属性(W3C标准)text-indentCSS1检索或设置对象中的文本的缩进letter-spacingCSS1检索或设置对象中的文字之间的间隔word-spacingCSS1检索或设置对象中的单词之间插入的空格数。vertical-alignCSS1/CSS2设置或检索对象内容的垂直对其方式white-spaceCSS1设置或检索对象内空格的处理方式directionCSS2检索或设置文本流的方向unicode-bidiCSS2用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用...
-------------------------------------------动画-------------------------------------------------animation:name(名字) duration（循环一次时间） timing-function（速度曲线） delay（延迟） iteration-count（循环次数） direction（是否反向播放）;两种方式：@keyframes myfirst{from {background: red;}to {background: yellow;}}@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background:...
text-size-adjust：auto | none | ' ref='nofollow'>取值：auto：文本大小根据设备尺寸进行调整。none：文本大小不会根据设备尺寸进行调整。' ref='nofollow'>：用百分比来指定文本大小在设备尺寸不同的情况下如何调整。说明：检索或设置移动端页面中对象文本的大小调整。 该属性只在移动设备上生效；如果你的页面没有定义meta viewport，此属性定义将无效；对应的脚本特性为textSizeAdjust。 user-select：none | text | all | el...
一般设置字体，个人都喜欢用中文，比如：font-family:"微软雅黑"；但是偶尔会出现设置以后字体显示乱码的问题 解决方法【1】：看看你的CSS文件的第一行有没有：@charset "utf-8";如果有，再另存为一次，保存的文件编码要和上面声明的一致 如果没有，就把乱码改为正确的字，保存再打开，看看还有没有乱码。 如果是在项目里面的CSS文件出现类似的问题，查看一下CSS文件设置的字体是否是utf-8，如下图 解决方法【2】： ...
下面我们从3个方面开始介绍： 1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。Css代码 transform:scale(2,2.5); 2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。 默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点Css代码 transform:scaleX(2); 3、scaleY(<number>) 元...
在上一节中提到过行内块元素（inline-block），display设置为inline-block后， 元素可以设置宽度和高度，又能以行内形式显示，即水平排列，而不是像块级元素一样 从上到下排列。这一点很好地解决了页面的布局问题。 inline-block不是唯一，还有一个float浮动属性也能够到达类似的效果。float分为左浮left和右浮right，会让元素脱离文档流，且子级浮动会导致父级高度 塌陷（父级可使用overflow：hidden属性恢复自身高度）。下面...
1.margin是什么？ margin用于控制元素周围空间的间隔，从视觉上达到空间间隔的目的。相对于前一个元素有相应的外边距。用于隔开元素与元素的。始终是透明的。 2.外边距的合并问题（参见w3school）---前提：元素出于文档流中 2.1 两个垂直外边距相遇时，在垂直方向上会发生外边距的叠加，最终的外边距等于二者的较大值； 2.2 当一个元素（没有边框和内边距）包含另外一个元素时，将在垂直方向上发生叠加； 2.3 当一个元素为空元素时...
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5<title>纯css3样式属性制作各种图形图标</title> 6</head> 7<style> 8 9/*正方形*/ 10#square{width:100px;height:100px;background:red;} 11/*长方形*/ 12...
css样式之属性操作一、文本属性 1.text-align:cnter 文本居中 2.line heigth 垂直居中 ：行高，和高度对应 3.设置图片与文本的距离：vertical-align 4.text-decoration:none 去掉超链接下划线 5.要是给a标签修改颜色的时候，就定到a标签上，用继承有时候是搞不定的 因为继承的级别是很低的，如果a标签设置了样式，是不会继承父亲的 6.首行缩进：text-indent:30px 7.font-style:oblique 或者italic....(设置字体的样式...
border： border：4px dotted red; 宽度 样式 颜色 solid(实线) border-style： -none: 无边框 -hidder: 隐藏边框 -dotted: 点组成 -dashed: 短线组成 -solid: 实线 -double: 双实线 -groove: 立体感的沟槽 -ridge: 脊形 -inset: 内嵌一个...
嵌套DIV布局，会牵扯到CSS的position属性 如果内层DIV将position属性设置为absolute，并设置left，和top等属性，还需要考虑外层DIV的position属性设置。 absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器，那就...
css文本与字体的属性文本属性text-decoration（文字装饰线）的属性text-tabsform(设置文字大小写转换)：用的比较少 text-indent 用于对第一行内容的缩进text-align用于设置元素内容在元素中的水平对齐方式（默认左对齐）字体属性font-size设置字体大小(p元素选择器会重叠掉box1,而span却会继承，因为父类的字体大小即为1em)font-family设置文字的字体可以设置多个字体，从左到右按顺序直到找到可用的字体。英文字体只适用于英文而中...