2019-09-11 / 前端学习成长记录

记录前端学习----第七天

学习内容

圆角边框
背景阴影
透明
浮动

1、圆角边框

语法格式：

border-radius: 50%;	让一个正方变成圆圈

原理就是原点到半径相同，就可以画一个圆圈。
与是否设置了边框没有关系

具体释意代码如下：

.box {
	width: 300px;
	height: 300px;
	background-color: #f00;
	margin: 100px auto;
	/*四个角相同的连写 radius 半径*/
	/*border-radius: 50px; */
	/*正圆的做法，首先是一个正方形，然后border-radius: 50%; */
	/*写 1 个值是正圆切 */
	/*border-top-left-radius: 60px;*/
	/*写两个值是椭圆切*/
	/*border-top-right-radius: 10px 60px;*/
	/*边框圆角连写，取值顺序和内外边距一样*/
	/*border-radius: 50px;
	   border-radius: 50px 100px;
	   border-radius: 50px 100px 20px
	   border-radius: 50px 100px 20px 150px;*/
	/*多组椭圆切，水平半径/垂直半径*/
	/*border-radius: 50px 100px 20px 150px / 150px 20px 100px 50px;*/
}

2、背景阴影

语法格式：

box-shadow: 水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 内/外阴影;

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选，将外部音影(outset) 改为内部阴影

1、前两个属性是必须写的。其余可以省略
2、外阴影（outset）是默认的，不需要写，想要内阴影就写 inset。
3、可以写多组阴影，用逗号隔开。

3、透明的设置

rgba(r,g,b,a)，控制单颜色透明，a 是 alpha,取值范围是0-1，0.5 的 0 可以省略
opacity 控制元素整体透明度，包含里面子元素透明度，取值范围 0-1

由边框圆角，盒子阴影，透明设置组成的小案例如下：

<style>
	.testbtn {
		width: 200px;
		height: 50px;
		/* 设置左上角距离半径 */
		border-top-left-radius: 25px;
		/* 设置左下角距离半径 */
		border-bottom-left-radius: 25px;
		background-color: #87DDFF;
		border: 1px solid #0681C4;
		outline: none;
		/* 设置透明度 */
		opacity: 0.5;
	}
	.testbtn:active {
		/* 设置点击时盒子的阴影 */
		box-shadow: 0 0 20px 0 red;
	}
</style>
<body>
	<input class="testbtn" type="button" value="请点击我！">
</body>

4、浮动（重点）

① CSS 布局的三种机制

网页布局的核心--就是用 CSS 来摆放盒子位置

CSS 提供了三种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中：

普通流（标准流）
- 一个网页内的标签元素按照从上到下，从左到右的顺序排列
  - 块级元素会独占一行，从上向下顺序排列。
  - 行内元素会按照顺序，从左到右顺序排列。

② 认识浮动：

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

浮动->飘，漂浮在普通流的上面，不占位置，只有左右浮动。脱标->脱离标准流

③ 浮动的特点：

浮动的元素会脱离标准流，不占据原来的位置
浮动可以使元素（块元素）一行显示
浮动只能浮动到父元素的左边和右边，浮动元素会受到父元素 padding 值的约束
浮动元素顶对齐
浮动元素只能影响下边的元素，不会影响上边标准流的块元素
浮动元素有了行内块的显示特点
- 块元素浮动后，不设置宽高的时候，不会默认父元素的宽度了，默认宽高为0，内容会撑开宽高
- 行内元素浮动之后，可以设置宽高了

语法：选择器 { float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

注意：
1、浮动只有左右，没有居中
2、浮动的元素只能一行显示（除非装不下盒子，才会掉下去）
3、浮动的元素不占位置
4、浮动的元素是脱标，脱离标准流，不再是标准流。

如下案例实现文字环绕：

天不刮风，天不下雨，天上有太阳，妹不开口妹不说话，妹心怎么想，来了月亮走了太阳又是晚上，哥哥我啥时候才能进入妹妹你的梦想。

```HTML

天不刮风，天不下雨，天上有太阳，妹不开口妹不说话，妹心怎么想，来了月亮走了太阳又是晚上，哥哥我啥时候才能进入妹妹你的梦想。

``` ### ⑤ 浮动的应用：在实际布局中浮动的应用方法： * 用普通流的大盒子（父亲）定义上下顺序--占住位置 * 使用浮动在大盒子内部设置小盒子的位置--水平排列。

浮动应用案例：
04浮动属性应用示意图.png

步骤一：用普通流定义大盒子
步骤二：顶部 2 个 div（一个父盒子里面的子盒子，如果其中一个子盒子浮动，则其他子盒子都需要浮动，才能在一行显示）
步骤三：底部 4 个 div（如果在使用float布局时，如果子盒子宽度加起来超过父盒子的宽度则后面超过的子盒子都会掉到下一行）

⑥ 浮动(float)的扩展

1、与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

2、与兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流，那么当前盒子会显示在前一个兄弟盒子的下方。
浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流的块元素。

3、行内块元素特性（重要）
元素添加浮动后，会具有行内块元素的特性--元素的大小取决于：

定义的大小（优先级高）
元素内部的内容

box1 {
	width: 200px;
	height: 200px;
	background-color: purple;
	/* 元素添加浮动后，元素大小取决于定义的大小 -- 具有行内块元素特性 */
	float: left;
}
.box2 {
	background-color: skyblue;
	/* 元素添加浮动后，元素大小取决于内部内容的多少 -- 具有行内块元素特性 */
	float: left;
}

⑦ 浮动小结

浮动的目的--->让多个盒子在同一行显示。

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子
特	特别注意：1.浮动的盒子需要和标准流的父级搭配使用；2、浮动可以使元素具有行内块特性。

希望所有的 Bug 都会报错~

随心记录

Bug不空，誓不成佛