一、盒子的边框和阴影
1、圆角边框
1.1、圆形: border-radius: 50%;
正方形盒子是圆形,长方形盒子是椭圆
1.2、圆角矩形
border-radius: 高度的一半;
1.3、设置不同的圆角
border-radius: 10px 20px 25px 30px; 左上—>右上—>右下—>左下。
1.4、分步写法(不推荐使用):
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 30px;
2、盒子阴影
x方向距离 y方向距离 模糊程度 阴影尺寸 颜色
box-shadow: 10px 15px 10px 13px rgba(0,0,0,0.2);
注:阴影不会影响盒子的大小。
3、文字阴影
x方向距离 y方向距离 模糊程度 颜色
text-shadow: 10px 14px 14px rgba(0,0,0,.5);
二、浮动
1、传统网页布局三种方式:标准流、浮动、定位。
标准流的布局:按照规定好的默认方式排列(块元素,行内元素);
标准流是最基本的布局方式。
2、浮动能解决的问题:
使多个块元素在一行排列;让块元素一个左对齐,一个右对齐。
网页布局准则:
- 多个块级元素纵向排列–标准流;
- 多个块元素横向排列—浮动。
3、浮动的概念:
float用于创建浮动框,直到左边缘或者右边缘触及包含块或者另一个浮动框的边缘。
float: left; float: right;
4、浮动的特性:
- 脱离标准流的控制,移动到指定位置;
- 一行显示并顶部对齐;
- 具有行内块元素的特性。
- 浮动的元素不再保留原先位置。
- 浮动元素只会影响下面的元素;
- 浮动的元素不会超出父元素的padding值,在父元素内部浮动;
- 浮动的元素是压不住图片和文字的;
- 浮动的元素不能被text-align: center;margin: auto;居中
5、浮动元素一行显示
浮动元素之间不会有缝隙,按照顶部对齐
如果父元素宽度不够装下浮动盒子,会另起一行显示。
6、浮动元素具有行内块元素的特性
行内元素使用浮动,不需要转换为块级\行内元素就 可以直接指定宽高
块元素设置了浮动,宽度是内容的宽度
7、清除浮动
原因:
如果开发时不方便给父盒子指定高度,子盒子浮动后,不占有原来的位置,导致复合字高度为0,会影响下边的元素。
浮动盒子不会影响上边的标准流,只影响下边的。
7.1、额外标签法
clear: both;
给父元素最后的浮动子元素后边加标签,最后多加的标签只能是块级元素。
7.2、给父元素添加overflow:hidden;
7.3、after伪元素 父元素调用<div class=”box clearfix”>子元素
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
7.4、双伪元素 父元素调用<div class=”box clearfix”>子元素
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
今天就到这里啦,感谢各位观看。
今天你认真写代码了吗?