美文网首页
关于html css的一些要注意的点

关于html css的一些要注意的点

作者: foxyhudson | 来源:发表于2017-03-12 13:48 被阅读0次


    1.对img input 设置 vertical-align:top 对齐其基线,不然可能会有1像素的对齐偏差问题

    2.行内块和行内块之间会识别空格/行内和行内之间会识别空格 包括换行

    3.z-index 是以相同的元素为根基 子就算设置的再高 父设置的低也没用

    要让z-index 有效必须 是position:static外的定位方式

    4.清除浮动式清除浮动带来的影响

    一般用:0.设置父元素的高

                   1.>overflow:hidden

                   2.>clearfix:after,clearfix:before{

                         content='';

                         display=table;

                    }

                   clearfix:after{

                         clear:both

                   }

                  clearfix{

                         zoom:1

                  }

    5.a标签包div不符合W3C标准 可以把a直接转为块

    6.将页面布局好 一部分一部分写的时候 大模块只设宽度别设高度 让其子元素撑开

    7.关于文字换行

    禁止文字换行:               white-space : nowrap 

    超出隐藏:                       overflow : hidden

    超出的字用省略号替代: text-overflow:ellipsis 

    设置文字自动换行:        word-wrap:break-word

    8.布局最基本的3种方式: 文档流 浮动 绝对定位

    9.绝对定位如何居中:

    left:50%;

    top:50%

    margin-top:-(元素的高/2)

    margin-left:-(元素的宽/2)

    10.相对定位 也可以设置 4个方向的值进行便宜 但是他所占的位置还是原始位置没有脱离文档流只是视觉上变化

    11.关于浮动的3要素

    浮动的元素和他的父元素最好设置宽;只要有一个浮动同级的其他元素也要设置浮动;记得清除浮动带来的影响

    12.box-sizing css3的属性

    content-box 需要计算 padding border width

    border-box 无需计算 只width是指最外的width

    13.行内元素不能设置宽高 由自身撑开 可以给他加浮动加了浮动就可设置宽高

    行内元素不支持 text-indent  line-height,并且只能设置margin-left/right

    14.命名 类用 -隔开  id用_隔开 js里用驼峰

    15.p标签不设置高度也可以自动换行

    16.为了seo 可以用h1来包裹a a元素里的文字 设置text-indent 负值 a转为块设置背景图

    17.margin 拖拽问题  解决:overflow:hidden / border边框;margin塌陷 top/bottom 会合并;margin居中 margin left/right :auto

    18 表格 css属性 border-collapse:collapse 折线 变成1根线 设border为多少就是多少

    类比 table 属性值 cellspacing cellpadding 会更精确;

    border-spacing 边框线之间的边距,一般 border-collapse为separate 才行 不折叠;

    19.!important:将此属性设置在你想现实的样式属性值后面,分号前面

    20.a标签的伪类 顺序 lvha     a:link        a:visited  a:hover  a:active

    21.背景色 rgba 和 opacity区别 rgba可以背景透明里面的不透明 而 opacity则全部透明

    22.表单设域 和描述  

    ``` <form>

              <fieldset>

                <legend>描述</legend>

            </fieldset>

        </form>

    23.表单里的用户体验label标签:可以使label标签里的字 选中 触发相应控件也被选中

    有2种方式:

    >1.label 标签包含 其他表单标签

    >2.label 标签 for=‘id’ 属性  相应表单标签里需要加id

    24.seo搜索引擎优化

    >1.给每个标签语意化;

    >2.给img标签 title 以及alt;

    >3.有h1标签 一般用于logo;

    >4.给每个a标签 title;

    >5.meta 里加入 author  description keywords

    相关文章

      网友评论

          本文标题:关于html css的一些要注意的点

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