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（英文）｛｝——<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” 来实现居中
• 如果被设置元素是块状元素，且为不定宽块状元素      

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

1. 加入table标签（利用table标签的长度自适应性，既不定义其长度也不默认父元素body的长度，根据文本长度决定）

          1）为需要设置的居中元素外面加入table标签（包括<tbody>、<tr>、<td>）

          2）为table设置  左右margin值为“auto” 来实现居中

2.  设置display:inline方法（改变块状元素为行内元素）

          1）将块状元素改为行内元素：ol{ display:inline; }

          2）使用 text-align:center; 实现居中

3.  设置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 了，且默认宽度不占满父元素。