百度IFE之Task1学习笔记(HTML、CSS基础)

23 Apr 2015

最近每天写写代码感觉很充实,任务一里面提供了很多学习资源,只不过刚开始担心最后的综合练习时间不够,所以我就根据自己已经掌握的知识直接按照效果图做网页了,在做的过程中碰到疑问的地方再找相关资料。现在任务一完成并且pr之后,在开始任务二之前,我觉得还是有必要好好学习这些资料,做个简单的知识点总结。其实在写代码的时候,经常觉得实现一种效果会有许多种方法,我虽然实现了效果图上的样式,但是未必是最好的方法,而且一些地方兼容性也没有处理好,所以现在回过头看看Task1里面提到的参考资料,说不定会从中找到新的思路。^_^

学习笔记正式开始 》》

一、CSS文本相关属性整理

---主要参考w3school---

【text-indent】----文本块首行文本缩进(常用值2em)

text-indent还可以使用负值,实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边,但是这样可能会使首行的某些文本超出浏览器的左边界,所以可以针对负缩进再加上一个大小相同正负相反的padding-left或margin-left。

【text-transform】----字符转换。四个值:默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。uppercase 和 lowercase 将文本转换为全大写和全小写字符。capitalize 只对每个单词的首字母大写。

【text-decoration】----文本装饰。五个值:none 值会关闭原本应用到一个元素上的所有装饰;underline 会对元素加下划线;overline 上划线;line-through在文本中间画一个贯穿线;blink 会让文本闪烁。

【text-align】---- 水平对齐
属性值:left / center / right / justify (两端对齐)/inherit(IE不支持)

  • 注意: text-align:center与 <CENTER>元素的作用一样,但实际上二者大不相同。
    <CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。

【word-spacing】----字间隔。默认值 normal 与设置值为 0 是一样的。接受一个正长度值(增加间隔)或负长度值(减小间隔)。

【white-space】----处理空白符。五个值:normal:合并所有的空白符,并忽略换行符,允许自动换行;pre:保留空白符和换行符,不允许自动换行;nowrap:合并空白符、忽略换行符,它会防止元素中的文本换行,除非使用了一个 br 元素;pre-wrap:浏览器不仅会保留空白符并保留换行符,还允许自动换行;pre-line:合并空白符、保留换行符,并允许自动换行.

【color】----设置文本颜色。

【line-height】----设置行高。

【font】----在一个声明中设置所有字体属性。可以按顺序设置如下属性:font-style 、font-variant、font-weight、font-size/line-height、font-family。可以不设置其中的某个值,未设置的属性会使用其默认值。

【font-family】----定义文本的字体系列。
在 CSS 中,有两种不同类型的字体系列名称:
通用字体系列 - 拥有相似外观的字体系统组合( Serif / Sans-serif / Monospace / Cursive / Fantasy )
特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")

【font-size】----设置文本的大小。值可以是绝对或相对值。可用像素或者em。1em 等于当前的字体尺寸。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em:pixels/16=em (注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)

  • 注意:不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。要使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落。(语义化啊!!!看来任务一里面有些标签需要修改一下。。真是后知后觉。。)

  • 结合使用百分比和 EM 在所有浏览器调整文本大小均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值。如:

   body {font-size:100%;}    
   h1 {font-size:3.75em;}

【font-weight】----设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。

【font-face】----font-face是css3中允许使用自定义字体的一个模块,主要是把自己定义的Web字体嵌入网页中.

深入了解行高

默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值。可以有5种方式来定义line-height( normal / inherit / 百分比 / 长度值(px,em等) /纯数字 如

body{line-height:1.2}

line-height的继承比较奇妙:
当使用百分比时,比如body的font-size为16px,line-height为120%,后代元素会继承相同的计算值(19.2px)而忽略自身的font-size.使用百分比或长度值,line-height都不会随相关的font-size做相应的比例缩放。
当使用normal(约为1.2)或纯数字时,后代元素会基于font-size来计算line-height,所以line-height会随着相关的font-size做相应的比例缩放。

二、CSS布局技巧整理

---布局是个重点啊!!!---

PS:好喜欢这篇 学习CSS布局 的讲解风格😍,尤其是里面关于position和float部分讲得很赞,配上图看起来形象了很多。

下面开始整理一下:

关于布局需要知道的几件事:

1.关于居中布局
最常用的应该就是把左右margin设为auto吧。

#main {
  width: 600px;
  margin: 0 auto; 
}

元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。
不足:当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。

解决:

#main {
  max-width: 600px;
  margin: 0 auto; 
}

在这种情况下使用 max-width替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要,而且所有的主流浏览器包括IE7+在内都支持 max-width。

