HTML+CSS基础知识个人笔记_5
1.盒子小知识点
1.1盒子水平居中
通过margin的auto来设置。
注意理解auto的作用效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_盒子水平居中.html</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/*盒子里面的内容（文本 行内元素 行内块）水平居中*/
text-align: center;
line-height: 300px;
/*盒子水平居中
1.盒子必须是块级元素
2.必须指定宽度*/
/*auto理解*/
/*auto表示自动充满*/
/*margin-left: auto; 左边自动充满*/
/*margin:-right: auto; 右边自动充满*/
/*margin-top margin-bottom 用auto没有意义
因为，盒子垂直没有居中*/
/*盒子水平居中关键是，左右auto*/
/*通俗写法*/
/*margin: 0 auto;*/
/*写法二：不写上下，减少渲染*/
/*margin-left: auto;
margin-right: auto;*/
/*写法三：全部auto*/
/*margin: auto;*/
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>
1.2 外边距合并
仅针对垂直！水平没有关系
时刻要有这样的图在脑海中。
在两个相邻盒子间，margin大的有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_外边距合并.html</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/*外边距合并，浏览器BUG，两个盒子的外边距，以其中大的为准*/
.father {
margin-bottom: 200px;
}
.son {
background-color: purple;
margin-top: 100px;
}
/*速度慢！
* {
margin: 0;
padding: 0;
}
写成p, td, li {
......
}
列出要清零的目标，虽然写起来繁琐，但是性能优化*/
</style>
</head>
<body>
<div class="father"></div>
<div class="son"></div>
</body>
</html>
1.3 外边距塌陷
属于外边距合并
仅针对垂直！水平没有关系
内嵌盒子，当父元素没有padding和border的时候，在垂直方向上，父元素的外边距和子元素的外边距会发生外边距合并，
合并后的外边距为两者中较大值，即使父元素外边距为零，也会合并
不单是父级，后代关系也可能发生
解决思路： 不让内嵌元素的外边距和父级外边距直接接触
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_外边距塌陷.html</title>
<style>
/*嵌套块元素的垂直外边距合并
当父元素没有padding和border的时候，在垂直方向上，父元素的外边距和子元素的外边距会发生外边距合并，
合并后的外边距为两者中较大值，即使父元素外边距为零，也会合并
不单是父级，后代关系也可能发生*/
/*解决思路：不让内嵌元素的外边距和父级外边距直接接触
由此：
1.在父级元素加border,颜色可以transparent 或者 和周围一致，会撑开盒子
CSS1 background
CSS2 +border
CSS3 OK
https://www.css88.com/book/css/values/color/transparent.htm
2.在父级元素加padding，会撑开盒子
3.外层元素overflow:hidden;------>推荐！不用调宽高！！！*/
.father {
width: 300px;
height: 300px;
background-color: pink;
/*border:1px solid transparent;*/
/*border:1px solid pink;*/
overflow: hidden;
/*padding-top: 50px;*/
margin-top: 20px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
1.4 盒子默认宽度
子盒子在没有指定宽高的时候，宽度默认是父盒子的宽度。
Element 空间大小 = content + padding + border + margin
Element 实际大小 = content + padding + border
注意：子盒子可以超出父盒子，不要理解错误，父盒子本身的padding和border会撑开本身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_盒子默认宽度</title>
<style>
.father {
width: 200px;
height: 200px;
background-color: pink;
/*padding: 20px;*/
}
/*Element 空间大小 = content + padding + border + margin*/
/*Element 实际大小 = content + padding + border*/
/*.son没有给宽高，所以padding不会撑开盒子，默认宽度是.father的*/
/*注意！！！当.son也有宽或者高，padding会撑开.son的盒子，不会撑开大盒子！！！！！！*/
.son {
/*height: 2000px;*/
/*width: 300px;*/
padding: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">123</div>
</div>
</body>
</html>
1.5 圆角盒子
针对方形：border-radius: 50%;
为圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_圆角盒子.html</title>
<style>
body {
background-color: #ccc;
}
.nav {
border: 1px solid green;
text-align: center;
}
.nav a {
display: inline-block;
width: 200px;
height: 200px;
background-color: #fff;
/*也可以写，100px，但是要是宽高改变，就得重新计算，麻烦！*/
border-radius: 50%;
margin: 0 50px;
text-decoration: none;
line-height: 200px;
color: red;
font-size: 20px;
}
.nav a:hover {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">ABC</a>
<a href="#">ABC</a>
<a href="#">ABC</a>
<a href="#">ABC</a>
</div>
</body>
</html>
1.6 盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_盒子阴影.html</title>
<style>
div {
width: 200px;
height: 200px;
/*水平阴影h-shadow（必填） 垂直阴影v-shadow（必填） 模糊距离blur 阴影尺寸spread 阴影颜色color inset将外部阴影（outset）改为内部阴影*/
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2. 盒子浮动
浮动，就是为了让多个块级元素可以在一行上显示
2.1 盒子浮动与标准流父级搭配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_盒子浮动与标准流父级搭配.html</title>
<style>
/*
----- -----
| | | |
----- -----
------------
| |
------------
有标准流的父级块级元素阻挡，能出以上效果
*/
.father {
width: 200px;
height: 100px;
border: 1px solid transparent;
}
.son1,
.son2 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.son2 {
background-color: orange;
}
.down {
width: 202px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="down"></div>
</body>
</html>
2.2 浮动的隐藏模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_浮动的隐藏模式转换.html</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
span {
width: 100px;
height: 100px;
background-color: green;
/*元素浮动后，会具有行内块的特性*/
float: left; /*如果给行内元素停驾了float，则不用转换模式了*/
}
</style>
</head>
<body>
<div>abc</div>
<span>123</span>
</body>
</html>
2.3 盒子浮动的注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_盒子浮动的注意点.html</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: red;
/*1.盒子浮动算作内容，不会超过padding 和 border*/
padding: 50px;
/*2.要理解浮动的作用，会如何排列，对齐*/
/*3.知晓浮动的隐藏模式转换*/
}
.son {
width: 100px;
height: 100px;
background-color: pink;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>