FE入门 — html、css基础

标签

常用标签

通过看http://www.w3school.com.cn/tags/index.asp，熟悉以下html标签：

<p></p>
<div></div>
<input>
<span></span>
<a></a>
<i></i>
<ul></ul>
<ol></ol>
<li></li>
<select></select>和<option></option>
<hr/>
<br/>

CSS基础

什么是CSS

CSS（Cascading Style Sheets）层叠式样式表，用于定义如何显示HTML元素。

CSS语法

CSS规则由两个部分构成：选择器，一条及多条声明。

选择器{属性：样式属性} 

selector{
property:value;
property2:value;
property3:value;
……
}

例如，我们要设置html中input的字体颜色及字体大小，就这样写：

input{
color:red;
font-size:14px;
}

选择器

选择器种类很多，常见的如下：

//元素选择器
input{
color:red;
}

//id选择器
#div1{
width:50px;
}

//类选择器
.active{
	color：red；
}

//属性选择器
[title]
{
color:red;
}

除此之外还有后代、兄弟、伪类选择器等等，具体知识点，请见CSS相关课程。

行内元素与块级元素

html元素分两类：行内元素、块级元素。他们有如下区别：

1. 行内元素与块级元素直观上的区别：行内元素会在一条直线上排列，都是同一行的，水平方向排列；块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2. 块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素。
3. 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

常见块级元素：

<div> - 常用块级容易，也是css layout的主要标签
<form> - 交互表单
<h1>-<h6> - 标题
<hr> - 水平分隔线
<p> - 段落 
<table> - 表格
<ul> - 非排序列表
<ol> - 排序表单

常见行内元素：

<a> - 链接
<br> - 换行
<em> - 强调
<img> - 图片
<input> - 输入框
<label> - 表格标签 
<select> - 项目选择
<small> - 小字体文本 
<span> - 常用内联容器，定义文本内区块
<strong> - 粗体强调 
<textarea> - 多行文本输入框 
<var> - 定义变量

块级元素和行内元素相互是可以转换的，只需要设置该元素的display属性：

display:block;//转换为块级
display:inline；//转换为行内

display:inline-block；//具有行内元素特性，又能像块级一样调整宽高

盒模型

标准 w3c 盒子模型的范围包括 margin（外边距）、border（边框）、padding（内边距）、content（内容）。
我们的html中的每个元素都可以看做一个盒子，都有上述四个属性。

绝对定位与相对定位

绝对定位

绝对定位(position: absolute)：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含（body）。

绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

####相对定位

相对定位（position: relative）：相对定位是相对于元素在文档中的初始位置；

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline;display:block都是无效的。

但是float在IE6下的双边距bug就是用display:inline; 来解决的。
position:relative不会隐式改变display的类型。