html＋css基础

慕课网html＋css基础课程 http://www.imooc.com/view/9 

html常用标签
          <q> 表示引用别人的话，自带双引号效果——用于单句引用
          <blockquote> 左右两侧同距缩进——用于长段文字的引用
          <br />xhtml1.0规范
          <hr />水平横线
          <address> 地址、联系方式（默认斜体强调）
          <code> 一行内的代码格式
          <pre> 多行的代码格式——预处理语句，保留源代码的空格和换行
          <table> 表格——默认没有表格线
          <th> 表头——默认粗体居中
          <table summary> 表格的简要介绍——便于搜索引擎理解表格内容，便于阅读浏览器显示
          <caption> 表格标题
          <a href=链接地址 title＝鼠标划过时显示的文本> ——默认链接显示为蓝色，点击后为紫色
          <a href=“mailto:yy@qq.com;xx@qq.com?subject&body&cc&bcc” >
cc 抄送地址 ｜bcc 密件抄送地址｜subject 邮件主题｜body 邮件内容 
          <img src＝“” alt＝“” title＝“”> alt 图片加载不出时的替换文本｜title 鼠标滑过图片时的显示文本
          <textarea cols＝“” rows＝“”> 文本域
          <select multiple＝“多选个数”> multiple表示多选（windows 下ctrl➕单击 ｜mac 下command＋单击）
          <input type＝“” id＝“” value＝“” placeholder＝“”> id 用于label标签和for属性对应｜name 提交表单时控件名｜placeholder 提示信息｜value 默认值
          <label for=“”> 点击标签内容等同于对for’属性对应控件进行操作

css不同样式
          css：内联式、嵌入式、外部式
          <span style=“”> 内联式
          <style type=“text/css”>
嵌入式
          <link href＝“css文件地址” rel=“stylesheet” type=“text/css”>
外部式

         相同权值下，按照“就近原则”显示 —— 标签选择器权值＝1；类选择器权值＝10；ID选择器权值＝100；继承选择器权值～0.
          标签选择器：标签{｝
          类选择器：.自定义名称define（英文）{} ——<span class=自定义名称define>
          id选择器；#自定义名称define（英文
4000
）｛｝——<span id=自定义名称define>
         类选择器和id选择器的区别：1.id选择器在一个html文档中只能使用一次，而类选择器可以使用多次；2.类选择器可以实现词列表（为一个元素同时设置多重样式），而id选择器词列表不存在
          子选择器：.自定义名称define>标签{} ——class为define名下的第一代子元素
          包含(后代)选择器：.自定义名称define 标签{} ——class为define名下的所有子代元素
          通用选择器： *{} ——对html中的任意标签都适用
          伪类选择符：a:hover{} 鼠标滑过链接时，显示状态的改变
          分组选择符：p,h1{} 为不同标签设置相同的属性

          css样式中，有的具有继承性：颜色、字号；有的不具备继承性：边框

          用户自己设置的浏览器样式>网页制作者设置的样式>浏览器默认设置的样式

          ［特殊］设置最高权值：p{color:red!important;} —— 覆盖用户自己设置的浏览器样式

          文字排版－－字体：(font-family:”Microsoft Yahei”)—— 网页常用字体为“微软雅黑”|字号(font-size:18px)｜颜色(color:red)｜粗体(font-weight:bold)｜斜体(font-style:italic)｜下划线(text-decoration:underline)｜删除线(text-decoration:line-through)
          段落排版－－缩进{text-indent}｜行高(line-height)｜字母间距(letter-spacing)｜单词间距(word-spacing)｜对齐(text-align)

块状与内联

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

 <img>、<input>

xx{display:block;}  将元素显示为块级元素

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

xx{display:inline;}

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

xx{display:inline-block;}

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒模型－－<div>,<ul>,<ol>,<p>,<h>,<table>

边框：粗细、样式、颜色

div{ border:2px solid red}
div{
     border-width:2px;
     border-style:solid;
     border-color:red;

}

border-width: thin | medium | thick（不常用，通常直接用px表示）
border-style: solid（实线）| dotted（点线）| dashed（虚线）
border-color: 十六进制颜色

允许为单一边框（border-top | border-bottom | border-left | border-right）设置粗细、样式及颜色

宽度和高度（内容范围）

div{ width:20px; height:20px}

填充
div{ padding:20px 10px 15px 30px}（上、右、下、左）
div{
     padding-top:20px;
     padding-right:10px;
     padding-bottom:15px;
     padding-left:30px; 
}
上下左右都一样：div{ padding:10px; }
上下为10px，左右为20px：div{ padding:10px 20px; }
左右同为20px：div{ padding:10px 20px 30px; }

边界
div{ margin:20px 10px 15px 30px }（类似于填充）

布局模型

布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的
CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer
和 Float。

在网页中，元素有三种布局模型：
1、流动模型（Flow）‘默认布局模型’
2、浮动模型 (Float)
3、层模型（Layer）

流动模型
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型
实现块状元素的并列显示
div{ float:left }

层模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

绝对定位
position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

相对定位
position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

偏移前的位置保留不动？
虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

固定定位
表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。不会受文档流动影响。

字体缩写
body{
    font:italic small-caps bold 12px/1.5em “宋体”,sans-serif;

}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

长度值
1.像素（css规范中假设’ 90像素＝1英寸 ’，实际情况是与显示器的像素值有关）
2.em（相对于字体的font－size值而言）
3.百分比（相比于字体的font－size值而言）

水平居中设置
如果被设置元素是行内元素，水平居中是通过给父元素设置text－align：center 来实现的
如果被设置元素是块状元素，且为定宽块状元素，水平居中可以通过设置左右margin值为“auto” 来实现居中
如果被设置元素是块状元素，且为不定宽块状元素      

加入 table 标签
设置 display:
inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
设置 position:relative 和
left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

加入table标签（利用table标签的长度自适应性，既不定义其长度也不默认父元素body的长度，根据文本长度决定）
          1）为需要设置的居中元素外面加入table标签（包括<tbody>、<tr>、<td>）
          2）为table设置 左右margin值为“auto”
来实现居中
 设置display:inline方法（改变块状元素为行内元素）
          1）将块状元素改为行内元素：ol{ display:inline; }
          2）使用 text-align:center; 实现居中
 设置position：relative方法
          1）给父元素设置float，再设置position:relative和left:50%
          2）子元素设置position:relative和left:-50%

               我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，
               ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

垂直居中
父元素高度确定的单行文本
          设置父元素的height和line－height一致（height为元素高度，line－height为行高［行间距］）行间距＝line-height － font-size ，分为两半，分别加到文本行的顶部和底部
         弊端：若文本内容过多超过块状元素的宽度，则部分文本无法正常显示
父元素高度确定的多行文本
          1.插入table标签（利用table标签下，用于设置垂直居中的vertical-align属性，默认值为middle）
                       css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用
          2.设置块状元素的display为table－cell，激活vertical－align属性
               这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

隐性改变display类型

          当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

                1. position : absolute 

                2. float : left 或 float:right 

          简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。