轩枫阁

前言

来自妙味课堂一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧：

1. 左侧固定宽，右侧自适应屏幕宽；
2. 左右两列，等高布局；
3. 左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）
4. 要求不用JS或CSS行为实现；

查看全文

前言

在今天的文章中，我将要聊聊我在一年半的实践中，总结出来的css经验。

首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。

是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。

事实上，css是一门简单的语言，并不意味着每个人的水平一样。有些人写起css来就跟个大猩猩在玩棍子，有些人可以掌握css,而有些人可以使用魔法般的使用css。

不管怎样，我还是要给你分享一些我这几个月来理解的东西，这并不是一些代码片段或者是css小技巧，而更像是一些通用的规则或者是最佳实践之类的东西。

你想说什么呢？你准备好了？那我们继续往下吧。 查看全文

建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑，要用logo图片来代替h1，这时需要隐藏h1内的这段文字，但又不能对搜索引擎不友好，否则就失去了定义h1标签的意义。

在CSS中如何以图代字，找了一下CSS隐藏文字的方法，有以下几条：

1、display:none;

这个大家普遍说法是，搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略，不为隐藏的对象保留物理占位空间。GG也搜CSS文件？不过如果用这个方法，<h1>如何设计，也是难题。 查看全文

前言

当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在IE和FF中都会撑大容器，不会自动换行

并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决？先来认识一下两位主角word-wrap和word-break

word-wrap用来控制换行

两种取值：

(1)normal

(2)break-word（此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。） 查看全文

孤注一掷的跃然，才无憾对流年