发表于： 2017-03-07 22:35:39
1 977
今天完成的事情：
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
/* keyword values */vertical-align: baseline;vertical-align: sub;vertical-align: super;vertical-align: text-top;vertical-align: text-bottom;vertical-align: middle;vertical-align: top;vertical-align: bottom;/* <length> values */vertical-align: 10em;vertical-align: 4px;/* <percentage> values */vertical-align: 20%;/* Global values */vertical-align: inherit;vertical-align: initial;vertical-align: unset;
取值 (对于行内(inline)元素)
大部分取值是相对于父元素来说的：
baseline- 元素基线与父元素的基线对齐。
- 对于一些 可替换元素，比如
<textarea>， HTML标准没有说明它的基线，这意味着对其使用这个关键字，各浏览器表现可能不一样。 sub- 元素基线与父元素的下标基线对齐。
super- 元素基线与父元素的上标基线对齐。
text-top- 元素顶端与父元素字体的顶端对齐。
text-bottom- 元素底端与父元素字体的底端对齐。
middle- 元素中线与父元素的小写x中线对齐。
<length>- 元素基线超过父元素的基线指定高度。可以取负值。
<percentage>- 同 <length> , 百分比相对于
line-height。
以下两个值是相对于整行来说的：
top- 元素及其后代的顶端与整行的顶端对齐。
bottom- 元素及其后代的底端与整行的底端对齐。
如果元素没有基线baseline，则以它的外边距的下边缘为基线。
取值 (对于table-cell元素)
baseline(andsub,super,text-top,text-bottom,<length>, and<percentage>)- 与同行单元格的基线对齐。
top- 单元格的内边距的上边缘与行的顶端对齐。
middle- 单元格垂直居中。
bottom- 单元格的内边距的下边缘与行的底端对齐。
可以取负值。
CSS 属性line-height
对于块级元素， line-height指定了元素内部line-boxes的最小高度。
对于非替代行内元素，line-height用于计算line box的高度。
对于替代行内元素，如button 或其他input元素，line-height没有影响（对于部分替代元素，line-height依然可以影响元素的样式布局）。
/* Keyword values *//* Unitless: use this number multiplied by the element's font size */line-height: 3.5;/* <length> values */line-height: 3em;/* <percentage> values */line-height: 34%;/* Global values */line-height: inherit;line-height: initial;line-height: unset;
line-height: normal;
取值
normal- 取决于用户代理。桌面浏览器（包括火狐浏览器）使用默认值，约为1.2，这取决于元素的 font-family。
<number>- 该属性的应用值是这个无单位数字
<number>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。 <length>- 指定
<length>用于计算 line box 的高度。查看<length>获取可能的单位。 <percentage>- 与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。
- Percentage和em可能会带来意想不到的结果，查看"备注"部分。
遇到的问题：
如何进行响应式布局?
1 学会运用 CSS3 Media Queries，根据不同的屏幕分辨率，选择应用不同的CSS 规则(
允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是浏览器的宽度。)
Media Queries语法简介：
max-width：若浏览区域的宽度小于400像素，则下方的CSS描述就会被应用：
1 2 3 4 5 | @media screen and (max-width:400px){ .class { background:#ccc; } } |
Min Width：若浏览区域的宽度大于800像素，则下方的CSS描述就会被应用：
1 2 3 4 5 6 | @media screen and (min-width:800px){ .class { background:#666; } } |
Device Width：若浏览设备的可视范围最大为480px，则下方的CSS描述就会被应用：(注：移动手机目前常见最大宽度为480px，如iPhone or Android Phone)
1 2 3 4 5 6 | @media screen and (max-device-width:480px){ .class { background:#000; } |
2 在网页头部加上viewport标签
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
浏览器推出了“viewport meta”标签，许多移动浏览器现在都支持这个标签，W3C 协议定义 viewport meta 目前还属于草案，很多人都會在html head 处加上 viewport 这个meta data，一个典型的移动端viewport如上所示：
该属性可以控制视窗口宽度的大小。它可以被设置为实际的具体像素width= 600或为特殊设备设置宽度值。
viewport设置属性如下：
width：可设定数值，或者指定为 device-width
height：可设定数值，或者指定為 device-height
initial-scale：第一次进入页面的初始比例
minimum-scale：允许缩小最小比例
maximum-scale：允许放大最大比例
user-scalable：允许使用者缩放，1 or 0 (yes or no)
3 不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度（margin-left:5px）的布局，也不能使用具有绝对宽度(例如：width：200px)的元素,而最好使用百分比宽度width:20%;或者with:auto;
Skill 4 字体最好不要用绝对大小(px)，而使用相对大小(rem)
1 | body { font: normal 100% Helvetica, Arial, sans-serif; } |
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
1 | h1 { font-size: 1.5em; } |
h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）
1 | .small { font-size: 0.875em; } |
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）
px pt em rem区别?
px 即pixel，像素，是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px；
pt 即point，是印刷行业常用单位，等于1/72英寸。
em 才是真正的“相对单位”（百分比嘛，当然是相对），而px和pt都是绝对单位（都有固定值）。所以，一般移动终端布局用em比较合适。
rem 是 CSS3 的引进新的单位,而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据您自己的需要。
5 流动布局（fluid grid）
流动布局的含义是各个位置都是浮动的，不是固定不变的
1 2 3 | .main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } |
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
Skill 6 图片的自动缩放，等比缩放
1 2 3 4 5 | img{ max-width: 100%; } |
要使图片按等比缩放，一般不需要规定图片高度。且最好不用background-image,因为这样不会按照等比缩放。
收获:
什么是 Responsive design (响应式设计)?
Responsive design (响应式设计) ：Ethan Marcote 的文章是大家认为 Responsive design (响应式设计) 的起源。他提出的Responsive design (响应式设计) 是采用 CSS 的 media query 技术，配合流体布局（ fluid grids ）和同样可以自适应的图片/视频等资源素材。就是把一行分为12个格子，PC上显示12个一行，而手机上显示2个或者1个一行。总而言之Responsive design (响应式设计) 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术。
响应式网页设计（英语：Responsive web design，通常缩写为RWD）是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。采用 RWD 设计的网站使用CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备：
流式网格概念要求页面元素使用相对单位如百分比或 字体排印学 调整大小，而不是绝对的单位如像素或点。灵活的图像也以相对单位调整大小（最大到 100%），以防止它们显示在包含它们的元素外面。
什么是 Adaptive design (自适应设计) ?
Adaptive design (自适应设计)：Adaptive design 是 Aaron Gustafson 的书的标题。他认为 Adaptive design 在包括 Responsive design 的 CSS media query 技术以外，Adaptive desgin 有可能会针对移动端用户减去内容，减去功能。Adaptive desgin 可以在服务器端就进行优化，把优化过的内容送到终端上。意思就是，服务器知道用户是从手机上访问的，所以就发送手机上专用的资源给终端，这样打开会更快些。Adaptive desgin其实是CDN不友好的，因为CDN不会识别访问设备哦，至少目前还没有一个支持。也要用 Javascript 来操作 HTML 来更适应移动设备的能力。Adaptive design 通常会牵扯到另外一个词 线性增强（progressive enhancement）。线性增强的意思，就是随着屏幕的大小的改变，功能会一点一点增强。
Responsive design (响应式设计) 和 Adaptive design (自适应设计) 的异同？
共同点 : 这两种方式都是为了解决使网页适应从小到大（现在到超大）的不同分辨率的屏幕的问题。这是两种不同的开发形式，二者的差别从开发的角度看更容易理解。
Responsive design (响应式设计)：建立一个网页，通过CSS Media Queries，Content－Based Breakpoint（基于内容的断点）等技术来改变网页的大小以适应不同分辨率的屏幕。
Adaptive design (自适应设计) : 为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。
自适应网页设计所包含的内容远不止流动布局。实际上它与“Progressive Enhancement（逐渐增强）”这一概念相同，就是向尽可能多的用户提供尽可能好的体验。 自适应布局是由多种固定宽度结合起来的一种布局。当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计。
Responsive design (响应式设计) : 网页和屏幕分辨率的关系是一对多的，即"一次设计，普遍适用"，所有设备的代码是一样的一套网页适应多个设备(自动识别屏幕宽度、并做出相应调整的网页设计。)，即同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局(layout)？
Adaptive design (自适应设计) 中网页和屏幕分辨率的关系则是一一对应，不同设备的代码是不一样的。
响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。
响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。
当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。
理解vertical-align和line-height的关系?
属性值“百分比值”暴露了vertical-align和line-height之间的关系
vertical-align的百分比值是相对于line-height计算的。举个简单的例子:
{
line-height: 30px;
vertical-align: -10%;
}
实际上，等同于：
{
line-height: 30px;
vertical-align: -3px;
/* = 30px * -10% */
}
返回列表
评论