美文网首页
html+css基础知识

html+css基础知识

作者: lucky婧 | 来源:发表于2016-12-21 09:08 被阅读0次

    Xhtml规范

        1.页面必须有文档头
        2.Img必须有alt
        3.双标签必须闭合
        4.单标签必须合理闭合
        5.标签名和标签的属性必须小写
        6.符号必须用英文符号
     (引号必须用双引号,用在行间时用单引号)
    

    书写顺序

    background:url color no-repeat position;
    font:weight style size family;
    

    省略号 (必须给宽度)

    white-space:nowrap;   强制不换行
    overflow:hidden;     溢出隐藏
    text-overflow:ellipsis;   省略号
    

    块标签 div h1-h6 p ul ol dl li dt dd

    1.支持宽高
    2.独占一行
    3.不受换行和空格的影响
    4.宽度参照父级
    5.支持四个方向的padding和margin
    6.块元素能嵌套所有标签
    7.特殊的:P标签只能嵌套行内
    

    行内标签span a em i b strong

    1.不支持宽高
    2.受换行和空格的影响
    3.合并到一行
    4.宽高根据内容撑开
    5.不支持上下的margin和padding
    6.行内只能嵌套行内 不能嵌套自己
    7.特殊的:a 能嵌套所有标签 都可以嵌套img
    

    行内块img input

     1.支持宽高
     2.受换行和空格的影响
     3.合并到一行
    

    嵌套规则

    1.块元素能包含所有元素     
    2.P不能包块,只能包行内     
    3.行内元素不能包块元素      
    4.行内元素可以包行内元素,但是不能包自己     
    5.a标签可以包任何元素但是不能包自己       
    6.任何标签都可以包img      
    7.行内元素即使转化成块,也不能包块元素
    

    标签伪类顺序

    link visited hover active  顺序  l v h a
    

    关于继承

    1.所有和文字相关的样式都能继承 
    2.a标签不能继承颜色       
    3.b strong h1-h6 不能继承加粗      
    4.i em 不能继承斜体
    

    内边距/内补白/内补丁

    1.块元素支持4个方向上的padding       
    2.行内元素支持左右方向的padding,不支持上下       
    3.父级最好给宽,子级不用给   
    4.给padding的时候要减去相应的值
    

    外边距/外补白/外补丁

    margin 发生合并时,取最大值;
    margin给上边距的时候发生拖拽      
    1.加border   
    2.加overflow:hidden;     
    3.换做给父级加padding (推荐)
    

    优先级/权重

    行内样式>id>class>标签>*
    

    盒子模型

    width height padding border
    

    浮动 float的特性

    1.浮动有方向left right none
    2.合并到一行
    3.脱离文档流
    4.父级宽度不够会掉下来
    5.浮动后宽度尽可能的窄,窄到内容的宽度
    6.行内元素给浮动后变成了块元素
    7.文本环绕
    8.尽可能的往上飘
    9.同级元素都要给浮动
    10.给浮动之后要清浮动
    11.尽量给宽度
    

    清浮动的3种方法

    1.父级加:overflow:hidden;
    2.同级加:clear:both
    3.父级加:clearFix:after{ content:'';display:block;clear:both}
             clearFix{ zoom:1;}
    

    定位position

    relative 相对定位
    1.不能改变元素的本质
    2.不脱离文档流
    3.根据自己定位
    
     absolute 绝对定位         
    1.宽度尽可能的窄,窄到内容的宽度           
    2.可以把行内元素变成块元素           
    3.父级没有相对定位时,会一直往上找直到body
         ```
    

    fixed 固定定位
    1.根据可视区定位
    2.行内元素转化为块
    3.脱离文档流
    4.块元素会变窄

    层级 z-index       
    

    1.最大值2的32次方,值越大层级越高
    2.子级永远在父级的上面
    3.只有在有定位的时候才好用

    透明处理
    

    opacity:0-1
    filter:alpha(opacity:0-100)

    雪碧图/精灵图
    

    大小不宜超过50k
    可以减少请求,不利于维护
    必须给负值

     表格
    

    <table>
    <thead></thead>表头
    <tbody></tbody>表身
    <tfoot></tfoot>表尾
    </table>
    th,td{ border:1px solid #000; }
    table{ border-collapse:collapse;}合并单元格
    colspan 列合并
    rowspan 行合并
    align="center" 水平方向
    left center right
    valign="middle" 垂直方向
    top middle bottom

    相关文章

      网友评论

          本文标题:html+css基础知识

          本文链接:https://www.haomeiwen.com/subject/wrgfvttx.html