word-wrap, word-break, white-space, text-overflow 的區別和用法

存在的問題:

  1. 如果是全英文字符串,中间不包含任何符号(包括空格),不自动换行;
  2. 中英文混写,则在英文字符串的开始处换行(英文长度>div长度),结尾处不换行;
  3. 英文整个单词换行。等等,可能还有一些问题,这里只列出了常见的几个;

介绍下面几个css属性功能的简单用法:
word-wrap:normal | break-word;(内容换行)
 normal: 默认的属性值(允许内容顶开指定的容器边界)
 break-word: 内容将在边界内换行(不截断英文单词换行,截断英文单词下面的属性才具备这个功能。)
=====================
word-break:normal | break-all | keep-all(词内换行)
 normal: 如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示。
 break-all: 强行换行,将截断英文单词
 keep-all: 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示。

Continue reading →

Yahoo的純CSS圓角

以前看純代碼的圓角都是一條綫一條綫排出來的(如下圖),有些就使用JS,當中curvycorners-2.0.3.rar就是做比較好的。

curvy corners

而這次在一篇文章看到Yahoo做法有點不一樣,在4個角上面“下功夫”,原理也很好理解,請看下文。
轉載自:http://www.neoease.com/round-corners-with-html

1. 做一个直角的 DIV, 给他画上边框. (以下图片都以左上角为例)
div-css_round_corners_0.jpg

2. 在 DIV 内部画第二个 DIV, 背景色与页面背景颜色相同.
div-css_round_corners_1.jpg

3. 将第二个 DIV 挪到边界上, 使它能与页面背景连接, 这样看上去就像一个缺角的框框.
div-css_round_corners_2.jpg

4. 在第二个 DIV 内画第三个 DIV, 在这里其实就是一点.
div-css_round_corners_3.jpg

5. 将第三个 DIV 挪到右下角的位置, Done.
div-css_round_corners_4.jpg

我在 Yahoo! 截取了这段代码, 改了一下. 下载点击
最终效果如下图所示:

div-css_round_corners_preview.jpg

  基本上光看截圖就大概明白了它的原理,的確很好理解,出來效果也很不錯,但結構中仍然要使用很多 無内容的空標籤,一般純CSS的圓角都存在這個問題,是一個大難題!!

網頁常用英文命名(中英文翻譯)

用戶界面 UserInterface
流覽器 Browser-side
用戶端 Client-side
服務端 Server-side
頁 page
網頁 webpage
網/網頁 web
站點/網站 site
網站 website
訪問網站 visit website
最新評論 Last Comments
最近新聞 Recent News
我們推薦 We Recommend
推薦資源 Recommended Resources
獲取更多 learn more
文章標題 ArticleTitle
文章日期 ArticleDate
文章內容 ArticleContent

即將舉行的活動 Upcoming Events
為什麼選擇我們 Why Choose Us
最熱門的分類 Most Popular Categories

列 columens,Columns
內容 content
下拉 dropdown
全球/全局 global
佈局 layout
邏輯佈局 layoutLogic
內容佈局 layoutContent
搜索 search
用戶 user
簡要/摘要 Brief
描述 description
詳細/細節/詳情 Detail
分類 Categories
類別 Category
未歸類 uncategorized
當前的   current
作用域 scope
未命名 untitled
永久鏈結 Permalink
看不到FLASH時提示內容
Welcome to ***.com
We have detected that you do not have the Flash 8/9/10+ player installed.
Please Click Here to download the Flash plugin.

CSS的命名參考

1.
全部的/整个的/全体的:entire / whole
分段:section
部分的/段面的:sectional
平面:plane
個人資料/注冊信息:profile
尾部/附於其後:tail
扩張/展開:expand
折疊/合並:collapse
摘要:summary
修剪/整理:trim
裝飾/使生色:adorn
半徑:radius
圓/輪/球形:round
圓/循環/環繞:circle
角/棱/角落:corner
圓角/彎曲的角:CurvyCorners
==選項卡==============
tabs
tabNav / tabMenu
tabConWrap / tabConBg(經常需要在内容區上面加多一個元素,放背景)
tabCon1
tabCon2
tabCon3
tabCon4
====================

Continue reading →

css文檔流與block級塊元素和行内元素inline

  CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O’Reilly的《CSS权威指南》发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都 变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常。

文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.
内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.
有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理)。
浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。
浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准,其实它不是。
基于文档流, 我们可以很容易理解以下的定位模式:
相对定位, 即相对于元素在文档流中位置进行偏移. 但保留原占位.
绝对定位, 即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
固定定位, 即完全脱离文档流, 相对于视区进行偏移.

  接下来还有几个问题我搞不明白的

Continue reading →