HTML

图片语义化

1.alt属性与tittle属性。

2.figure元素与figcaption元素。

<figure>
    <img src="" alt="" title="">
    <figcaption></figcaption>
</figure>

表单分组

fieldset标签、legend标签

<fieldset>
    <legend></legend>
    <input >
</fieldset>

优点：1.增强表单语义
     2.可定义fieldset元素的disabled属性来禁用整个组的表单元素

其他

• br：只适合用于p标签内换行
• del标签、ins标签：定义删除和更新后的文本
• img标签：
  • 图片作为HTML一部分，想被搜索引擎识别，应使用img
  • 反之，应使用背景图片

CSS

CSS单位

• 绝对单位：cm\mm\in\pt\pc 多用于平面印刷
• 相对单位：
  • px
  • % ：
    • width height font-size相对于父元素『相同属性』的值来计算
    • line-height相对于父元素font-size值来计算
    • vertical-align相对于当前元素的line-height值来计算
  • em ：
    • 当前元素的font-size的px值，如果当前元素font-size未定义，会继承父元素
    • 浏览器默认font-size为16px
    • 小技巧：首行缩进text-indent: 2em;
  • rem:

CSS特性

• 具有继承性的属性有三大类
  1. 文本相关：font-family font-size font-style font-weight font
     line-height texxt-align text-indent word-apacing
  2. 列表相关属性：list-sytle-image list-sytle-position list-sytle-type
     list-style
  3. 颜色：color
     • a标签默认颜色样式优先级更高，不会继承父元素颜色样式

CSS优先级

应用方式冲突

行内样式 > (内部样式 = 外部样式)

继承方式冲突

最近的祖元素获胜

指定样式冲突

样式权值高获胜，权值只针对指定样式，不用于继承

• 通配符 0
• 伪元素 元素选择器 1
  • 伪元素只有四个：
    • ::before 、::after 、 ::first-letter 、::first-line
• class选择器 伪类 属性选择器 10
• id选择器 100
• 行内样式 1000

继承样式和指定样式冲突

指定样式获胜

!important

会覆盖任何其他样式

CSS选择器

• 层次选择器
  • M N 后代选择器，选择M元素内部后代所有N元素
  • M>N 子代选择器，选择M元素内部子代所有N元素
  • M~N 兄弟选择器，选择M元素后所有同级N元素
  • M+N 相邻选择器，选择M元素相邻的下一个元素N
    • 技巧：li元素之间添加一横线

      li+li{border-top:1px solid red;}
      /*最后一个li元素没有相邻，没有可选去的*/
      

CSS规范

CSS命名规范（适用于开发阶段，发布阶段css文件都合并压缩）

1. CSS文件命名
   • reset.css重置样式，清除默认样式
   • global.css全局样式，定义公共、基础样式（导航、底部、全局字体、文字颜色）
   • themes.css主题样式
   • module.css模块样式
   • masster.css模板样式，用于母版页的样式
   • columns.css专栏样式
   • forms.css表单样式
   • mend.css补丁样式
   • print.css 打印样式
2. id和class命名
   • 避免class命名重复，命名取父元素class名为前缀
   • 页面常见部分命名规范

网页主体部分命名

网页细节部分命名

导航命名

其他

书写规范

<!-- 例子 -->

#main {
    /*影响文档流属性*/
    display             : inline-block    ;
    position            : absolute        ;
    top                 : 0               ;
    left                : 0               ;

    /*盒子模型属性*/
    width               : 100px           ;
    height              : 100px           ;
    border              : 1px solid gray  ;

    /*文本属性*/
    font-size           : 15px            ;
    font-weight         : bold            ;
    text-indent         : 2em             ;

    /*装饰属性*/
    color               : #000            ;
    background-color    : #fff            ;

    /*其他属性*/
    cursor              : pointer         ;
}

功能代码

具有某一特殊功能的代码块应该集中放置一起

<!-- 举例 -->
#main {

    /*单行文本居中方法需要使用2个属性实现，就将其写在一起*/
    height              : 50px              ;
    line-height         : 50px              ;

}

注释规范

1. 顶部注释

/*
    *@sescription:  文件说明
    *@author     :  作者
    *@update     :  更新时间
*/

2. 模块注释

/*导航部分，开始*/
...
/*导航部分，结束*/

3. 防止代码压缩删除注释，将需要保留的注释加 ! 符号

/*! 这条注释不会被压缩删掉 */

CSS reset

重置浏览器默认的CSS样式

• 避免使用*{...}，性能底下，需更具个人具体需求定义。

CSS盒子模型

1. 内容区
   • width
   • height
   • overflow
2. 内边距
   • padding-top
   • padding-right
   • padding-bottom
   • padding-left
3. 边框
   • border-width
   • border-style
   • border-color
4. 外边距
   • margin-top
   • margin-right
   • margin-bottom
   • margin-left
   • margin可指定负数，盒子向负值相反方向移动

border

border:0和border:none差异

• border : 0
  • 0px虽然看不见，但是浏览器还是会渲染，占内存
• border : none
  • 不占内存

padding

margin

外边距叠加

初衷是为了对文章更好排班，第一段外边距显示和其他段落外边距相等。

1. 同级元素
   • 会发生合并
2. 父子元素
   • 当父元素没有padding、border把外边距分隔开，父元素和子元素相邻上下外边距会合并
3. 空元素
   • 自身没有padding、border把外边距分隔开，上下外边距会叠加，再碰到其他元素外边距再次叠加

负margin

1. margin-top、margin-left为负时，当前元素拉向指定方向
2. margin-botton、marin-right为负时，后续元素拉向指定方向

负margin使用技巧

• 图片文字居中
  • vertical-align : text-bootom
  • img{margin: 0 3px -3px 0 ;}
• 自适应两列布局

<!-- HTML -->

   <div class="content"><p>主体，宽度自适应</p></div>
   <div class="sidebar"><p>侧边栏，固定宽度</p></div>

<!-- CSS  -->
   div{
       float: left;
   }

   .content{
       width: 100%;
       /* 将sidebar向左拉sidebar自身宽度的举例*/
       /*否则sidebar会被content的width百分百挤到下一行 */
       margin-right: -200px;
       background-color: green;
   }
   .content > p{
       /* 防止浏览器宽度不足，两列发生重叠 */
       /* siderbar自身宽度+两列间距10px */
       margin-right: 210px;
   }

   .sidebar{
       width: 200px;
       background-color: red;
   }

• 元素垂直居中
  1. 父元素position: relative;
  2. 需垂直居中元素
     • position: absolute;
     • top: 50%;
     • left: 50%;
     • margin-top: /* height 的一半 */
     • margin-left: /* width 的一半 */
• tab选项标签
  • margin-top: -1px; 解决tab切换问题。

overflow

display

inline行内元素

无法定义height、width,
无法定义margin-top、margin-bottom.
不能容纳block块元素

inline-block行内块元素

可定义height、width
可与其他inline行内元素同行

常见inline-block元素

• img
• input

display: none ;

与visibility: hidden;的区别

• display: none隐藏，不占据原来位置
• visibility: hidden隐藏，原来位置保留

display: table-cell ;

可以让元素以表格单元形式呈现

1. 大小不固定的图片垂直居中于元素

父元素{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
子元素{
    vertical-align: middle;
}

2. 等高布局
3. 自动平均划分元素

父元素{display: tabel ;}
子元素{display: table-cell ;}

去除inline-block元素间距

父元素{font-size: 0 ;}