随笔分类 - CSS
css布局方面遇到的一些问题
摘要：网上已经有很多关于正六边形的CSS画法，主要是利用一个矩形和前后的两个三角形组合而成。 之前在看四维图新的官网的时候，发现了一种六边形的画法，比较适合多排六边形组合成蜂窝状的展示区域（注：四维图新现在改成了上面说的那种画法了）。 示意图： 1、HTML结构 每个li里包着.hex和.hexIn。.h
阅读全文
摘要：在一个商品展示列表中，一个需求是在一个正方形的方块中，按原比例展示商品图片，但是图片比例不定，需要居中显示，高度撑满，宽度多余的隐藏。 结构： imgOuter是固定容器，宽高都是120px； CSS代码： img居中显示的CSS，由于宽度不定，所以使用了transfrom的translate，思路
阅读全文
摘要：内容来源于W3Cschool和《图解CSS3核心技术与案例实战》 1、:target选择器 URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。 用途：我们点击锚链接跳转到页面的
阅读全文
摘要：今天遇到一个需求，画0.5px的线，查了以下资料，主要以scale方法为主。代码如下： 利用after和before的话好像只能画两条线，如果要画整个边框可以先画两倍长宽的边框在缩小到0.5。需要三条边框的话可以考虑在容器内建立三个容器表示边框线再缩小。
阅读全文
摘要：1、元素的style属性可以用来设置样式，但是不适合用来查询样式（只能查询到内联样式）。 2、CSS里的层叠指示了应用于文档中任何给定元素的样式规则是各个来源的层叠效果：Web浏览器的默认样式表、文档的样式表、每个独立的HTML元素的style属性。 3、position：absolute相对于其他
阅读全文
摘要：效果图： box1的代码： box2的代码： 伪元素中的top值和border的宽度值需要根据对话框的边框宽度计算得到。
阅读全文
摘要：HTML示例如下： 方法一： 说明：imgbox为放置图片的容器，高度和宽度可以设置为任意需要的大小，容器中的图片为绝对定位，使用top-bottom-left-right-margin使其居中。使用max-width和max-height使图片比容器大时也能正常显示。 方法二： 说明：对容器设置f
阅读全文
摘要：第十二章 列表与生成内容 1、list-style-type:cjk-ideographic生成一二三四的序号 2、不管是ul还是ol，list-style-type无法识别的值都应用为decimal。 3、list-style-image是会继承的。 4、简写：list-style：type |
阅读全文
摘要：利用css实现多级计数，比如1/1.1/1.1.1这种层层嵌套的计数，主要利用到counter-reset/counter-increment/counter/content/：before。 一、标题类多级计数，比如下面的效果： CSS代码如下： 总结说明： 1、在每一级标题的上级（父元素），比如
阅读全文
摘要：第11章 表布局 1、border-spacing，单元格边框间距，可以有两个或一个值，两个值前者表示水平间距，后者垂直间距。 2、border-collapse值为collapse时不可设置padding，为separate时可以有padding。 3、使用HTML标签的rowspan和colsp
阅读全文
摘要：第八章 padding/border/margin 1、对于只包含文本的行，能改变行间距里的属性只有line-height/font-size/vertical-align。 2、对行内非替换元素应用负外边距，左右两端可能与其他内容重叠。 3、边框绘制在元素的背景之上。（可修改） 4、要把单边属性放
阅读全文
摘要：摘自张鑫旭老师的博客—— display:none和visibility:hidden都能使元素隐藏，但是有明显区别，主要有以下三点： 1、空间占据。 使用display隐藏后，元素不占用任何空间，而visibility占据的空间仍在。 2、重排与重绘 reflow和repaint。由于displa
阅读全文
摘要：可以对元素的margin设置百分数，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。（padding同理） 如果没有为元素声明width，在这种情况下，元素框的总宽度包括外边距取决于父元素的width，
阅读全文
摘要：第六章 文本属性 1、text-indent只能作用于块级元素（如p或inline-block或block后的span/a/i等）。 2、text-align只能作用于块级元素（如p或inline-block或block后的span/a/i等）中的内联内容。 3、行间距可看作line-height减
阅读全文
摘要：第三章 1、继承的值没有特殊性，甚至连0的特殊性都没有。所以改变超链接的样式一般需要独立声明，无法通过继承改变。 2、层叠——冲突的声明通过这个层叠的过程排序，并由此确定最终的文档表示。这个过程的核心是选择器及其相关声明的特殊性以及继承机制。 第五章 1、font-weight：border。首先从
阅读全文
摘要：第三章 结构和层叠 1、确定应向一个元素应用哪些值时，用户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源，这个过程就称为层叠。、 2、特殊性。如果一个元素有两个或多个冲突的属性声明，那么有最高特殊性的声明会胜出。 对于选择器中给出的各个ID的属性值，加0，1，0，0； 类属型、
阅读全文
摘要：今天在京东首页上看到一个效果，鼠标悬浮在图片上时，图片发生移动，鼠标移走时再移回，并且有一个过渡效果。 貌似很简单，自己做做试试吧 我首先使用的是jquery在鼠标悬浮到图片上给图片增加一个类，这个类的样式使用animation实现动画效果。表面上是实现了，然后实际情况是，滚动页面时有些卡，应该是滚
阅读全文
摘要：第二章 选择器 1、在font属性中，只有一种情况下可以使用/来分隔两个特定的关键字，即元素的字体大小/行高。 2、通过把两个类选择器链接在一起，可以选择同时包含这些类名的元素，类名的顺序不限。 3、在IE7之前的浏览器，p.warning.help只会匹配p.help。 4、同时使用id选择器和c
阅读全文
摘要：1、a元素有四种状态： 2、如果设置了： 那么四种状态会继承a中它们没有的声明，但是四种状态中的声明优先级高于a中的。比如 那么hover状态下，字体将由link或visited状态下的20px（继承自a）变为40px（hover自己的）； 3、没有href属性，将没有a:link和a：visite
阅读全文
摘要：1、今天遇到一个问题，在给一个图片设置border-radius时，firefox和chrome表现正常，但是在IE中就无效，在IE中必须给图片设置一个边框，比如设置一个透明的边框就可以正常显示。 2、还有一个类似的问题是box-shadow，不设置边框的情况下在firefox和chrome表现正常
阅读全文
