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="stylesheet" href="css/lesson9.css">
</head>
<body>
<img src="images/spring.jpeg" alt="">
<img src="images/spring.jpeg" alt="">
<img src="images/spring.jpeg" alt="">
<img src="images/spring.jpeg" alt="">
</body>
</html>
*{
margin: 0;
padding: 0;
}
img{
width: 100px;
}
<body>
<img src="images/spring.jpeg" alt=""><img src="images/spring.jpeg" alt=""><img src="images/spring.jpeg" alt=""><img src="images/spring.jpeg" alt="">
</body>
正常情况下,行级元素不能加宽高,比如span。但是我们给这个标签加一个position: absolute或者是float: left,就可以改宽高了。
只要我们有postion: absolute;
或者float: left/right;
之一,这些元素在内部会自动被转换为display: inline-block;
<html>
<head>
<meta charset="UTF-8">
<title>lesson9</title>
<link rel="stylesheet" href="css/lesson9.css">
</head>
<body>
<span>123</span>
</body>
</html>
*{
margin: 0;
padding: 0;
}
span{
/* position: absolute; */
float: left;
width: 100px;
height: 100px;
background-color: red;
}
文本底对齐
<html>
<head>
<meta charset="UTF-8">
<title>lesson9</title>
<link rel="stylesheet" href="css/lesson9.css">
</head>
<body>
<div>多多最爱谁,<span>鹏哥</span></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
span{
font-size: 50px;
}
正常情况下,图片和文本也会底对齐
<html>
<head>
<meta charset="UTF-8">
<title>lesson9</title>
<link rel="stylesheet" href="css/lesson9.css">
</head>
<body>
<img src="images/spring.jpeg" alt="">多多
</body>
</html>
*{
margin: 0;
padding: 0;
}
img{
width: 100px;
}
当行级块元素中没有文字时,外面的元素和该行级块元素底对齐。但是一旦行级块元素中有文字,外面的文字就和行级块元素中的文字底对齐。
<html>
<head>
<meta charset="UTF-8">
<title>lesson9</title>
<link rel="stylesheet" href="css/lesson9.css">
</head>
<body>
<span>鹏哥</span>阿多米尼斯多雷特
</body>
</html>
*{
margin: 0;
padding: 0;
}
span{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
font-size: 50px;
}
调整对齐线
*{
margin: 0;
padding: 0;
}
span{
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
font-size: 50px;
/* 调整对齐线 */
vertical-align: middle;
}
淘宝头部导航栏,一部分向左浮动,一部分向右浮动
<html>
<head>
<meta charset="UTF-8">
<title>lesson9</title>
<link rel="stylesheet" href="css/lesson9.css">
</head>
<body>
<div>
<ul style="float: left;"></ul>
<ul style="float: right;"></ul>
</div>
</body>
</html>