1、图片元素默认是行内块，当把图片直接作为块状元素来使用的时候，需要注意使用属性：

img{
    border: none;
    display: block; /*默认的图片是行内元素，但是行内元素默认都会有一个小“border”，会造成Bug。*/
}

2、使用盒子浮动模型时，也要注意通过设置伪元素清除浮动：

/* 清除浮动 */
.clear_float::after{
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    zoom: 1;/*缩放元素*/
    height: 0;
}

3、overflow的使用：当div内的元素溢出时：

.top_nav_02{
            overflow: hidden;
        }

这个地方用了一个特殊技巧，即盒子模型溢出原理,对.top_nav_02设置overflow: hidden;即会将该元素隐藏. 有定位的,盖住没有定位的元素.有定位,沒有Z-index属性设置,则后面的盖住前面的。都有定位并都有z-index设置,则比较大小.

4、CSS选择器辨析

.logo_search>.center input[type='text']{
            width: 445px;
        }
 .logo_search>.center>input[type='submit']{
            width: 60px;
        }

第一个表示选择.center中所有type='text'的input元素（包括子元素；里面嵌套的），第二个表示.center子元素中type='text'的input元素（不包括子元素嵌套）。

5、vertical-align：垂直对齐，可用属性：baseline（默认）， middle， top。通常适用于图片（行内块）元素，跟文字（行内元素）的垂直方向的对齐。

三种属性值
三种属性值

使用分栏布局实现：

.main_01>.right{
            /* float: left; */
            height: 163px;
            width: 1000px;
            background-color: #ebebeb;
            column-width: 248px;
            column-gap: 2px;
            column-rule: 1px solid cyan;
            padding: 10px 0;
            box-sizing: border-box;
        }
.main_01>.right>img{
            width: 248px;
        }

分栏布局的实现
分栏布局的实现

使用行内块元素实现：

 .main_01>.right_demo{
            background-color: #ebebeb;
            height: 163px;
            width: 1000px;
            padding: 10px 0;
            box-sizing: border-box;
            float: left;
        }
 .main_01>.right_demo>img{
            display: inline-block;
            border-right: 1px solid cyan;
            padding-right: 1px;
        }
 .main_01>.right_demo>img:last-child{
            border: none;
        }