2.关于清除浮动
在使用浮动的时候,可能会使内层溢出到容器的外面,一种比较丑陋的方法可以解决这个问题,它叫做清除浮动 (clearfix hack)做法就是设置容器的overflow值为auto。如果要兼容IE6,再为外层容器加一个样式:zoom:1

.clearfix {  
  overflow: auto;  
  zoom: 1;  
}

(清除浮动有很多窍门,可以单独整理成一篇了,上面的简单方法可以在今天所有的主要浏览器上工作。
关于清除浮动,更详细的戳这里→ 那些年我们一起清楚过的浮动 一丝姐姐提供了许多方案,精神食粮啊!)

3.媒体查询----响应式设计的强大工具
响应式设计(Responsive Design)是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略,这样可以让网站在任何情况下显示的很棒! 比如下面的做法,使用百分比宽度来布局,然后在浏览器变窄到无法容纳侧边栏中的菜单时,把布局显示成一列:

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

(觉得要适配移动浏览器,media还是很好用,还有个meta viewport更不明觉厉,先mark一下,后续关注)

4.百分比宽度布局
这种方法对图片很有用,比如设置img的 width:50% 可以实现图片宽度始终是容器宽度的50%,甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度!

5.利用inline-block布局
通过设置元素的display属性,将元素变为行内块,可以使多个元素呈水平分布,这种做法很简单,不过需要额外的工作来得到 IE6 和 IE7 支持。
需要注意的是
vertical-align 属性会影响到 inline-block 元素,你可能会把它的值设置为 top ;你需要设置每一列的宽度;如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙。

6.利用column实现多列布局
利用一系列新的CSS属性,可以很轻松的实现文字的多列布局。这里有一个三列布局:

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

不足:CSS columns是很新的标准,所以需要使用前缀,并且它不被IE9及以下和Opera Mini支持。

7.利用flexbox进行布局
flexbox布局很方便,可以简单实现垂直居中布局,还可以实现许多复杂的布局,遗憾的是目前只能在支持 flexbox 的 Chrome 浏览器中运行。 关于flexbox的详细介绍,可以看这里→Dive into Flexbox

8.两侧固定中间自适应的三列布局

实现方式一双飞翼布局
【具体做法】
html部分

 <div id="header">
     <p>header</p>
 </div>
 <div id="content">
     <div class="main">
         <div class="main-wrap">
             <p>test</p>
         </div>
     </div>
     <div class="sub">
         <p>sub</p>
     </div>
     <div class="extra">
         <p>extra</p>
     </div>
 </div>
 <div id="footer">
     <p>footer</p>
 </div>

css部分

* {
    padding:0px;
    margin:0px;
    text-align:center;
}
#header, #footer {
    background-color:#aaa;
}
.main {
    float:left;
    width:100%;
    background-color:white;
}
.main-wrap {
    margin:0 230px 0 190px;
}
.sub {
    float:left;
    width:190px;
    margin-left:-100%;
    background-color:yellow;
}
.extra {
    float:left;
    width:230px;
    margin-left:-230px;
    background-color:purple;
}

实现方法二神奇的BFC
【具体做法】 html部分

<div id="header"> 
    <p>header</p>
</div>
<div class="sub">
    <p>sub</p> 
</div>
<div class="extra">
    <p>extra</p>
</div>
<div class="main">
    <p>main</p>
</div>
<div id="footer">
    <p>footer</p>
</div>

css部分

* {
    padding:0;
    margin:0;
    text-align:center;
}
#header,#footer {
    background-color:#aaa;
}
.main {
    overflow:hidden;
    background-color:blue;
}
.sub {
    float:left;
    width:190px;
    background-color:yellow;
 }
.extra {
    float:right;
    width:230px;
    background-color:purple;
 }

BFC能用来做什么?

BFC(Block Formatting Context)直译为“块级格式化范围”。

是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

a、不和浮动元素重叠

如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个覆盖的现象,很多自适应的两栏布局就是这么做的。可以对后一个元素设置overflow:hidden来创建BFC。由于ie的原因需要再加一个触发haslayout的zoom:1

b、清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了(IE Haslayout)。

c、解决上下相邻两个元素重叠
生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以做法是把两个容器分别放在两个据有BFC的包裹容器中。

最后

好久没有写长博客了
虽然大部分是摘录,但是整理起来也挺费时间的,不过看了许多学习资料还是觉得获益匪浅。

顺便贴一下自己任务一的在线demo吧,戳这里→Task1 by Lucky7ky

还有许多资料,由于任务二还在等着我😢,来不及细看了,收录一下,方便以后学习:CSS渐变HTML、CSS的代码规范顾轶灵:Web语义化CSS浏览器兼容性列表 ...