视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425
视频记录 162-188
圆角矩形
- 如果是正方形，想要设置为一个圆，将参数改为高度或者宽度的一半即可，或者直接写为50%
- 如果是矩形，设置为高度的一半即可。
盒子阴影
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
}
/* 原先盒子没有阴影，当鼠标经过盒子时添加阴影效果。 */
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
文字阴影
网页布局三种方式
第一种：标准流：元素按照规定好的默认方式排列
- 块级元素独占一行，从上往下排列。div,hr,p,h1-h6,ul,ol,dl,form,table
- 行内元素，从左到右排列，一行可放多个，遇到父元素边缘则自动换行。span,a,em等
第二种：浮动（改变标签默认排列方式）
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
浮动特性
- 脱离标准普通流的控制（浮）移动到指定位置（动），俗称“脱标”
- 浮动的盒子不再保留原先的位置
- 多个盒子设置了浮动，则会按照属性值一行内显示并且顶端对齐排列。
- 浮动元素是相互贴靠在一起（不会有缝隙），如果父级宽度装不下这些盒子，则多出的盒子会另起一行。
- 不管元素是何特性，添加浮动之后都具有行内块元素的相似特性。
- 如果块级盒子没有设置宽度，默认宽度和父级宽度一样，但是添加浮动之后，它的大小根据内容来决定。
- 为了约束浮动元素的位置，网页一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
网页布局练习
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none; /*去除列表显示的点符号*/
}
.top {
height: 50px;
background: gray;
}
.banner {
width: 980px;
height: 50px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
height: 300px;
background-color: pink;
margin: 0 auto; /*居中对齐*/
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: gray;
margin-right: 10px;
}
.box .last {
margin-right: 0; /*最右边去掉右边距*/
}
.footer {/*通栏盒子无需指定宽度*/
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<!--.top+.banner+.box+.footer + tab-->
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<!--ul>li*4{$} + tab-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
清除浮动
为什么需要清除浮动
- 父元素没有高度（JD商品详情递增，区域会递增）
- 子盒子浮动不占位置，父盒子高度就变为0，会影响下面的标准流盒子。
- 浮动元素不再占用原文档流的位置，会对后面的元素排版产生影响。
语法：
选择器 {clear: 属性值;}
清除浮动的方法
- 第一种：额外标签法（隔墙法），W3C推荐使用。
- 在浮动元素末尾添加一个空标签或其他标签<br/>
- 优点：通俗易懂，书写方便。
- 缺点：添加很多无意义的标签，结构化差。
<html>
<head>
<style>
.damao {
float: left;
width: 200px;
height: 200px;
background-color: black;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">da mao</div>
<div class="ermao">er mao</div>
</div>
<div class="footer"></div>
</body>
</html>
- 父级添加overflow属性
- 属性值为：hidden, auto或者scroll。
- 缺点：无法显示溢出的部分。
.box {
overflow: hidden;/*清除浮动，还能防止外边距合并*/
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
- 父级添加after伪元素（:after）
- 父级添加双伪元素
第三种：定位
