<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二次作业</title>
<style>
div{
border: 1px;
background-color: aqua;
border-radius: 100px;
box-shadow: 10px 10px 10px rgb(195, 255, 0);
text-align: center;
height: 30px;
width: 600px;
}
span{
border: 1px;
width: 200px;
height: 200px;
color: red;
box-shadow: 5px 5px 5px rgb(116, 96, 96);
border-radius: 100px;
border-style: none;
}
</style>
</head>
<body>
<div>
<span>影视1</span>
<span>影视2</span>
<span>影视3</span>
<span>影视4</span>
<span>影视5</span>
<span>影视6</span>
<span>影视7</span>
<span>影视8</span>
<span>影视9</span>
</div>
</body>
</html>
css盒子模型包括 边距(外边距 margin 内边距padding) 边框(border) 填充 实际内容(content)
使用width和height属性设置内容的大小
width:数字+px;
height:数字+px;
版心居中:
margin:auto;
使用border设置边框
border:数字+px solid(实线)/dashed(虚线) 颜色;
border也可以给指定的方向设置边框
border-left/right/top/bottom(左 右 上 下)
设置内/外边距 padding/margin
padding/margin:数字+px;
外边距的合并:外边距合并时会取两个margin的最大值
解决办法:一般设置一个外边距就好
外边距的塌陷:互相嵌套的块级元素,子元素的margin-top 会作用在父级元素上面
解决办法:给父元素设置border-top或padding-top或设置浮动或转为行内元素