CSS学习目录
关注
分享
扫一扫
文章平均质量分 93
aaa333qwe
如果心没有方向，到哪里都是流浪。
展开
-
css--全屏布局解决方案
之前写了几个居中布局的例子，同时也提到了对于页面的全屏布局。这里详细总结两种常见的全屏布局的案例，当然，实际上还有像Grid这样的方案，但是因为目前还不稳定，只是作为W3C的一个草案，兼容性自然就差一些，这里没有作深入的探讨。 相信这样的页面布局，我们在很多后台系统上会经常用到： 用代码表示为这样的结构： class="parent"> div class="top">div>转载 2017-09-09 13:53:01 · 1428 阅读 · 0 评论 -
CSS-清除浮动
什么是CSS清除浮动？ 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 引用W3C的例子，news容器没有包围浮动的元素。 ...转载 2019-02-17 21:47:24 · 253 阅读 · 0 评论 -
jQuery 2.0.3 源码分析Sizzle引擎 - 高效查询
首先，从处理流程上理解，它总是先使用最高效的原生方法来做处理HTML文档一共有这么四个API：getElementById 上下文只能是HTML文档 浏览器支持情况：IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+； getElementsByName，上下文只能是HTML文档浏览器支持情况：IE 6+, Firefox 3+, Safa...转载 2018-06-12 17:32:10 · 170 阅读 · 0 评论 -
为什么 CSS 选择器解析的时候是从右往左？
CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。首先，对浏览器来说，ID 选择器 #xx 是最快的，其次是 class 选择器、html 元素选择器等。那为什么从右向左的规则要比从左向右的高效？如图：假如 DOM 的结构如上图，匹配规则是 .mod-nav h3 span。若从左向右的匹配，过程是：从 .mod-nav 开始，遍历子节点 header 和子节点 div，然后各自向子节点...转载 2018-06-12 15:22:46 · 595 阅读 · 0 评论 -
css中单位px、pt、em和rem的区别
1.jpg国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？px ：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)px 特点：1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，re...转载 2018-05-16 13:11:09 · 202 阅读 · 0 评论 -
input,textArea的placeholder的颜色的改变
.search_input::-webkit-input-placeholder{ color:#b6b6b6;}.search_input:-moz-placeholder{ color:#b6b6b6;}.search_input::-moz-placeholder{ color:#b6b6b6;}.search_input:-ms-input-placeholder{ ...转载 2018-05-21 18:02:28 · 208 阅读 · 0 评论 -
CSS秘密花园：斜切角
《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。问题斜切角在Web设计和印刷中是相当受欢迎的样式。它通常是在一个或多个元素的角落切一个45°的角（也就是所谓的斜切角）。特别是最近，扁平化设计的势头压过了拟真设计，也使这...转载 2018-05-10 15:36:17 · 887 阅读 · 0 评论 -
使用CSS border 做三角形 口诀赠上
为了方便用border做三角形，省去那繁琐的思考三角朝向的问题，自己搞了个小口诀，分两篇，一篇是普通的三角，一篇是针对直角三角，口诀如下：普通篇：方向朝哪哪边无，颜色反向来弥补直角三角篇：直角三角分两边，哪侧无值朝哪边，具体颜色来填充，要看直角在哪边，向上直角填上边，向下直角填下边，top、bottom俩冤家，从此永远不想见。针对普通篇的效果如下：代码如下：.toLeft { ...转载 2018-05-10 15:17:30 · 399 阅读 · 0 评论 -
移动端字体大小单位rem
首先先将几个主要概念讲一下； 什么是移动端？ ：移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。 什么是布局？ ：对事物的全面规划和安排，布：陈设；设置。前端开发中布局也就是将主要的html结构布置好。 rem是什么？ ：R.E.M.是一支于1980年组建于美国的另类摇滚乐团....当然我们这...转载 2018-03-09 10:52:29 · 870 阅读 · 0 评论 -
三栏布局的5种解决方案及优缺点
假设高度已知，请写出三栏布局，左栏、右栏宽度300px，中间宽度自适应。 这道题本身的难度并不大，我们在布局页面的时候，写个三栏布局还是挺简单的。但是如果在面试的时候遇到这道题，就没有那么简单了。看似简单的一道题，想把它答好是不简单的。往往越简单的题越不好答。如果看到这题只想到了浮动和绝对定位，那这题你连及格都及格不了。下面是5种三栏布局的方法。 在写布局代码之前，先写两段公共的样式，此段写在头部...转载 2018-03-08 21:32:33 · 333 阅读 · 0 评论 -
深入理解CSS盒模型
如果你在面试的时候面试官让你谈谈对盒模型的理解，你是不是不知从何谈起。这种看似简单的题其实是最不好答的。 下面本文章将会从以下几个方面谈谈盒模型。基本概念：标准模型 和IE模型CSS如何设置这两种模型JS如何设置获取盒模型对应的宽和高实例题（根据盒模型解释边距重叠）BFC（边距重叠解决方案） 基本概念盒模型的组成大家肯定都懂，由里向外content,padding,border,margin....转载 2018-03-08 21:30:25 · 337 阅读 · 0 评论 -
W3c盒子模型和IE盒子模型&box-sizing属性
1.盒子模型有两种：W3c盒子模型和IE盒子模型（1）W3c盒子模型可以看到W3C盒子模型包括4部分：margin，border，padding，content，其中，content不包括其他部分但是在IE盒子模型中，content包括了border和paddingIE盒子模型可以看到W3C盒子模型，和IE盒子模型，content部分的宽度width和高度height是不一样的。 2.两个模型宽度...转载 2018-03-08 13:51:18 · 1439 阅读 · 0 评论 -
用CSS实现布局（两栏布局，多栏布局）
在网页上的布局比较经典的是两栏布局和三栏布局。两栏布局两栏布局是主内容区为主，左（右）侧有一栏，代码如下： <style> #header, #footer{ height: 100px; background: red; } #content .main...转载 2018-03-08 12:55:00 · 315 阅读 · 0 评论 -
[CSS]两栏自适应布局
方法一：margin-left/right实现<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border:1px solid red; backgrou转载 2018-03-08 12:50:59 · 199 阅读 · 0 评论 -
-webkit-transform:translate3d(0,0,0)触发GPU加速，让网页动画更流畅
前段时间，按照美拍的视频效果写了一个效果类似的网页版的动画。电脑上安装了三种浏览器：IE、Chrome、Firefox。分别作了测试，结果显示Chrome在这方面的渲染效果最差，经常出现卡顿现象，ff表现最好。一直百思不得其解，尤其是之前使用canvas标签做图片滤镜效果，chrome浏览器居然显示不了滤镜效果，然而其他浏览器均能正常显示，大谷歌你肿么了...对渲染多张图片和动画效果表示放弃了么.转载 2017-10-03 16:18:57 · 9684 阅读 · 0 评论 -
在 CSS 预编译器之后：PostCSS
提到css预编译器（css preprocessor），你可能想到Sass、Less以及Stylus。而本文要介绍的PostCSS，正是一个这样的工具：css预编译器可以做到的事，它同样可以做到。 “你说的我都懂，那为什么要用它？” 套装与单件 如果Sass等预编译器是新定义了一种模板语言，然后将其转化为css的话，PostCSS则是更纯粹地对css本身做转换。 回想一下你转载 2017-09-18 18:11:44 · 718 阅读 · 0 评论 -
CSS 编码规范
1. 文件组织 (建议试试LESS) 1.1 CSS 与 HTML CSS 一律写在 CSS 文件中，原则上不写内联样式。 CSS 文件命名由小写字母、下划线（_）组成。 CSS 文件通过 标签引入 HTML 文件，并放在文档头部即 标签中，不使用 @import。 1.2 CSS 定义结构 三层结构： 基础框架（reset.css/ 栅原创 2017-08-21 09:57:13 · 375 阅读 · 0 评论 -
CSS秘密花园： Sticky footers
《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。 问题 在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在转载 2017-08-28 11:15:21 · 393 阅读 · 0 评论 -
常用class 样式总结
清除浮动 // Clearfix @mixin clearfix { &:before, &:after { content: " "; // 1 display: table; // 2 } &:after { clear: both; } } 滚动条样式(隐藏) @mixin scrollHide { &...原创 2019-02-17 22:05:27 · 701 阅读 · 0 评论