945996501的博客_Css

CSS3 弹性盒布局模型

弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式。弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。基本布局首先从最基本的布局开始介

空间

图片

模型

动态

缩略图

转载精选 2016-05-26 21:00:33 835 阅读

再谈 CSS 预处理器

CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可

css处理器

转载精选 2015-08-07 14:02:14 351 阅读

sass 安装配置和使用

一、什么是SASSSASS在CSS的基础上做了一些扩展，使用SASS你可以使用一些简单的编程思想进来编写CSS。比如，SASS中可以定义变量、混合、嵌套以及函数等功能。只不过SASS不像CSS，可以直接运用到项目中，如果你需要将样式运用到项目中，有一个步骤是必须经过的——SASS转译成CSS。到目前为止，将SASS转译成CSS并不是件困难的事情。可以通过命令行工具或者第三方插件来完成SASS向C

sass

sass安装

sass语法

原创 2014-12-01 14:35:15 497 阅读

CSS3 Transitions, Transforms和Animation使用简介

css3

transition

转载精选 2014-11-26 11:47:08 746 阅读

渐进增强和优雅降级之间的有什么不同？

广义来说，其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级。这个基准线对于我，是允许使用javascript、cookie和css的IE8浏览器。不过狭义而言，渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。之前在看一些css3效果d

渐进增强

优雅降级

翻译精选 2014-11-07 17:38:07 445 阅读

上中下三栏，中间栏自适应高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

自适应高度

翻译精选 2014-11-04 10:39:38 457 阅读

CSS:haslayout解说

我们都知道浏览器有bug，而IE的bug似乎比大多数浏览器都多。IE的表现与其他浏览器不同的原因之一就是，显示引擎使用一个称为布局(layout)的内部概念。因为布局是专门针对显示引擎内部工作方式的概念，所以一般情况下不需要了解它。但是，布局问题是许多IE显示bug的根源，所以理解这个概念以及它如何影响CSS对修复bug是有帮助的。一、什么是haslayouthaslayout是Windows I

浏览器

Windows

Explorer

layout

转载精选 2014-11-03 14:51:05 539 阅读

Css框架and公共Css文件

一般一个网站会有这么三个样式：global.css | reset.css（格式化样式） common.css（公共组件样式） layout.css（当前页面样式）清除全站所有页面的浏览器默认样式，保证在初始样式在所有浏览器下一致。common.css（公共组件样式）一般一个网站所有页面头部、底部样式都是一致的，而且很长时间不会有大的改变，改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求

css框架

css公共样式

翻译精选 2014-10-11 21:54:14 518 阅读

手机web——自适应网页设计（html/css控制）

一. 允许网页宽度自动调整： "自适应网页设计"到底是怎么做到的？其实并不难。首先，在网页代码的头部，加入一行viewport元标签。<meta name="viewport" content="width=device-width, initial-scale=1" />viewport是网页默认的宽度和高度，上面这行代码的意思是，

浏览器

网页设计

手机

web开发

翻译精选 2014-10-11 15:48:14 595 阅读 1收藏

css的效率和浏览器渲染的速度

浏览器如何读取你的CSS选择器有一个很重要的原则，那就是它们从右到左读取。这意味这像 ul > li a[title="home"] 这样的选择器，a[title="home"] 将是最先被读取的。我承认我并不经常想这个问题……我们写的 css的效率是怎么样的呢，浏览器渲染的速度又如何呢？这是应该是浏览器开发者应该关心的(页面加载更快，用户就会更愉快)。Mozilla有一篇文章： abou

css的效率和浏览器渲染的速度

转载精选 2014-05-16 19:18:20 387 阅读

float 清除浮动

一、清除浮动还是闭合浮动（Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；2）闭合浮动：更

浮动

清除浮动

float 清除浮动

转载精选 2014-05-15 19:27:38 398 阅读

CSS Hack 和向后兼容

人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的

css

css hack

向后兼容

转载精选 2014-05-14 16:10:15 364 阅读

css布局之浮动、定位、负边距三者之间的灵活结合利用

css负边距自适应布局单列定宽单列自适应布局：<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>单列定宽单列自适应布局</title> <style type="text/css"> * {margin:0;padding:0;} .cont,

定位

css布局之浮动

负边距

转载精选 2014-05-12 18:22:59 474 阅读

CSS框架自建必备

不少CSS框架已经存在了一段时间，但大多数Web开发人员避免使用它们。相反最有经验的开发者希望创建自己的CSS框架，提供个性化解决方案的优势，并减少对第三方的解决方案消极方面的依赖。虽然CSS框架，目的是加快网络开发，但是开发自己的全面的CSS框架，可能需要大量时间和精力。本文将提供指导和精心挑选的资源，以协助你完成这一心愿。开始之前首先尝试一些流行的CSS框架或者至少去看看他们提供的文件

css框架解决方案

css框架

转载精选 2014-05-12 16:24:32 444 阅读

27款经典的 CSS 框架分享

利用 CSS 框架，可以简化你的工作，提高工作效率。CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架，你可以选用。1. 960gs960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。2. YUI 2: Gr

网页设计

分辨率

widget

layout

经典的

转载精选 2014-05-12 15:38:30 599 阅读

你真的了解word-wrap和word-break的区别吗？

这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。那它们到底是什么呢？我在mozilla的官网上找到如下的解释：word-wrapword-break我们看到两个解释中都出现了 break lines w

换行样式解析   word-

转载精选 2014-05-07 14:57:51 318 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

front-end

CSS3 弹性盒布局模型

再谈 CSS 预处理器

sass 安装配置和使用

CSS3 Transitions, Transforms和Animation使用简介

渐进增强和优雅降级之间的有什么不同？

上中下三栏，中间栏自适应高度

CSS:haslayout解说

Css框架and公共Css文件

手机web——自适应网页设计（html/css控制）

css的效率和浏览器渲染的速度

float 清除浮动

CSS Hack 和向后兼容

css布局之浮动、定位、负边距三者之间的灵活结合利用

CSS框架自建必备

27款经典的 CSS 框架分享

你真的了解word-wrap和word-break的区别吗？