css基础
关注
分享
扫一扫
文章平均质量分 56
iteye_2245
这个作者很懒，什么都没留下…
展开
-
css 基础之 em 与 rem
em 和 rem 都是相对单位，由浏览器转换为 px rem 是取决于页面根元素的字体大小，即 html html { font-size: 16px; padding: 10rem; // 10 * 16 = 160px} em 是将 em 值乘以使用 em 单位的元素字体大小。 .test { ...原创 2017-02-27 14:03:22 · 250 阅读 · 0 评论 -
热门前端面试题之link与import方式的区别
写css规范的文档的时候，很多人都会推荐css文件的引入方式尽量采用：<link>标签的方式，而不是@import的方式。 今天我们来简单地看看他们的差异到底在哪方面： 1、link属于html标签，@import是css提供的一种方式，当前link标签能做的不仅是导入css文件的功能 2、dom操作样式的时候控制不了@import 3、加载顺序上：@i...2012-05-11 13:58:59 · 215 阅读 · 0 评论 -
css之ime-mode
css之ime-mode ---------- 设置或检索是否允许用户激活输入法IME状态，试用IE <input type="text" style="ime-mode:auto"/> 可能的值： auto 默认值，不影响IMEactive 激活本地语言输入法inactive ...2012-08-02 16:21:23 · 93 阅读 · 0 评论 -
css vertical-align属性
CSS vertical-align 属性 -------设置元素的垂直对齐方式。 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值所有浏览器都支持vertical-align属性默认值：baseline继承性：no版本 ：CSS1JavaScript语法： object.style.verticalAlig...2012-03-25 11:30:13 · 103 阅读 · 0 评论 -
css之writing-mode
简单记录，个人学习。 writing-mode:lr-tb 左-右，上-下tb-rl 上-下，左-右设置或检索对象的内容块固有的书写方向。西方语言是左-右，上-下的书写方式。亚洲语法相反。当此属性值发生变化时候，text-align和vertical-align属性的作用也会发送变化。扩展资料：1、http://www.divcss5.co...2011-12-04 20:06:51 · 134 阅读 · 0 评论 -
white-space
本文来自w3school：http://www.w3school.com.cn/css/pr_text_white-space.asp 个人简单记录，学习参考，感谢！ white-space-----设置如何处理元素内的空白。 默认值：normal继承性：yes版本：CSS1JavaScript 语法：object.st...2011-11-20 17:21:40 · 88 阅读 · 0 评论 -
css子元素选择器
CSS 子元素选择器 ----------作为某元素子元素的元素。 /*h1元素子元素的strong元素*/h1 > strong{ color:red;} 子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。/*下列写法都是可以的*/h1 > strongh1>...2012-02-17 13:27:48 · 261 阅读 · 0 评论 -
css后代选择器
CSS 后代选择器 -----------可以选择作为某元素后代的元素，又称为包含选择器。 /*作为h1元素后代的em元素*/h1 em{color:blue;} 扩展阅读： 1、http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_descendant_1 w3sc...2012-02-16 20:47:26 · 96 阅读 · 0 评论 -
css伪类
CSS 伪类 (Pseudo-classes) ----- 向某些选择器添加特殊的效果。 1、锚伪类 /*链接的不同状态都可以不同的方式显示包含活动状态，已被访问状态，未被访问状态和鼠标悬停状态*/a:link{color:#ff0000} /*未访问的链接*/a:visited{color:#00ff00} /*已访问的链接...2012-02-16 20:46:15 · 148 阅读 · 0 评论 -
css相邻兄弟选择器
CSS 相邻兄弟选择器 --------------可选择紧接在另一元素后的元素，且两者有相同的父元素。 /*选择紧接在h1元素后出现的段落h1和p有共同的父元素*/h1 + p{margin-top:2px;} 注释： 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符 相邻兄弟结合符旁边可以有空白符 ...2012-02-14 14:56:33 · 534 阅读 · 0 评论 -
CSSStyleSheet对象
CSSStyleSheet对象 ---------表示一个单独的CSS样式表。 CSS样式表由CSS规则组成，可通过CSSRule对象操作每条规则。CSSStyleSheet对象允许您查询、插入和删除样式表规则使用document.styleSheets属性获得给定文档的样式表列表CSSStyleSheet对象的属性：cssRules...2012-02-14 10:24:54 · 617 阅读 · 0 评论 -
浅谈css3的书写顺序
前言： 最近一直在写css规范的文档，关于css3的一些规则，大家多有一些抱怨，很多的私有属性如-webkit|-moz等，但是部分写法中对应规则的顺序到底是有没有关系，前后关系会不会带来一些问题？ 正文： 我们先直接来看一个demo /*标准在前，私有在后*/.test-no{ border-radius:30px 10px; -...2012-05-11 16:04:28 · 168 阅读 · 0 评论 -
整理部分IE hack
前面也简单地写过一篇简单整理IE的hack,但是那篇只是简单地区分了一下IE6|7|8 这篇开始主要加入IE各个版本一些问题的处理： 1、IE 8： 单独IE8识别的：在规则的值后面加上\0/ .test{ background:#fff\0/;} th不会自动 继承上级元素的text-align ...原创 2012-05-19 19:25:35 · 89 阅读 · 0 评论 -
css基础之text-decoration
前言： 先看一个app的效果图： 打钩操作以后，文字对应会有一个这样的效果。 正文： text-decoration ---------- 规定添加到文本的样式。 注释： 所有浏览器都支持text-dec...原创 2013-02-26 16:19:04 · 205 阅读 · 0 评论 -
css伪元素之:first-letter
:first-letter ------- 向文本的第一个字母添加特殊样式。 下列属性应用于:first-letter伪元素： fontcolorbackgroundmarginpaddingbordertext-decorationvertical-align(仅当float为none的时候)tex...原创 2013-01-15 14:11:06 · 183 阅读 · 0 评论 -
css伪元素之:first-line
:first-line ------- 向文本的第一行添加特殊样式。（只能与块级元素关联） 下列属性应用于:first-line伪元素： fontcolorbackgroundword-spacingletter-spacingtext-decorationvertical-aligntext-trans...原创 2013-01-15 14:10:55 · 168 阅读 · 0 评论 -
css伪元素之:after
:after ---------- 伪元素在元素之后添加内容 在元素内容的最后面插入生成内容，默认伪元素是行内元素，但是可以设置display所有主流浏览器都支持:after 实例： .test:before{ content:'{'} 扩展阅读： ...原创 2013-01-14 15:40:59 · 410 阅读 · 0 评论 -
css伪元素之:before
:before ---------- 伪元素在元素之前添加内容 在元素内容的最前面插入生成内容，默认伪元素是行内元素，但是可以设置display所有主流浏览器都支持:before 实例： .test:before{ content:'{'} 扩展阅读： ...原创 2013-01-14 15:32:34 · 350 阅读 · 0 评论 -
css之counter-increment
CSS 之 counter-increment 设置某个选择器每次出现的计数器增量，默认增量为1http://www.w3school.com.cn/cssref/pr_gen_counter-increment.asp原创 2014-03-31 18:40:39 · 121 阅读 · 0 评论 -
css基础之clip属性
本文介绍一下css的clip属性： 裁剪绝对定位的元素允许规定元素的可见尺寸http://www.w3school.com.cn/css/pr_pos_clip.asphttp://www.zhangxinxu.com/study/201103/css-rect-demo.html...原创 2014-03-06 22:03:23 · 156 阅读 · 0 评论 -
css之initial
本文来自：https://developer.mozilla.org/en-US/docs/Web/CSS/initial https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value原创 2013-11-02 21:04:20 · 231 阅读 · 0 评论 -
position为relative的限制
本文主要来自：http://www.planabc.net/2008/08/13/limited_use_of_position_relative/ 下面的文案注释来自：http://www.w3.org/TR/2006/WD-CSS21-20061106/visuren.html#propdef-position relativeThe bo...原创 2013-10-25 15:39:14 · 234 阅读 · 0 评论 -
CSS unicode-bidi属性
CSS unicode-bidi属性 unicode-bidi属性设置文本的方向 可能的值： normal 元素不会对双向算法打开附加的一层嵌套。 对行内元素，顺序的隐式重排会跨元素边界进行。embed 如果是一个行内元素，这个值对于双向算法会打开附加的一层嵌套。这个嵌套的方向由directi...2012-05-27 17:27:23 · 234 阅读 · 0 评论 -
border-color
CSS border-color属性 -----设置四条边框的颜色。 .test{border-color:red green blue pink;} 上边框是红色右边框是绿色下边框是蓝色左边框是粉色 浏览器支持： 所有浏览器都支持border-color属性。 可能的值...2012-02-13 10:39:30 · 144 阅读 · 0 评论 -
css属性值媒体类型
其实大家从style标签和link标签等多有一个media的属性。 link标签的这个media属性规定被链接文档将显示在什么设备上。style标签的这个media属性规定为样式表下面是w3.org里面介绍的10种媒体类型。all --所有媒体类型braille --盲人触觉反馈设备embossed --...2012-02-13 10:38:59 · 141 阅读 · 0 评论 -
display:none与visibility的区别
多可以用于页面元素的隐藏。 但是visibility:hidden会占地方。 补充一下visibility的可能的值 visible 默认值。元素可见hidden 元素不可见collapse 当在表格元素中使用时，此值可删除一行或一列，但是不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素，会呈现”hidden“i...2011-10-18 19:05:18 · 142 阅读 · 0 评论 -
css的direction属性
关于这个属性，今天在http://static.youku.com/v1.0.0704/index/css/youku.css 优酷上面看视频的时候无意看到的，觉得还是说一下，虽然可能有的同学觉得不常用了。 /*element*/html{direction:ltr;*overflow-y:scroll;} direction 属性规定文本的方向/书写方向,以及针对...2011-10-11 15:58:58 · 248 阅读 · 0 评论 -
css的behavior属性
简单地记录一下 behavior:url(url) | url(#objID) | url(#default#behaviorName) url(url) 使用url地址指定DHTML行为控件（.htc）url(#objID) 使用二进制实现Active控件的行为。objID是object对象的idurl(#default#behaviorName)...2011-10-11 13:29:04 · 195 阅读 · 0 评论 -
css之caption-side属性
CSS caption-side属性 ----设置表格标题的位置。 默认值：top继承性：yes版本：CSS2JavaScript 语法：object.style.captionSide="bottom" caption{caption-side:bottom;} 浏览器支持： 如果!...原创 2012-01-14 21:31:28 · 244 阅读 · 0 评论 -
css之text-transform
CSS text-transform属性 -------------控制文本的大小写。 默认值：none继承性：yes版本：CSS1JavaScript 语法：object.style.textTransform="uppercase 浏览器支持： 所有浏览器都支持text-transform属性。...2012-01-14 18:35:37 · 139 阅读 · 0 评论 -
css之background-attachment属性
CSS background-attachment属性 ------设置背景图像是否固定或者随着页面的其余部分滚动。 默认值：scroll继承性：no版本：CSS1JavaScript 语法：object.style.backgroundAttachment="fixed" 可能的值值描述sc...原创 2012-01-13 18:06:07 · 384 阅读 · 0 评论 -
css之clear
CSS clear 属性 --定义和用法clear 属性规定元素的哪一侧不允许其他浮动元素。说明：在CSS1和CSS2中，为清除元素增加外边距实现的。在CSS2.1中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。可能的值值描述left在左侧不允许浮动元素。right在右侧不允许浮动元素。...原创 2012-01-12 21:42:07 · 100 阅读 · 0 评论 -
css之list-style属性
CSS list-style 属性 定义和用法list-style 简写属性在一个声明中设置所有的列表属性。可以按顺序设置如下属性： list-style-typelist-style-positionlist-style-image1.CSS list-style-type 属性 -----------...原创 2012-01-07 14:21:27 · 337 阅读 · 0 评论 -
css之table-layout
CSS table-layout 属性-----------------用来显示表格单位格、行、列的算法规则。 固定表格布局：---------相比自动表格布局，允许浏览器更快地对表格进行布局。---------水平布局仅取决于表格宽度、列宽度、表格边框宽度、单位格间距，而与单元格内容无关。 自动表格布局：--------...2011-12-14 17:44:28 · 199 阅读 · 0 评论 -
css之min-width属性
CSS min-width 属性 ---------------------设置元素的最小宽度---------------------该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。 默认值：none继承性：no版本：CSS2JavaScript 语法：object....原创 2011-12-10 21:21:04 · 224 阅读 · 0 评论 -
letter-spacing属性
letter-spacing属性增加或减少了字符间的空白（字符间距）。 默认值：normal继承性：yes版本：CSS1JavaScript 语法：object.style.letterSpacing="3p 值描述normal默认。规定字符间没有额外的空间。length定义字符间...2011-10-25 12:45:38 · 386 阅读 · 0 评论 -
各大著名公司的一道css面试题
前言： 其实这道题很久之前了，但是有同学最近再次遇到了就说说吧，简单记录一下。 虽然个人觉得过于考试化，但是还是很能看出你的css功底和广度（遇到查过记录过） 题目： 使用CSS实现未知尺寸的图片在已知容器中水平和垂直居中。 html <div class="container"> <img src=...2011-10-25 17:08:02 · 138 阅读 · 0 评论 -
css之filter
最近在整理bootstrap的样式库的时候，发现下列代码。 .btn{ filter:proid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);} 颜色变化： startColorStr:...2012-02-12 14:18:20 · 104 阅读 · 0 评论 -
css之content属性
CSS content 属性 -------与:before及:after伪元素配合使用，来插入生成内容。 该属性用于定义元素之前或之后放置的生成内容。 默认地往往是行内内容，不过该内容创建的框类型可以用属性display控制。默认值：normal继承性：no版本：CSS2JavaScript 语法：...2012-02-09 11:39:15 · 124 阅读 · 0 评论 -
css之cursor
CSS cursor 属性 -----------规定要显示的光标的类型（形状） 默认值：auto继承性：yes版本：CSS2JavaScript 语法：object.style.cursor="crosshair 所有主流浏览器都支持cursor属性Opera 9.3 和Safar...2012-02-09 11:03:40 · 129 阅读 · 0 评论