css要点补充,项目演练
淘宝的页面两边有留白,当缩小浏览器窗口时,中间的内容不会缩小,而是两边的留白在缩小?
在内容部分加上margin,上下是0,左右自适应。
<html>
<head>
<meta charset="UTF-8">
<title>lesson9</title>
<link rel="stylesheet" href="css/lesson9.css">
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.wrapper{
height: 30px;
background-color: #123;
}
.content{
/* 外边距,上下是0,左右自适应 */
margin: 0 auto;
width: 800px;
height: 30px;
background-color: hotpink;
}
display属性有三种元素:inline, block, inline-block
inline inline-block --> 文本类元素
凡是带有inline属性的元素都有文本属性,所有它叫文本类元素。
我们的两个文本之间,无论加多少个空格,显示出来的都只有一个空格。span是一个文本类元素,两个span之间无论加多少个空格,显示出来的也只有一个空格。
img是inline-block,是文本类元素,能被文字分隔符分割。四个img标签之间的换行符是文字分隔符,所以在本机显示的四张图中间会有一个空格。但是一旦html代码上传到服务器,服务器会将html代码中的空白字符都去掉,所以四个img标签之间就没有换行符了,所以在服务器上展示的效果是四个图片能正常合并在一起。
<html>
<head>
<meta charset="UTF-8">
<title>lesson9</title>
<link rel=