#
first-child 和 first-of-type 的区别

区别: p:first-child的含义:匹配父元素的第一个子元素、并且这个元素必须是P,如果不是则匹配不到;p:first-of-type的含义:匹配父元素的第一个类型是P的子元素; 最大误区:大部分人刚开始接触时会想当然以为first-child是first-of-type的效果,但其实,first-of-type才是大部分人想要的。 示例: <style>p:firs... 阅读全文

@2020-04-22 CSS 浏览(1436)
#
【CSS布局】左侧固定宽度右侧100%布局的六种实现方式

兼容性较好的3种方法方法一:float+overflow实现:左边浮动+固定宽度,右边overflow:hidden即可,注意,右边不要设置width:100%。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以若要兼容IE6需要设置zoom:1。 原理:overflow:hidden会触发BFC,BFC不会浮动元素重叠,因此会重新计算宽度。 <... 阅读全文

@2018-05-23 CSS 浏览(5108)
#
css3-transform做平移时作用在奇数的宽高度DOM上模糊问题

概述之前没仔细看过,反正就是经常遇到加上transform平移之后文字和其它对象就会变模糊的问题,后来发现,只有奇数的时候才会出现,偶数不会。 20170401更新测试浏览器:Chrome50.0 可正当我准备单独写一个测试案例的时候却发现怎么都无法复现前面碰到的模糊问题:新写的测试页面无论是奇数还是偶数都不会模糊,但是项目页面还是存在,且即使我把测试页面的代码copy到项目页面里面去也还是会... 阅读全文

@2017-04-01 CSS 浏览(5137)
#
CSS3自定义浏览器滚动条样式

说明非标准属性,仅限webkit内核浏览器。 组成部分一个完整滚动条右以下部分组成: ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border;::-webkit-scrollbar-button 滚动条两边的按钮,默认不设置时不显示,可设置高度、背景色、背景图片;::-webkit-scrollbar-track 整个... 阅读全文

@2016-12-21 CSS 浏览(3581)
#
经典老问题,CSS水平垂直居中的若干实现方式

水平居中垂直居中line-height法绝对居中法负外边距法负位移法(推荐)表格法行内块法flex参考水平居中水平居中比较简单,这里只简单概述一下: 对于行内元素来说(span、img、input等),直接text-align:center;即可搞定;对于块级元素,使用margin: 0 auto;也可以搞定; 还有其它一些方法,比如借助绝对定位等,不过更麻烦也不太推荐,所以不讲。 垂直... 阅读全文

@2016-11-26 CSS 浏览(4620)
#
CSS盒模型详解

前言我喜欢把复杂问题简单化,把简单问题更简单化,看到网上介绍CSS盒模型的文章写那么多,觉得还是有必要自己再总结一下。 CSS3出现以前首先,CSS3之前,关于盒模型有这两种,一种是W3C标准盒模型,一种是IE盒模型(低版本IE或者缺少!DOCTYPE会触发此模式)。 所谓W3C标准盒模型,就是实际内容宽度等于设置的宽高度(不包括padding和border);所谓IE盒模型,就是实际内容... 阅读全文

@2016-11-26 CSS 浏览(4189)
#
浮动、BFC以及清除浮动

什么是BFCBFC全称Block Formatting Context,意思是块级格式上下文,它是一个独立的布局环境,一个BFC中的元素布局不受外界的影响。 W3C中关于BFC的定义: 浮动元素、绝对定位元素、非块级元素的块级容器(如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为visiable的元素,都会为他们的内... 阅读全文

@2016-11-24 CSS 浏览(3596)
#
CSS选择器的权重

CSS选择器种类CSS有很多选择器,按照类型我们简单分为以下几种: ID #id类 .class标签 如p通用 *属性 [type="text"]伪类 :hover伪元素 如::after子选择器、相邻选择器、索引选择器等 补充:伪元素只有如下几种:::after、::before、::first-letter、::first-line、::selecton。 CSS权重CSS有... 阅读全文

@2016-11-20 CSS 浏览(3444)
#
CSS3之box-shadow

作用box-shadow用来给元素添加一个或者多个阴影。 语法box-shadow: offsetX offsetY blur size color inset;其中: offsetX 表示水平偏移距离,允许负值offsetY 表示垂直偏移距离,允许负值blur 表示模糊值,不写默认0size 表示阴影大小,不写默认0color 表示阴影颜色inset 表示内容阴影,可选 以上6个属... 阅读全文

@2016-09-19 CSS 浏览(3101)
#
如何自定义博客园代码高亮主题,同时分享自己使用的黑色主题

前言园子里有人问到了这个问题,所以写篇博客简单介绍下。 博客园代码高亮使用的插件是 highlight.js,本来想替换成我 个人网站 使用的 prism.js,但是比较坑爹的是,解析过程在服务端已经完成了,为什么这么说呢?因为我禁用浏览器JS重新刷新页面时,pre>code里面的所有代码都已经被解析成一个个span了: 没办法,只能通过替换主题来达到效果了。 博客园最大的优点就是... 阅读全文

@2016-09-07 CSS 浏览(7511)
#
css计数器详解

什么是css计数器兼容性解释初始化计数器计数器自增显示计数器countercounters一些高级用法使用中文计数自定义计数器起始值自定义每次递增的值递减计数多个计数器同时使用完整demo参考文章什么是css计数器就是采用css给一些html元素自动生成编号,比如类似1.3.2这种,先看个效果: 对,就是这种类似Word里面很常见的效果,代码如下: <style type="text... 阅读全文

@2016-07-19 CSS 浏览(7396)
#
transition动画正在执行时获取的样式值

先看代码将一个div从left为0的地方移动到1000的地方,采用transition动画,动画执行中获取到的left值为多少呢? element.style { position: absolute; transition: left 10s; left: 0px; left: 1000px;} 测试($0表示测试那个div): $0.style.left // "... 阅读全文

@2016-07-18 CSS 浏览(3278)
#
CSS选择器详解【有待完善】

css1和css2就开始有的选择器css3新增选择器兄弟选择器属性选择器索引选择器其它选择器:epmty::selectionlast-of-type 和 last-child参考css1和css2就开始有的选择器css3新增选择器兄弟选择器E ~ F通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,... 阅读全文

@2016-07-13 CSS 浏览(3040)
第1页,共1页