核心之点：counter:是css计数器，只能跟content属性在一起使用的时候才起作用，而content属性专用在before/after伪元素上 核心之点：我举个例子把，好吧 ...class="box"> 3的后面是 如果p只有一个的话，就可以设counter-reset: count;在p里面，如果很多的p的话，那不能了，因为设的话，就代表一次设完就具有重复性了呀...display: block; 同学们：老是真棒， 老师;就哈哈哈 overflow: hidden; text-overflow: ellipsis; 这意思在详解：32哈，我懒得解释解释过的内容哈..." href="css/reset.css"/> body{ font:12px/1.5 'Hiragino Sans GB','\5FAE\... ?
对于用CSS 3D工作我已经有一些经验了，于是我的脑海里开始形成一个解决方案。我goggle搜索了像“CSS 3D cube”这样的关键词来确认我的想法，随后我回复Eugene说我可以。...如果太大，3D效果将减少到没有。 查看代码，由Anna Selezniova (@askd在 CodePen)上编写. 此外，在这个场景中对于所有物体而言只有一个视野角度。...我添加了标注来将剩下侧面的初始位置对齐。 我开始旋转立方体时发现底部和背面的标注说明都显示颠倒了： 查看代码 ，由Anna Selezniova (@askd 在 CodePen)上编写。...在IE中看到的画面让我陷入沮丧。为了让你知道我在说什么，在你最爱的浏览器中打开这个样例。我改变了一个属性导致在IE中这个立方体显示完全不正确。...在CSS 3D实践中我收获了宝贵的经验，并且发现了许多有意思的属性。更重要的是，我懂得了一个人不应该轻言放弃，很可能你会找到一个方法来完成。 我希望你喜欢我的故事，也希望你现在做好准备迎接新的挑战！
前言 博客主题已更新至3.8.4 本文主要用于记录及分享博主在使用butterfly主题时所使用的功能及涉及到的部分修改； 一些直接修改主题配置文件的功能，请移步Hexo-theme-butterfly...在butterfly里，有四种可供选择 description： 只显示description both： 优先选择description，如果没有配置description，则显示自动节选的内容...因为 Toc 会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致 Toc 的滚动出现异常。...%hideInline 直接写下了这个示例,我曾经在极度愤怒的情况下,#FF7242,#fff %} click here{%hideInline true %} 人和人是不能一概而论的 我曾经在极度愤怒的情况下...另外可以通过添加faa-fast动画加速，faa-slow动画减速 引入动态图标时，只需要引入动态图标的开源库：，然后在图标后面添加动态图标属性即可 以menu上的图标为例： menu: 主页
在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。...物理像素 它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。...也被称为视网膜显示屏 ——百度百科 因为Retina屏幕的出现，在pc端默认情况下，css中的1px等于1物理像素，但在移动端1px不一定等于1物理像素，比如说iPhone的设备独立像素是375 667...，因为它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素为 750 1334 在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈现的大小(物理尺寸)是一致的...css的px数也不同， 如果我们写一个div，宽度是375px，375px在这个屏幕（iPhone6）上是刚刚满屏，因为这个屏幕宽度刚刚是375px( 设备独立像素)， 当我们换另一个宽度是414px的设备
html上的 font-size ，相对的进行对应的变化 尤其是智能手机出现之后，我们没有办法在去固定我们的设备宽高，需要考虑 响应式 设计，根据浏览器窗口大小有不同的布局方式 css 中的单位 绝对单位...当然实际在项目中想必大家都是 rem 梭哈，这里我总结了一些适用场景 rem 一般情况下就是用来设置 font-size ，px 设置边框，em 设置绝大部分属性，比如padding margin border-radio...，10px 展示有问题，导致我们需要给所有的元素上设置 至少为 1.2rem 才能保证显示正常 当屏幕过大的时候，比如移动端转到 pc 端，页面的根元素 font-size 又会变的很大，感官上根本不能用...，能够让我们不论是在页面缩放，还是不同的屏幕之间，都有良好的用户体验，当然根元素默认字号 14px 这确实是会增加我们一些工作量，因为你需要思考什么时候使用...，做了一个较好的适配 总结 这就是使用现代 css 的是配置方式 更多的使用相对单位来设置一些属性 rem 设置字号，em 设置额外内容，px 设置边框 使用 calc+vw 也能做好一般自适应
在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。...物理像素 它是显示器（电脑、手机屏幕）最小的物理显示单位，物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。 设备独立像素 我上一张图，你就会理解什么是设备独立像素 ?...也被称为视网膜显示屏 ——百度百科 因为Retina屏幕的出现，在pc端默认情况下，css中的1px等于1物理像素，但在移动端1px不一定等于1物理像素，比如说iPhone的设备独立像素是375 * 667...，因为它使用了Retina屏幕，他的dpr是2，所以iPhone 6 的物理像素为 750 * 1334 在不同的屏幕上(普通屏幕 vs retina屏幕)，css中1px所呈现的大小(物理尺寸)是一致的...css的px数也不同， 如果我们写一个div，宽度是375px，375px在这个屏幕（iPhone6）上是刚刚满屏，因为这个屏幕宽度刚刚是375px( 设备独立像素)， 当我们换另一个宽度是414px的设备
CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑 大小写不敏感 虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的 .test...一些互斥的元素 对于absolute和fixed定位的(固定大小，设置了width和height属性)元素，如果设置了top和left属性，那么设置bottom和right值就没有作用了，应该是top和...px是pixel缩写，是基于像素的单位.在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768...如果在web上使用pt做单位的文字，字体的大小在不同屏幕（同样分辨率）下一样，这样可能会对排版有影响，但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。...，我们也经常使用backgroung-image等css属性为页面添加图片，这些图片是不是一定会被加载呢，看个例子 <!
通俗的理解，就是在不同的屏幕规格上能够有不同的布局效果，比如在大尺寸屏幕上呈现多列的布局，在小尺寸屏幕上呈现不了这么多，可能就只剩下一列布局了。...那么，当屏幕尺寸发生变化时，在不同屏幕规格上，应该呈现怎样的布局，一般是通过媒体查询 @Media 来实现，但自己在 CSS 中书写的话，需要处理较多工作。...目前的代码里，我们完全没有写过 CSS，只在 HTML 文档中，添加了 标签内容，就能够达到这样的页面效果了，所以，其实，BootStrap 已经封装好了一大堆属性样式，我们只要在标签上通过...那么，展开之后的区域里的列表控件上，出现了一些例如：row，col-sm-8 之类的 class，这些又是什么意思呢？...7 列的宽度，第二个 的 offset-md-1 和 col-sm-4 都生效，所以它前面空着 1 列的宽度，然后它占据着 4 列的宽度，这加起来是不是刚好 12 列，所以在 >= 768
，并配合一些相关的例子 基本属性 display: none none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在。...，但是要求这些行内元素总宽度至少占满一行，所以在总宽度不足一行的时候这个属性没用，因此在最后需要加上一些占位符。...display: inline-list-item 我在MDN上面看到有这个属性，但是我实际尝试发现这个属性是不能使用的，在 http://caniuse.com/#search=in… 上面也没有找到这个元素的兼容性...justify-content: 属性定义了项目在主轴上的对齐方式。 align-items: 属性定义项目在交叉轴上如何对齐。...chrome条件下设置了inline-flex，其子元素全部变成了inline模式，设置flex并没有什么用，不知道是不是我写的有问题，目前没找到这个属性的用法
在本文中，我们将通过一些实际示例来学习CSS网格，以帮助你更好地理解。让我们开始吧。...你的任务是使其具有响应式布局，因此你决定在桌面上每列显示三个产品，在平板上每列显示两个产品，而在手机上每列只显示一个产品。...它们之间没有区别，只是我们是在处理行而不是列。 网格间隔属性（grid-gap） 网格间隔属性grid-gap用于在父元素内设置列和行之间的间隔。...你可以在文本编辑器上尝试它们，以查看它们之间的区别。 网格项（Grid Items） CSS网格还有一些有用的属性，你可以将它们传递给网格容器的子元素，以便轻松设计复杂的网格布局。...其中一些属性包括：grid-column 、grid-row 、grid-area ，你可以在W3schools网站上了解它们，因为如果我在这篇文章中详细讲解它们，你可能要滚动一辈子才能看完。
我们在PC端常用的两种布局方式就是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度居中显示，后者则采用百分比。...关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的就是相信你已经听过的”响应式布局”，响应式布局意味着媒体查询，这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。.../*高分辨率屏幕*/ ? /*超高分辨率屏幕（传说中的Retina屏）*/ ? 上面就是在css中的用法，把我们需要的css代码包含在大括号中就能用了，是不是很方便的样子%>_<%。...虽然我们可以把设备的分辨率可以分为这几类，但是屏幕的尺寸实在太多，如果针对每一种尺寸写一种样式，我觉得设计师和前端面不用干别的了，因为开发成本实在太大，而且没有必要，我们只需要针对绝大多数的设备结合媒体查询和弹性布局来调整...4、选择符 选择符大致分为元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符，在PC端，我们用的最多的就是元素选择符、关系选择符和属性选择符如 div{……}、div.class{……}、div
原理 假如在页面里定义了一个 DIV，并设置如下 CSS 属性： div { border: 1px solid #ddd; height: 200px; width: 100%; } ?...如果在页面定义了两个 DIV，并设置如下 CSS 属性： body { font-size: 0; // 将inline-block布局两个DIV之间的距离清除 } div { height...@media 详情请看MDN 相信用过 bootstrap 栅格化系统的都知道，在 bootstrap 栅格化系统中，有一些 col-md col-sm 属性，它们是干什么用的呢？...其实，它们都是栅格化系统的 CSS 类名，只是针对了不同的屏幕宽度。 假如我们有这样的一个需求： 在 PC 上，因为屏幕比较大，我们要求一行显示 4 列的内容。...当屏幕 >=1200px 时，一行显示 4 列，当屏幕 <1200px 时，一行显示3列，而且是浏览器自动调整。 ? ? 一个栅格化系统就这样实现了。
矩阵变换是GUI绘图系统里的一个重要概念，transform用一个Matrix来描述绘图元素点线或面在屏幕上的实际位置与形状，这个矩阵通常由一组3x3或4x4向量组成，3x3为2d矩阵4x4为3d矩阵，...对这就是这个视图在屏幕是的真实位置，确切的讲是这个View.origin在屏幕上的确切位置，因为严谨的说一张图片或一个矩形在屏幕上是由4个点组成的一个面。...只有一个属性contentAlign, 那么这里重点讲述就是这个属性，因为它是与浏览器完全不相同有的地方，至于基础类型Box大家可以参与API文档会有详细说明，注意padding这个属性在ngui里是没有的...在ngui中Div并没有自己单独的浮动方式这个属性。...，也就是说它并不会在屏幕上显示任何可见的东西，它的存在只为是为了设置嵌套的TextNode视图属性，因为以TextLayout上的属性都能被它的子TextLayout所继承，这也是ngui中唯具有继承性质属性的视图
前言 这篇文章我会介绍 11 在开发过程中经常遇到的 CSS 相关知识点，以及 11 个有趣亦实用的 JavaScript 特性。 这些都是我在日常开发中总结而来，想必于你也是有或多或少的帮助。...1. position:fixed 降级问题 不知道曾经的你是不是遇到吸顶效果，就是使用 position:fixed 这个属性。...之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class，如下图： ?...内联首屏关键 CSS 性能优化中有一个重要的指标 —— 首次有效绘制（FMP），即指页面的首要内容（primary content）出现在屏幕上的时间。...全屏 API（Fullscreen API） 定义： 这个 API 可以使你所打开的页面全屏展示，没有其他页面外的内容展示在屏幕上。
大家好，上一篇文章里，《这30个CSS选择器，你必须熟记（上）》，我们一起学习了常用的10个CSS选择器，这篇文章我们将继续学习CSS选择器，由于文章篇幅有限，再介绍10个常用常用的CSS选择器。...11、X[href="foo"]：精准属性值选择器 上一小节，我们学习了 X[title] 这样的简单属性选择器，如果你想对属性的值进行精准匹配如何做呢，不用担心，CSS为我们提供了精准的属性选择器，比如我们想把特定网址的链接变成绿色...但是有一种解决方案，我们可以使用自定义属性，我们可以在图片的链接标签中添加data-filetype属性，如下所示： <a href="path/to/image.jpg" data-filetype=...的高级用法，虽然看着简单，但是灵活用起来可不简单，几乎每天都会有人用这个两个属性做出创意的玩法，最简单的直接的用法，就是在某个元素结束前插入内容，如下段代码所示，在文档末尾加入结束语： body::after...，下篇文章，我将继续和大家分享剩下的10个选择器，敬请期待...
1.预热 css样式多如牛毛，我不可能一个一个去讲，那样好像背字典一样，我相信你们也不喜欢这样的方式。所以，我会在实战中慢慢和你讲解，然后，你记住一些重要的css属性就可以了。...关键是，你要学会去查资料，最好的查资料方法，不是那种去W3C School上，一页一页看过去，那样的话不知道要看到什么时候，而是应该去看一些网页的源码，看看他们的网页是怎么做起来的，用了哪些css属性？...接着，在head元素上挂载一个style元素，专门用来设置样式表。接着，给wrap设置一点点样式。 ? 效果： ? 如何让这个div元素居中呢？是不是只要让它左右两边的margin自适应就OK了呀？...2.编写工具类样式文件 tool.css 在刚才的例子中，我们把一个div元素或者span元素都相对于父元素居中显示了，我现在请问一下大家，在实际开发中，让一个元素相对于父元素居中显示，这样的需求是不是很常见呀...可惜效果不对，这一行被挤下来了，原因很简单，因为第一列没有占据两行，所以如果我们硬是在后面添加一行，就会被挤下来。解决方法，是在第一列的td元素上，绑定一个rowspan属性，设置为2： ? ?
轴 容器中的 主轴 和 交叉轴 在容器中默认有水平的主轴和垂直的交叉轴，项目在容器中默认沿主轴排列 常用属性: flex-direction 属性 flex-direction 属性设置容器主轴的方向...flex-wrap属性 flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。...align-items 属性 align-items定义了项目在交叉轴上(上->下)是如何对齐显示的 flex-start:交叉轴的起点对齐 flex-end 交叉轴的终点对齐 ?...默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。...媒体查询 作用： 感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示； ? 使用的话可以放在 中 ,也可以引用 ?
首先我们把页面滑动到最下面，然后点击鼠标图标如图，然后在页面随意滑动，右侧就会显示对应的模块代码，比如图中的主题DIV模块，因为主题模板已经隐藏了侧栏，所以找不到具体的元素值，然后我们在主题模块下查看其他模块...看到这里我们应该知道侧栏是哪个了，就是“side fr”这个DIV，这个慢慢找总能找到，侧栏的命名一般也都是sidebar之类的，直接找到就行，然后查看代码：如图，side模块在屏幕像素小于999px的时候就被隐藏了...知道div类别名之后我们复制右侧红框代码，登录网站后台，主题设置，找到主题预留的自定义css接口（没有的话只能在样式表修改），粘贴代码： .side.fr {display:block; } 这样还不行...;} } 其中999px我们需要自己修改成适合的尺寸，建议尺寸小一些，因为屏幕太宽，侧栏显示很不友好，难看，建议改为560px，意思就是侧栏在999px-561px之间隐藏，在560px以下显示侧栏模块...然后点击开启自定义css，点击底部保存按钮，前台刷新看看是不是显示了。
在本文中，我将尽可能快速地介绍CSS网格的基本知识。我会把你不应该关心的一切都忽略掉了，只是为了让你了解最基础的知识。...4 5 6 要把 wrapper 元素变成一个 grid(网格)，只要简单地把其 display 属性设置为 grid...它会简单地将6个 div 堆叠在一起。 image.png 我已经添加了一些样式，但是这与 CSS Grid 没有任何关系。...这是上面代码的布局的结果： image.png 非常好理解，使用起来也非常简单是不是？下面我们来加大一点难度。...以下是在屏幕上显示的内容： image.png 如果你不明白我们设置的只有 3 列，为什么有4条网格线呢？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
