web前端基础 html5+css3（六.圆角边框、盒子阴影、浮动）

1.综合案例：品优购快报

去除li前的小圆点 list-style:none

*{padding:0;margin:0;}
.box{width: 248px;height: 163px;border: 1px solid #ccc;margin:100px auto;}
.box h3{height: 32px;border-bottom:1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}
ul{margin-top: 7px;}
ul li{list-style: none;height: 23px;line-height: 23px;padding-left: 20px;}
ul li a{text-decoration:none;font-size: 12px;color: #666;}
ul li a:hover{text-decoration:underline;}
<div class="box">
	<h3>品优购快报</h3>
	<ul>
		<li><a>【特惠】耳机免费送</a></li>
		<li><a>【特惠】耳机免费送</a></li>
		<li><a>【特惠】耳机免费送</a></li>
		<li><a>【特惠】耳机免费送</a></li>
		<li><a>【特惠】耳机免费送</a></li>
	</ul>
</div>

2.圆角边框（border-radius）

参数可以为数值或者百分比%

正方形想设置为一个圆，把值修改为高度或者宽度的一半，50%也可以

如果是矩形，设置为高度的一半即可

.juxing{width:200px;/*height: 150px;*/height: 200px;background-color: pink;/*border-radius:10px;*/border-radius:100px;border-radius:50%;/*50%就是宽度和高度的一半 等价于100px*/}
.yuanxing{width: 300px;height: 100px;border-radius:50px;background-color: skyblue;/*圆角矩形设置为高度的一半*/}
<div class="juxing"></div>
<div class="yuanxing"></div>

如果想四个角分别设置：border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-top-bottom-radius

.radius{width: 300px;height: 300px;/*border-radius:10px 20px 50px 90px;*/border-radius:10px 50px;border-top-left-radius:400px; background: purple;/*设置四个不同的角*/}
<div class="radius"></div>

3.盒子阴影

border-shadow：h-shadow v- shadow blur spread color inset

h-shadow：水平阴影的位置（必需）

v-shadow：垂直阴影的位置（必需）

blur：模糊距离（可选）

spread：阴影尺寸（可选）

color： 阴影颜色（可选）

inset：将外部阴影（outset）改为内部阴影  默认outset（外阴影）,但不可以写这个单词，否则导致阴影无效（可选）

盒子阴影不占空间，不会影响其他盒子排列浮动

.MyBox{width: 200px;height: 200px;background: yellow;margin:100px auto;box-shadow:10px 10px 10px 10px rgba(0,0,0,.2);
<div class="MyBox"></div>

4.浮动

（1）.标准流（普通流/文档流）：标签按照规定好默认方式排列

块级元素独占一行，从上向下排列（div ,hr,p,h1-h6,ul,ol,form,table）

行内元素从左向右排列，碰到父元素边缘则自动换行（span,a,i,em）

.left,.right{width: 200px;height: 200px;background: green;float: left;}
.right{float: right;}
<div class="left">1</div>
<div class="right">2</div>

（2）浮动元素的最重要特性：

1.脱离标准流的控制，（浮）移动到指定的位置（动）：脱标

2.浮动的盒子不再保留原先的位置

任何元素都可以浮动，不管原先是什么模式的元素，添加元素之后具有行内块元素相似的特性

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

.box1{background-color: pink;width: 200px;height: 200px;float: left;}
.box2{background: purple;width: 300px;height: 300px;}
<div class="box1">浮动的盒子</div>
<div class="box2">标准流的盒子</div>

如果上面布局的高度过高，下面的盒子会跟在上面盒子的高度后面

div{float: left;width: 200px;height: 100px;background: #c00;}
.two{background: purple;height: 249px;}
.four{background: blue;}
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div class="four">4</div>
<div>5</div>
<div class="four">6</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>
<div>7</div>

如果行内元素有了浮动，则不需要转换块级/行内元素就可以直接给宽度高度

div{float: left;width: 200px;height: 100px;background: #c00;}
/*如果行内元素有了浮动，则不需要转换块级/行内元素就可以直接给宽度高度*/
p{float: right;background: purple;height: 400px;}
<div>1</div>
<div>2</div>
<div>3</div>
<p>aaa</p>

小米布局案例

（1）左右布局

.box{width: 1200px;height: 460px;background: pink;margin:0 auto;}
.left{width: 230px;height: 460px;background: skyblue;float: left;}
.right{width: 970px;height: 460px;background: #c00;float: left;}
<div class="box">
	<div class="left"></div>
	<div class="right"></div>
</div>

（2）一行四个

.box{width: 1226px;height: 285px;background: #c00;margin:0 auto;}
.box li{width: 296px;height: 285px;background:blue;float: left;margin-right: 14px;}
.box .last{margin-right: 0;}
<ul class="box">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li class="last">4</li>
</ul>

（3）左右布局+一行四个

.box{width: 1226px;height: 615px;background: #c00;margin:0 auto;}
.left{float: left;width: 234px;height: 615px;background:skyblue;}
.right{float: right;width: 992px;height: 615px;background:blue;}
.right>div{background:purple;width:234px;height:300px;float: left;margin-left: 14px;margin-bottom: 14px;}
<div class="box">
	<div class="left"></div>
	<div class="right">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

（3）.清除浮动（闭合标签，关起门来打孩子）

清除浮动的本质是清除浮动元素造成的影响

如果父元素本身有高度，则不需要清除浮动

清除浮动之后，父元素则会根据子盒子自动检测高度，父级有了高度，则不会影响下面的标准流了

1.额外标签法（这个新的空标签必须是块级元素）clear:both;left;right;

.box{background: #c00;width: 1200px;margin:0 auto;}
.box .first{width: 200px;height: 400px;background: purple;float: left;}
.box .second{width: 300px;height: 400px;background: blue;float: left;}
.borther{width: 1220px;background: green;height: 500px;margin:0 auto;}
<div class="box">
	<div class="first"></div>
	<div class="second"></div>
	<div style="clear:both;"></div>
</div>
<div class="borther"></div>

2.父级添加overflow属性 （overflow：hidden 也可以为auto/scroll）

.box{background: #c00;width: 1200px;margin:0 auto;}
.box .first{width: 200px;height: 400px;background: purple;float: left;}
.box .second{width: 300px;height: 400px;background: blue;float: left;}
.borther{width: 1220px;background: green;height: 500px;margin:0 auto;}
.overflow{overflow: hidden;}
<div class="box overflow">
	<div class="first"></div>
	<div class="second"></div>
</div>
<div class="borther"></div>

3.父级添加after伪元素

.box{background: #c00;width: 1200px;margin:0 auto;}
.box .first{width: 200px;height: 400px;background: purple;float: left;}
.box .second{width: 300px;height: 400px;background: blue;float: left;}
.borther{width: 1220px;background: green;height: 500px;margin:0 auto;}
.clearfix:after{content:"";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{*zoom:1;}/*IE6,7专有*/
<div class="box clearfix">
	<div class="first"></div>
	<div class="second"></div>
</div>
<div class="borther"></div>

4.父级添加双伪元素（混合双打）

.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}/*IE6,7专有*/
<div class="box clearfix">
	<div class="first"></div>
	<div class="second"></div>
</div>
<div class="borther"></div>