web前端 html/css总结点

1、html
块级、内联
<img src="" alt="图片未加载提示" title="鼠标悬浮提示">
<a href="链接地址" target="_blank">click</a>
表格：rowspan,合并行
     colspan,和并列
<input type="checkbox" name="hoby" value="football" checked="checked">
<fieldset><input type="text"></fieldset>

2、css
基本选择器
组合选择器：
    .inner p    后代选择器
        ul.item li(标签.class 子标签）
    .outer > p  子代选择器
    .inner p,.p4    多元素选择器
    .outer + p  毗邻选择器
    .outer ~ p  兄弟选择器
属性选择器：
    div[name]   包含name属性
    div[name="egon"]    name属性为egon
    div[name*="2"]  包含"2"的属性
    div[name~="egon"]   空格分隔的多个值中包含"eogn"
    div[name^/$="egon"] 以egon开头或结尾的属性

3、css2，各种属性
伪类：
    a:link/hover/active/visited(未访问/鼠标移到/点击/已点击后）
    p:before/after  在每个<p>标签前后插入内容
ul{list-style:none;}    列表无样式（无序列）
文本属性：
    text-align: center; 左右居中
    line-height: 300px; 上下间距，居中
margin/padding
display:inner-block/none
浮动：float：left/right
清除浮动：clear:left/right/none/both
position：relative/absolute/fixed  相对定位/绝对定位/脱离文档流
    父级position:relative;子级position:absolute;left:20px;top:20px;
    参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可.
继承及优先级：style=""(内联样式)>id>class>p

4、css3
标签锚：
    <a href=".c1">第一章</a>
    <a href="#c2>第二章</a>
    <div class="c1">第一章</a>
    <div id="c2>第二章</a>
解决float塌陷：相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果
    .clearfix:after{content:"";display:block;clear:both'}
    <div class="header" clearfix">
解决margin塌陷：被塌陷的父级样式加overflow:hidden
*****overflow：scroll/hidden(溢出滚动条/溢出隐藏)