CSS中用display属性布局遇到的问题及解决办法
2017-07-18 20:08
906 查看
网页布局中，我们常常要用到display这个属性，将一些块级元素转换成内联块级元素，使得他们对齐方式为两端对齐，但是，难免会遇到小问题，现在小编就来盘点两个小问题。
首先，我们先建立一个大盒子，里面放着两个小盒子，对盒子设置相应的样式，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Title</title>
<style>
.body{
width:600px;
height:400px;
background: #Aaa;
}
.left{
width:200px;
height:200px;
background: #aa48a9;
}
.right{
width:200px;
height:200px;
background: #aa3a4f;
}
</style>
<script></script>
</head>
<body>
<div class="body">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>效果图：
然后我们想让两个小盒子水平对齐，只需将他们的display属性设置为“inline-block”即可，在css样式里加上：
.left,.right{
display: inline-block;
}
效果如图;
那么我们会发现，两个小盒子中间会留有间距，按照道理来说，不应该有间距，而是紧挨着的，那么这是为什么呢？原来，我们书写块级标签的时候，会习惯性的换行，导致两个标签元素之间会有空格出现，而当我们将div这个块级元素转化为内联块级元素后，他就具备了内联标签的性质，两个内联元素间的空格间距在网页上也会显示出来，同样，解决办法就呼之欲出了，最简单的方法我们只需将两个div紧挨在一起写，就可以。
之前的代码图：
红色方框的距离就是两个标签之间的间距，在网页 上显示出来就是图2的样子，现在我们只需将这个空格去点就行了，
修改之后的效果：两个盒子间的间距就消除了，（当然解决方法不止这一个，还可以用绝对/相对定位、或者设置盒子的左右外边距来解决）
接下来，看第二个问题，我们往两个小盒子里面放几组p标签，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Title</title>
<style>
.body{
width:600px;
height:400px;
background: #Aaa;
}
.left,.right{
display: inline-block;
}
.left{
width:200px;
height:200px;
background: #aa48a9;
}
.right{
width:200px;
height:200px;
background: #aa3a4f;
}
</style>
<script></script>
</head>
<body>
<div class="body">
<div class="left">
<p>666</p>
<p>666</p>
<p>666</p>
</div><div class="right">
<p>666</p>
<p>666</p>
<p>666</p>
<p>666</p>
<p>666</p>
</div>
</div>
</body>
</html>在看效果：
两个盒子居然上下错开了，这是为什么呢？我们观察一下发现，第一个盒子中最后一行666与第二个盒子中最后一行666是对齐的，那么考虑是不是文本的对其方式出了问题，经小编百度后，发现，网页中文本的垂直对其方式默认都是基线对齐，也就是baseline。这也就解释了两个盒子为什么会上下错开来，
1.vertical-align的语法
vertical-align属性的具体定义列表如下：
语法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明： 设置元素内容的垂直对齐方式
值： baseline：基线对齐；sub：下标；super：上标；top：顶端对齐；text-top：与文本的顶端对齐；middle：中部对齐；bottom：底端对齐；
text-bottom：文本的底端对齐；
百分比和长度：CSS2，可为负数。
初始值： baseline
继承性： 不继承
适用于： 行内元素和单元格（table-cell）元素
媒体： 视觉
计算值： 百分比和长度值为绝对长度；其他同指定值
特别提醒：vertical-align只对行内元素有效，对块级元素无效。
关于使用的详细介绍可以参考逍遥叹的《垂直对齐：vertical-align属性（转）》那么我们只要将div的“vertical-align”值设置成除了“baseline”以外的其他值就行了，参考代码：
.left,.right{
display: inline-block;
vertical-align: bottom;
}效果图：
好了，到这里这两个小问题就解决了，其实以后还会遇到更多的问题，百度，真的很强大！！！
（完）如有疑问，欢迎留言骚扰
首先，我们先建立一个大盒子，里面放着两个小盒子，对盒子设置相应的样式，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Title</title>
<style>
.body{
width:600px;
height:400px;
background: #Aaa;
}
.left{
width:200px;
height:200px;
background: #aa48a9;
}
.right{
width:200px;
height:200px;
background: #aa3a4f;
}
</style>
<script></script>
</head>
<body>
<div class="body">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>效果图：
然后我们想让两个小盒子水平对齐，只需将他们的display属性设置为“inline-block”即可，在css样式里加上：
.left,.right{
display: inline-block;
}
效果如图;
那么我们会发现，两个小盒子中间会留有间距，按照道理来说，不应该有间距，而是紧挨着的，那么这是为什么呢？原来，我们书写块级标签的时候，会习惯性的换行，导致两个标签元素之间会有空格出现，而当我们将div这个块级元素转化为内联块级元素后，他就具备了内联标签的性质，两个内联元素间的空格间距在网页上也会显示出来，同样，解决办法就呼之欲出了，最简单的方法我们只需将两个div紧挨在一起写，就可以。
之前的代码图：
红色方框的距离就是两个标签之间的间距，在网页 上显示出来就是图2的样子，现在我们只需将这个空格去点就行了，
修改之后的效果：两个盒子间的间距就消除了，（当然解决方法不止这一个，还可以用绝对/相对定位、或者设置盒子的左右外边距来解决）
接下来，看第二个问题，我们往两个小盒子里面放几组p标签，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Title</title>
<style>
.body{
width:600px;
height:400px;
background: #Aaa;
}
.left,.right{
display: inline-block;
}
.left{
width:200px;
height:200px;
background: #aa48a9;
}
.right{
width:200px;
height:200px;
background: #aa3a4f;
}
</style>
<script></script>
</head>
<body>
<div class="body">
<div class="left">
<p>666</p>
<p>666</p>
<p>666</p>
</div><div class="right">
<p>666</p>
<p>666</p>
<p>666</p>
<p>666</p>
<p>666</p>
</div>
</div>
</body>
</html>在看效果：
两个盒子居然上下错开了，这是为什么呢？我们观察一下发现，第一个盒子中最后一行666与第二个盒子中最后一行666是对齐的，那么考虑是不是文本的对其方式出了问题，经小编百度后，发现，网页中文本的垂直对其方式默认都是基线对齐，也就是baseline。这也就解释了两个盒子为什么会上下错开来，
1.vertical-align的语法
vertical-align属性的具体定义列表如下：
语法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明： 设置元素内容的垂直对齐方式
值： baseline：基线对齐；sub：下标；super：上标；top：顶端对齐；text-top：与文本的顶端对齐；middle：中部对齐；bottom：底端对齐；
text-bottom：文本的底端对齐；
百分比和长度：CSS2，可为负数。
初始值： baseline
继承性： 不继承
适用于： 行内元素和单元格（table-cell）元素
媒体： 视觉
计算值： 百分比和长度值为绝对长度；其他同指定值
特别提醒：vertical-align只对行内元素有效，对块级元素无效。
关于使用的详细介绍可以参考逍遥叹的《垂直对齐：vertical-align属性（转）》那么我们只要将div的“vertical-align”值设置成除了“baseline”以外的其他值就行了，参考代码：
.left,.right{
display: inline-block;
vertical-align: bottom;
}效果图：
好了，到这里这两个小问题就解决了，其实以后还会遇到更多的问题，百度，真的很强大！！！
（完）如有疑问，欢迎留言骚扰
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS学习过程中遇到的问题及解决办法
- div+css 布局常见问题及解决办法如下
- html + css 在设置了 z-index 属性后没效果的问题解决办法
- div+css布局遇到的一些问题和解决方法
- 在使用vue-router遇到的问题以及解决办法
- Android游戏开发中使用Libgdx引擎遇到的问题及解决办法汇总
- 使用Postgresql遇到的一些问题和解决办法
- IE6下兼容CSS属性min-height的解决办法
- web网站css，js更新后客户浏览器缓存问题，需要刷新才能正常展示的解决办法
- div+css布局中父层div高度不随子div高度变化的解决方法（clear属性使用方法）
- Windows Live Message (MSN) 登陆错误解决办法 -- windows live communications platform 遇到问题需要关闭
- SpringMVC使用@ResponseBody输出字符串时遇到的乱码问题及解决办法
- 工作中遇到的问题及解决办法12
- iOS开发遇到的坑之六--使用cocopods管理第三方库时,编译出现Library not found for -lPods问题的解决办法
- 在Ubuntu10.04下安装insight遇到的问题及解决办法
- EVC、VS2005开发wince应用程序遇到的问题以及解决办法
- linux下mysql的卸载、安装全过程及遇到"MySQL提示:The server quit without updating PID file问题的解决办法"
- SQL 查询中遇到的问题，以及解决办法
- 利用adb 访问手机SQlite 遇到问题及解决办法
- mysql 的远程连接可能遇到的问题解决办法