html元素

• 百分比
  
  • 当margin设置成百分数的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算，在w3c的规范中也是这样描述的： margin 的百分比值参照其包含块的宽度进行计算，同样的padding如果设置成百分数的话，其盒子模型和margin是一样的。
  • 绝对定位和相对定位中使用百分比设置top值时,根据父元素高度计算

• a标签的使用
  

  • HTML 链接 - target 属性
    使用 Target 属性，你可以定义被链接的文档在何处显示。
    下面的这行会在新窗口打开文档：
    

    <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

  • HTML 链接 - name 属性
    name 属性规定锚（anchor）的名称。
    首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>

• 元素居中

  • 块状元素解决方案:添加margin-left，margin-right属性值为auto即可，如下：
    margin: 0 auto;
    注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度

  • 多个块状元素解决方案:

    • 设置这几个块状的元素display属性为inline-block，并且设置父元素text-align属性为 center即可
    • 设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可

  • 垂直居中：

    • 单行的行内元素解决方案 :将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中
    • 多行的行内元素解决方案: 使用display:table-cell和vertical-align来控制元素的居中效果
    • 已知高度的块状元素解决方案:将待居中元素设置为绝对定位，并且设置margin-top为居中元素高度一半的 负值:/* 以下为居中代码 */
      .item{
top: 50%;
margin-top: -50px;
position: absolute;
padding:0;
}
    • 未知高度的块状元素解决方案:方法类似上一节使用的方式，因为无法指定margin-top的偏移量，所以这 里使用transform属性:
      .item{
top: 50%;
position: absolute;
transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}
    • 水平垂直居中：
      
      • 已知高度和宽度的元素解决方案:将设置元素绝对定位，并且设置margin-left和margin-right为居中元素(高度或宽度/2)的负值即可
      • 未知高度和宽度元素解决方案:将设置元素绝对定位，并且设置transform的translate为Ｘ，Ｙ轴同 时移动-50%即可,以下代码保证元素在水平和垂直方向上绝对居中
        .item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
      • 使用flex布局实现,设置flex布局，并且定义居中元素的父元素justify-content和align-items属性 为center即可
.item{
background: #222;
color: #FFF;
width: 100px;
height: 100px;
}
.parent{
display: flex;
justify-content:center;
align-items: center;
background: #AAA;
height: 300px;
}

  • flex:
    在flexbox纵向布局(即，flex-direction:column)中，如果我们需要控制子元素对齐的位置，可以使用如下两个 属性：align-items justify-content,align-items ：控制纵向布局中子元素的左右对齐方式,justify-content ：控制纵向布局中子元素的上下对齐方式

• CSS3的calc()使用