1、图片元素默认是行内块，当把图片直接作为块状元素来使...
请注意，本文编写于 2104 天前，最后修改于 174 天前，其中某些信息可能已经过时。
1、图片元素默认是行内块，当把图片直接作为块状元素来使用的时候，需要注意使用属性：
代码语言：javascript复制img{
border: none;
display: block; /*默认的图片是行内元素，但是行内元素默认都会有一个小“border”，会造成Bug。*/
}2、使用盒子浮动模型时，也要注意通过设置伪元素清除浮动：
代码语言：javascript复制/* 清除浮动 */
.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选择器辨析
代码语言：javascript复制.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。通常适用于图片（行内块）元素，跟文字（行内元素）的垂直方向的对齐。
三种属性值
使用分栏布局实现：
代码语言：javascript复制.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;
}
分栏布局的实现
使用行内块元素实现：
代码语言：javascript复制 .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;
}----- END -----
