随笔分类 -  CSS

包括css的属性相关知识点以及使用css3实现的动画的总结
摘要:先来看w3c的background-size的几个值: background-size:cover; 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 background-size:contain; 把图像图像扩展至最大尺寸,以使其宽度和高度完 阅读全文
posted @ 2017-06-20 16:16 木西梧 阅读(3299) 评论(0) 推荐(1) 编辑
摘要:众所周知,ie6、7的hack直接用*即可,但是ie8的话就比较麻烦,在做半透明背景的时候,为了兼容ie6、7,可以为其设置纯色,但是ie8也同样不支持半透明,需要单独为它设置纯色背景。下面的兼容代码,经测试可用。 阅读全文
posted @ 2017-05-06 12:36 木西梧 阅读(626) 评论(0) 推荐(0) 编辑
摘要:最近在项目中遇到不固定宽高的图片要水平垂直居中的情况,发现垂直居中存在兼容性问题,下面收集了一些方法,可根据需要权衡使用。 1. 背景法(兼容性好,简单,但不利于动态导入的图片) html: css: 2. 图片外面用个p标签,通过设置line-height使图片垂直居中(兼容性较好) html: 阅读全文
posted @ 2017-01-18 10:50 木西梧 阅读(4693) 评论(0) 推荐(0) 编辑
摘要:阅读张鑫旭的文章才明白: 浮动的本来只是让文字环绕图片显示,其他所有用浮动实现的效果其实都不应是浮动应该做的事情,所以网页布局方面慎用float。具体前因后果我就不多说了,有兴趣的可以前往其博客: http://www.zhangxinxu.com/wordpress/2010/01/css-flo 阅读全文
posted @ 2016-12-22 16:33 木西梧 阅读(345) 评论(0) 推荐(0) 编辑
摘要:有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐。其实实现段落的两端对齐,只需要设置两个css 样式即可。 text-justify基本语法 语法:text-justify : auto |inter-word | newspaper | distri 阅读全文
posted @ 2016-10-26 11:12 木西梧 阅读(19870) 评论(0) 推荐(0) 编辑
摘要:一、语法: background-position-x : length | left | center | right background-position-y : length | left | center | right 二、取值: length :百分数 | 由浮点数字和单位标识符组成的 阅读全文
posted @ 2016-08-25 13:26 木西梧 阅读(5423) 评论(0) 推荐(0) 编辑
摘要:平时,用的方法即第一种方法是设置left,top值均为50%,同时margin-left设置为绝对定位元素width的一半取负,margin-top设为其height的一半取负。 例如,绝对定位元素的width:100px;height:100px; 代码如下: 这是比较常用的一个方法,今天介绍一个 阅读全文
posted @ 2016-08-19 14:01 木西梧 阅读(29684) 评论(2) 推荐(1) 编辑
摘要:1.只在webkit内核的浏览器上有效果 2.语法: -webkit-box-reflect: <direction> <offset> <mask-box-image> direction: 倒影偏移方向,有above、below、left和right四个值; offset: 倒影偏移原元素边框边 阅读全文
posted @ 2016-08-04 15:52 木西梧 阅读(302) 评论(0) 推荐(0) 编辑
摘要:工作中网页中有一个扇形的导航菜单,以前没有接触过,参考了http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html以及原网站http://tympanus.net/codrops/2013/0 阅读全文
posted @ 2016-07-27 14:58 木西梧 阅读(9966) 评论(0) 推荐(0) 编辑
摘要:一、原理: 使用label与input来实现,label和复选框是有关联的,label的for属性对应的是input的id,所以点击label时,它就会勾选或取消复选框。 如果我们需要让菜单默认显示,只需要将input的checked属性设为true即可。 因为用到了css3的:checked属性, 阅读全文
posted @ 2016-06-16 16:57 木西梧 阅读(4138) 评论(0) 推荐(0) 编辑
摘要:平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现。基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的颜色,后面的三角形border颜色与包裹它们的div背景色一致,然后设置前面三角形的left值比后者 阅读全文
posted @ 2016-05-13 10:48 木西梧 阅读(74309) 评论(0) 推荐(2) 编辑
摘要:每次使用box-shadow,都要查阅资料才能实现对应的效果,现在总结一下,方便以后查看。 一、语法: E {box-shadow: inset x-offset y-offset blur-radius spread-radius color}; E {box-shadow: 投影方式 X轴偏移量 阅读全文
posted @ 2016-05-11 11:24 木西梧 阅读(25740) 评论(1) 推荐(7) 编辑
摘要:writing-mode这个CSS属性以前是IE的独有属性,IE5.5浏览器就已经支持了。在很长一段时间里,FireFox, Chrome这些现代浏览器都不支持writing-mode,各大现代浏览器纷纷对writing-mode实现了更加标准的支持(主要得益于FireFox浏览器的积极跟进)。 1 阅读全文
posted @ 2016-05-04 17:04 木西梧 阅读(4863) 评论(0) 推荐(0) 编辑
摘要:1 前言 CSS作为网页样式的描述语言,在百度一直有着广泛的应用。本文档的目标是使CSS代码风格保持一致,容易被理解和被维护。 虽然本文档是针对CSS设计的,但是在使用各种CSS的预编译器(如less、sass、stylus等)时,适用的部分也应尽量遵循本文档的约定。 2 代码风格 2.1 文件 [ 阅读全文
posted @ 2016-03-23 13:57 木西梧 阅读(290) 评论(0) 推荐(0) 编辑
摘要:什么是浮动? CSS中的一些元素是块级元素,表示它们会自动另起一行。 举个例子,如果你创建了两个段落,每个段落都只有一个单词。这两个单词不会靠在一起,而是会各自占据一行。 另一些元素是行内元素,表示它们和前面的内容位于相同的一行。 举个例子,<a>可以出现在另一个元素中,比如<p>,这不会产生多余的 阅读全文
posted @ 2016-03-22 10:28 木西梧 阅读(772) 评论(1) 推荐(1) 编辑
摘要:一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关 阅读全文
posted @ 2015-12-19 17:56 木西梧 阅读(242) 评论(0) 推荐(0) 编辑
摘要:1.定义 BFC(Block formatting context)即"块级格式化上下文"。它是一个独⽴的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部无关。 block-level box:display 属性为 blo 阅读全文
posted @ 2015-11-08 12:31 木西梧 阅读(168) 评论(0) 推荐(0) 编辑
摘要:#cssborder制作小三角形 1.原理是CSS盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等. – 调整宽度大小可以调节三角形形状. 2 阅读全文
posted @ 2015-09-05 16:14 木西梧 阅读(1039) 评论(0) 推荐(0) 编辑
摘要:#CSS中水平居中和垂直居中的方法 一、 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本、图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定宽块级元素 可以通过设置“左右margin”值为“auto”来实现居中 常用的有 `margin:0 阅读全文
posted @ 2015-08-29 10:09 木西梧 阅读(2281) 评论(0) 推荐(0) 编辑
摘要:样式表的三种方法 内联样式表 <h1 style="color:red">text</h1> 优先级最高,但不推荐使用 嵌入式样式表 <style type="text/css">样式定义</style> 外部样式表 <link rel="stylesheet" type="text/css" hr 阅读全文
posted @ 2015-08-23 23:13 木西梧 阅读(155) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示