html、css心得

·DIV布局，CSS控制。

·<style></style>CSS标签，用来控制div的属性，如宽、高、颜色等。其中，# + “div的id” 可以单独操作某一块DIV的属性，也可以通过.+“div的class”或者标签名来控制该class下（标签）所有DIV属性（id控制的优先级高于class和标签）。

·DIV默认是上下排序，因为它的宽度：100%，即占满浏览器的宽度，高则是根据内容自动适配。

（要解决这个问题，如需要两个div并排，则需要浮动（float），如两个div均加入：float：left，注意需要设置宽度，若无宽度则系统根据div内容自动适配。）

·漂浮（float）的DIV会浮动在普通DIV的上方，所以当两者在位置上冲突时，前者会“挡住”后者。

·父div可以被子div的撑开：在父div上加上overflow:auto；父div不允许被子div的撑开：在父div上加上overflow:hidden(超出隐藏)。

（overflow:auto，被撑开，但是在原有网页面板中还是占据原来的大小，即宽、高度不变，多了一个滚动条；overflow:hidden，超出父DIV的部分不显示。若子div是浮动元素，则父div会直接被挡住，宽、高不会有任何变化。？也可以来防止被DIV其他覆盖？）

·DIV不可用纯数字作为id，CSS无法操作ID为纯数字的DIV。

·div水平居中： margin-left:auto;margin-right:auto;（设置好width后）

·DIV边缘距离：margin，表示DIV和上一级的距离。

·margin重叠：当两个DIV之间存在margin值，则两个DIV之间的距离为较大margin值，而非两个值相加。此现象只存在于普通DIV中，漂浮DIV的距离为两个margin值相加。

·普通DIV默认新起一行。

·<span></span>，行内元素，只是作用于一行而不会改变当前位置，只能在行内的水平方向设置间距（margin）和padding，一般用于修饰行内的文字的颜色（color）和背景颜色（background）。（ 行内元素：a - 锚点、abbr - 缩写、acronym - 首字、b - 粗体(不推荐)、bdo - bidi override、big - 大字体、br - 换行、cite - 引用、code - 计算机代码(在引用源码的时候需要)、dfn - 定义字段、em - 强调、font - 字体设定(不推荐)、i - 斜体、img - 图片、input - 输入框、kbd - 定义键盘文本、label - 表格标签、q - 短引用、s - 中划线(不推荐)、samp - 定义范例计算机代码、select - 项目选择、small - 小字体文本、span - 常用内联容器，定义文本内区块、strike - 中划线、strong - 粗体强调、sub - 下标、sup - 上标、textarea - 多行文本输入框、tt - 电传文本、u - 下划线、var - 定义变量；块状元素：address - 地址、blockquote - 块引用、center - 举中对齐块、dir - 目录列表、div - 常用块级容易，也是CSS layout的主要标签、dl - 定义列表、fieldset - form控制组、form - 交互表单、h1 - 大标题、h2 - 副标题、h3 - 3级标题、h4 - 4级标题、h5 - 5级标题、h6 - 6级标题、hr - 水平分隔线、isindex - input prompt、menu - 菜单列表、noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容、noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）、ol - 有序表单、p - 段落、pre - 格式化文本、table - 表格、ul - 无序列表）

·display：显示属性。block：转为块状元素；inline：转为行内元素；none：不显示。

·text-indent：10px，段落缩进，多用于p标签中。

·text-align：排列方式，center：居中；right：居右；left：居左。

·font：字属性。如font-style：字体样式；font-weight：加粗；font-size：大小；font-family：字体等...

·line：行属性。如line-height：行高。

·font快速定义：font：intalic bold 23px/46px ”Simhei"；顺序优先级：样式、加粗、大小/行高、字体。

·font-family：A,B,C....sans-serif；预留字体，当用户机器上没有A字体时候会调用B，没有B会调用C...依次顺序；其中可用一类字体作为做恶劣的情况，如sans-serif（无-衬线）、serif（有衬线）。

·background 快速设置顺序：颜色（color）、图片（url（））、重复（repear）、attachment、位置（position）

·css引入方式：1、外部导入：<link rel="stylesheet" href='""/>;2、头部写入：<style>...</style>;3、多文件导入，在css文件中加入：@import url（*.css）；4、直接在标签内加入：style=“...”；

·css初始化：不同的浏览器对margin，border，font-size等解析略有不同，所以为了尽可能使得所有浏览器显示效果一致，所以使用css进行初始化。（初始化代码可以从各个大型网站上摘取。）

·<ul></ul>无序列表。

·<ol></ol>有序列表。

·<li></li>，在<ul></ul>和<ol></ol>标签中使用。list-style-type可控制“小黑点”的样式。

·<table></table>表格。border-collapse，控制<td>的属性，默认下每个<td>都是独立的，如果要使t<td>之间公用边，则把border-collapse属性设置成“collapse”；border-spacing用来设置边框之间的距离。

·<tr></tr>行，在<table></table>中使用。

·<td></td>列，在<td></td>中使用。colspan横向合并单元格，colspan="4"，表示该单元格横跨4列；rowspan纵向合并单元格，colspan="2"，表示该单元格把下方单元格合并了。

·<a href="..." target=“_blank" title="..."></a>,超链接标签、锚点标签；超链接标签：target=“_blank”，使用新窗口打开该链接；title="..."，鼠标盘旋提示；锚点：快速跳转到锚点放置处，<a name="p1"></a>,此时在网页中url中加入"#p1“，网页会自动导航到该锚点处。实际用法：<a href=”(当前页地址)#p1"></a>

·伪类：css允许我们针对a标签的4中状态（常态、鼠标盘旋、鼠标按下、鼠标松开）设置各自的css特征。css： a:link{}常态(link可省略)、a:visited{}松开/访问过的、a:hover{}盘旋、a:active{}按下(一般不用写)。注：必须按照l-v-h-a的顺序来写！！！