4小时学会CSS3下.docx
《4小时学会CSS3下.docx》由会员分享，可在线阅读，更多相关《4小时学会CSS3下.docx（15页珍藏版）》请在冰豆网上搜索。
4小时学会CSS3下
4小时学会CSS3（下）
本文是以一名程序员的角度出发在使用CSS过程中的一些心得。
对于CSS并没有那么难，它是浏览器用来渲染网页的一种技术。
对要学好CSS，说到最高端的境界，就是要懂得各种浏览器的渲染方式。
从2015年开始，我的一些项目开始基于GWT架构来进行，这种情况下不需要美工也能做好统一的页面布局，同时，程序员只要了解一部分CSS的知识就能把页面处理的漂漂亮亮的。
本文的目的是让读者可以不去看市面上任何一CSS的本书，就能轻轻松松学会CSS做到几个小时精通CSS，但并不包含更多与不同浏览器间属性差异的对比（GWT帮我们处理了这些）。
下篇实战居多，希望大家喜欢。
目录
1度量单位2
1.1长度单位2
1.2颜色单位3
1.3百分比使用3
2字体CSS使用5
2.1语法5
2.2浏览器处理字体5
3文本CSS使用6
3.1语法6
3.2例子7
4模型框和布局8
4.1一分钟理解模型框8
4.2布局实例介绍9
5高级布局9
5.1定位position9
5.2显示display9
5.3可见性10
5.4浮动10
5.5溢出和剪切12
5.6Viewport和Block块框12
6全局配置14
6.1鼠标指针14
6.2页面框14
6.3分页14
1度量单位
在网页设计过程中，一般会涉及到长度和颜色两种度量单位。
当然事件单位也是有可能的。
对于这些单位的熟练掌握有助于设计出美观的页面。
1.1长度单位
先普及下屏幕和长度的知识：
长度国际标准单位是mm,cm,m等等，如何换算到屏幕上呢？
计算机屏幕是由点阵构成的，在一个14寸最大1024*768的老式液晶屏幕上，你用尺子测量一下长度记为L。
1024除以L即得到了单位cm上的点数记为N。
当显示器位于1024*768分辨率下，当你在屏幕上用画线函数画出一条N个像素的水平线段，这个线段的长度就是1cm。
PPI:
每英寸多少个像素
看上去有些复杂对不对？
实际上，我们在设计网页的过程中并没有如此精确的需求。
一般来说所有的尺寸定义都是相对的，一切以最终美观为要求。
计算机在显示所有东西的时候最终会显示成像素这个最小单位进行，请记住这个原则。
常用的一些单位：
●px像素
●pt磅，在word中能经常看到72磅=1英寸
●mm,cm,in1英寸=2.54厘米，1厘米=0.394英寸
●em相对于字体的大小
●ex相对于小写字母x的高度
看一些例子：
div{margin:
0.8em}
p{font-size:
18px}
1.2颜色单位
颜色在不同的显示器上出来的效果是不太一样的，有像Eizo这样的专业显示器，它们的色域非常高，能覆盖自然颜色中更多的颜色。
而普通的家用显示器一般能有65-70%算不错了。
颜色的表达与合理应用是非常复杂的，我们人类在感知颜色时还有“心里颜色“的这种来自感觉层面的主管判断。
尤其当网站颜色比较多时，一定要合理应用各个色系，不能让人产生反感。
通常我们会使用RGB这样的三色体系去表达。
红绿蓝每种颜色的范围可以用十进制，百分比，16进制来表达:
rgb（255,0,0）=rgb（100%,0%,0%）=#FF0000=正红
网页安全颜色：
每种颜色都可取0，51，102，153，204，255这6种值，组合起来共6*6*6=216种颜色。
1.3百分比使用
百分比重在应用，我们看两个例子就可以了。
1.字体百分比
在这个例子中如果不设定font-size:
110%，它将继承div的20px大小的字体，一旦设定110%就会变成22px，很容易理解。
2.布局相关百分比
宽度如果不设百分比，将占用整个页面全宽。
设定后我们可以看到也能进行相应的变化。
2字体CSS使用
2.1语法
font-family：
[[<字体名>|<字体系列名>]，[<字体名>|<字体系列名>]..]
font-size:
20px结合字体单位灵活应用
font-weight:
[normal|bold|lighter|100]
font-style:
[normal|italic|oblique]
font-variant[normal|samall-caps]
上述属性都可以使用inherit关键字表示这个属性继承父元素。
以字体为参照，可以设置其他的一些属性：
p{width:
45em;}
先设置好字体宽度，这个CSS设定了段落宽度是45个字符，能让段落宽参照字体宽度进行自适应。
所以
2.2浏览器处理字体
创建字体属性数据库，包含支持的CSS字体属性。
对每种字体读取字体属性列表。
用font-family属性的值进行匹配。
挨个匹配到字体family是否存在，直到找到第一个合适的family。
同样在family中继续挨个匹配合适的字型。
直到找到最合适的。
如果特殊字符不能显示，系统会使用别的字体进行替代。
匹配过程会逐个对font-style，font-variant，font-weight，font-size属性进行匹配，直到成功为止。
为了防止客户端找不到字体，可以定义一个字体系列，而不制定具体名称。
h1{font-family:
”黑体”,serif;}
h1{font-family:
serif;}
只有如果没有设定具体字体名，浏览器内部会用默认值来替代。
3文本CSS使用
3.1语法
注意：
下列所有属性都可设为inherit，<长度>是带单位的有效长度
text-align:
left|right|center|justify
text-indent:
<长度>|<百分比>
line-height:
normal|<实数缩放因子>|<长度>|<百分比>
vertical-align:
baseline|sub|super|top|text-top|middle|bottom|text-bottom|<百分比>|<长度>
word-spacing:
normal|<长度>
letter-spacing:
normal|<长度>
text-transform:
capitalize|uppercase|lowercase|none
text-decoration:
none|underline|overline|line-through|blink
white-space:
normal|pre|nowrap|pre-wrap|pre-line
text-shadow:
none|颜色水平延伸长度垂直延伸长度模糊距离
direction:
ltr|rtl（从左向右还是从右向左）
3.2例子
4模型框和布局
4.1一分钟理解模型框
在上面一小节的例子中，我们通过F12打开调试界面，看到布局页面。
下面这幅图很好的说明了模型框的各个要素:
width,max-width,min-width
height,max-height,min-height
padding,border,margin,offset
上述的位置和模型框属性都可用长度来设值。
4.2布局实例介绍
（请参考5.4小节的实例）
5高级布局
5.1定位position
position:
static|relative|absolute|fixed|inherit
top:
<长度>|<百分比>|auto|inherit
right:
<长度>|<百分比>|auto|inherit
bottom:
<长度>|<百分比>|auto|inherit
left:
<长度>|<百分比>|auto|inherit
z-index:
auto|<整数>|inherit
一般设置static后，通关过top等进行对其。
在流式布局中常用relative进行排版。
5.2显示display
display:
inline|block|list-item|run-in|inline-block|table|inline-table|table-row-group|table-header-group|table-fotter-group|table-row|table-column-group|table-column|table-cell|table-caption|none|inherit
:
hover伪类（鼠标指针移动到某元素上的状态）
display:
none;可以用来隐藏元素。
5.3可见性
visibility:
visible|hidden|collapse|inherit
display:
none;和visibility:
hidden;的区别在于后者占着位置，并没有显示内容而已。
所以前者可能更好用一些。
5.4浮动
float:
left|right|none|inherit
clear:
none|left|right|both|inherit
请看一个例子：
如果左右没到底，页脚会固定不住，需要用clear来独占整行。
修改后代码如下：
5.5溢出和剪切
元素内容高度大于块，或不能换行造成过宽等能造成溢出。
可以用overflow来修饰。
overflow:
visible|hidden|scroll|auto|inherit
clip:
rect（<上>,<右>,<下>,<左>）|auto|inherit
也可以通过clip对溢出部分进行裁剪。
5.6Viewport和Block块框
浏览器一般有两个部分组成，网页内容所占据的位置是Viewport，除此之外是作为浏览器本身的一些UI，包括工具栏，状态栏，菜单，地址栏等等。
网页内容从互联网下载到本机后便在Viewport中渲染。
下面是一些关于块框的创建过程：
1.HTML标记是根，被称为初始包含块。
2.其他元素如果设置了定位属性（相对relative），它的包含块由最近的块，tablecell,或inline-block父元素的块创建。
3.其他元素如果设置了定位属性（绝对fixed），包含块由Viewport直接创建
4.如果设定了position:
absolute，计算过程非常复杂，建议自行测试。
●principalblockbox
除table以外的块级元素，都能生成一个主框（principalblockbox）。
主框可以是blockbox或inlinebox。
主框决定其后代框的包含块并生成内容，并且参与上下文的渲染格式。
●inlinebox
inline,inline-table，部分run-in属性能生成行内框。
●run-inbox
run-in类型元素有些时候能生成行内框，有些时候是插入（run-in）格式。
不浮动，不设绝对固定的块框跟随在插入框之后则插入框的第一个行内框；但是插入框不能插入到一个已经以插入框开始或者自身就是一个插入框的块内。
插入框包含块框，则它是块框；除了上面两种情况插入框就是块框。
●匿名框
有些文字虽然不直属于块级元素，在渲染时浏览器把它们放到一个匿名框中：
6全局配置
6.1鼠标指针
cursor:
[[,]*[auto|<关键字>]]|inherit
关键字包括：
crosshair,default,pointer,move,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize,text,wait,help,process
总的来说指针有提示用户当前操作的作用，实在移动窗体还是做改变大小还是需要等待。
所以做一套漂亮的指针是很关键的。
上面的关键字就不解释了，制作鼠标指针的教程可以到XX搜索。
6.2页面框
从这里开始和打印关系比较密切
语法：
@page[：
[left|right|first]]{margin:
20px;}
1页为左页，2页尾右页；考虑到打印后装订的要求，左页左边距和右页右边距会更大一些。
6.3分页
page-break-before:
auto|always|avoid|left|right|inherit
page-break-after:
auto|always|avoid|left|right|inherit
page-break-inside:
avoid|auto|inherit
orphans:
<整数>|inherit
widows:
<整数>|inherit
升级会员 