css
关注
分享
扫一扫
石倩蓉
一名优秀的Web前端，应该是Write less，do more。
展开
-
网页设计采用div+css的优点和缺点
优点：1.一般div+css页面都是将html和css文件分开，也就是说一个网页的内容和表现形式的分离，这样更利于后期整个网站的维护，一般只要修改css文件中的一个css属性就可以修改页面的样式，例如背景颜色，字体等，这是table布局不具有的2，可以提高网页的打开速度，这是特性决定了他们的性能，因为浏览器打开网页的时候是同时下载html和css的，这样可以边加载边原创 2015-05-11 21:44:13 · 1726 阅读 · 0 评论 -
伪类after
after顾名思义是在元素后面的意思，实质是在元素之后添加内容。 这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。 所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。原创 2015-08-02 21:19:53 · 856 阅读 · 0 评论 -
盒子模型
css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。标准盒子模型IE盒子模型通过上面两张图可以看出，两种盒子模型都包括padding，margin，border，content，但是ie盒子模型的content包括border和padding。一个例子一个盒子的 margin 为 20px，border 为 1px，paddin原创 2015-07-17 09:41:18 · 429 阅读 · 0 评论 -
滑动门技术
1.利用北京图像的可层叠性，并允许他们在彼此之间进行滑动，以创造出一些效果2.扩展性要求高，图片比较大的，用三层嵌套 扩展性要求低，图片比较小的，用两层嵌套原创 2015-09-03 19:01:04 · 533 阅读 · 0 评论 -
定位
position:static/relative/absolute/fixed1.static:默认值，元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行内框，置于其父元素中。2.relative:相对于元素原来的位置通过top/bottom/left/right定位，元素仍保持未定位前的形状，它原本所占的空间仍然保留，不脱离文档流，对原创 2015-05-06 19:58:10 · 472 阅读 · 0 评论 -
浮动特点及相关问题
CSS中的定位机制：普通流，浮动，绝对定位。1.普通流： 普通流 （normal flow)，或者称之为常规流。也是我们通常称呼的“文档流”。2.浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局，只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样。原创 2015-05-06 19:59:17 · 1565 阅读 · 0 评论 -
清除浮动的方法
清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方法（测试已通过原创 2015-08-02 21:42:53 · 790 阅读 · 0 评论 -
特殊布局
#content{position:relative;}#left{width:200px;background:red;height:500px;position:absolute;}#right{background:green;height:500px;margin-left:200px;} #left{width:200px;background:red;原创 2015-07-16 19:27:52 · 503 阅读 · 0 评论 -
css前端笔试面试题
1.position的absolute与fixed共同点与不同点相同点：（1）改变行内元素的呈现方式，display被置为block。（2）都脱离了文档流，不占据空间（3）默认会覆盖到文档流的上方不同点：（1）absolute相对于定位了的父元素,fixed相对于浏览器窗口定位，滚动页面，元素相对于浏览器窗口的位置不变2.原创 2015-07-21 19:28:28 · 891 阅读 · 0 评论 -
页面引入CSS方式：link和@importd的区别
页面中引入的方式有三种：在行内定义style属性页面头部内嵌标签通过link和@import链接样式表文件">@import css文件;@import 'css文件';@import "css文件";@import url(css文件);@import url('css文件');原创 2015-04-29 21:37:51 · 1169 阅读 · 0 评论 -
如何管理一个页面中多个虚拟窗口，实现点击任意一个将其提升到最前（用户完全可见，不会被遮挡）
<!--如何管理一个页面中多个虚拟窗口（div，通过 z-index 进行区分），实现点击任意一个将其提升到最前（用户完全可见，不会被遮挡）-->* { padding: 0; margin: 0;}#wins{position:relative;}.win{width:200px;height:100px;position:absolute;}.win1{backg原创 2015-07-16 22:03:11 · 710 阅读 · 0 评论 -
30种常用的选择器解析
你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。1. ** { margin: 0; padding: 0; }星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面转载 2015-05-11 21:43:28 · 1008 阅读 · 0 评论 -
px和em的区别
px：相对长度单位，是相对于屏幕分辨率而言的，国内推荐 这样的话再通过IE顶部菜单中的“查看-文字大小”设置已无任何作用，对字体感觉太小的浏览器而言，无疑是很不好的用户体验过程，其实这一切都可以避免，那就是使用em作为字体的单位。em：相对长度单位，相对于当前对象内文本的字体尺寸，国外使用较多。若当前行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺原创 2015-05-11 21:42:09 · 643 阅读 · 0 评论 -
display:none和visibility:hidden区别
块元素和行内元素都适用 相同：都可以用来隐藏元素不同：display在隐藏元素的时候，其占位空间（元素在文档流中的位置）也去掉了。 visiblity只是隐藏了内容，占位空间还保留visiblity:visible(默认)，hidden，inherit，collapse（当在表格中使用时，此值可删除一行或者一列，但它不会影响表格的布局。被行或列占据原创 2015-05-11 21:43:34 · 412 阅读 · 0 评论 -
CSS定义超链接样式的顺序以及四个伪类的介绍
a:link，定义正常链接的样式； a:visited，定义已访问过链接的样式； a:hover，定义鼠标悬浮在链接上时的样式； a:active，定义鼠标点击链接时的样式。 1 .定义超链接样式的顺序：link-visited-hover-active，也就是我们经常说到的LVHA原则（”爱恨原则“）2.局部定义超链接链接到脚本之家（1）a.redli原创 2015-05-05 19:00:08 · 9866 阅读 · 0 评论 -
css隐藏文字的方法
1.text-indent：-9999px;只适用于块级元素，对于行内元素不起作用2. line-height:0; font-size:0; overflow:hidden; 能完美隐藏掉background之上的字体，经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过3.最方便的是加个span，然后display:none原创 2015-05-05 19:04:02 · 548 阅读 · 0 评论 -
安装sass
ruby安装因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境sass安装安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command P原创 2015-08-09 11:06:43 · 374 阅读 · 0 评论 -
九宫格
<!--九宫格：border-width:5px，格子大小是 50px*50px，hover时边框变成红色。-->* { padding: 0; margin: 0;}/*text-align属性只能针对文本文字和img标签，对其他标签无效*/body {text-align: center;}div{ width:170px; height:170px; mar原创 2015-07-16 20:42:17 · 713 阅读 · 0 评论 -
CSS绘制三角形
Document .triangle{ width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid red; } 其中：border-left：控制原创 2015-09-02 17:25:19 · 344 阅读 · 0 评论