今日自然是宜继续学习
1.1盒子的大小
上代码,主要是 box-sizing:里面的 content-box和border-box
一个设置内容区大小,一个设置所有的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
/* 默认情况下,盒子可见大小由内容区,内边距和边框共同决定 */
/* box-sizing用来设置盒子尺寸计算费那个是(设置width和height) */
box-sizing: content-box;
/* border-box宽度和高度用来设置整个盒子可见框大小
width和height指的是内容区和内边距和边框总大小
content-box默认值,宽度和高度用来设置内容区大小
*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
1.2轮廓阴影和圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/*
box-shadow用来设置元素阴影效果,阴影不会影响页面布局
第一个值设置水平偏移量,正值右移,负值左移
第二个值设置垂直偏移量,正值下移,负值上移
第三个值模糊效果
第四个值阴影的颜色
*/
box-shadow: 10px 10px 50px orange;
}
/* outline用来设置元素轮廓线,用法和border一样
轮廓和边框不同的点,就是轮廓不会影响到可见框大小
*/
.box1:hover {
outline: 10px red solid;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
/* border-radius设置圆角,圆角设置的圆的半径大小
border-top-left-radius左上角
border-top-right-radius右上角
border-bottom-left-radius左下角
border-bottom-right-radius右下角
椭圆的话只需要再加一个不一样的值就行
直接border-radius:的话就是直接左上 右上 左下 右下
border-radius:10px 20px 30px 40px
border-radius:10px 四角都是10px
border-radius:10px / 40px; 四角都是椭圆
*/
border-top-left-radius: 50px
}
/* 将元素设置为圆形:border-radius:50%; */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1.3浮动的简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
/* 通过浮动可以使一个元素向其父亲左侧或右侧移动
使用float属性设置元素浮动
可选值:
none默认值
left元素左浮动
right元素右浮动
注意:元素设置浮动之后,水平布局等式就不需要强制成立
元素设置浮动后,会完全从文档流脱离,不再占用文档流位置
所以元素下边的还在文档流中的元素会向上移动
比如可以尝试一下,如果box1设置的是向左浮动,
则box2会上去消失,把大小设置300px就会发现他在box1下面
浮动元素不会从父元素移出来,但是box2再设置左浮动就会显示
浮动元素向左右移动的时候,不会超过它前面的其他浮动元素
如果浮动元素上面是一个没有浮动的块元素,则浮动元素没法上移
浮动元素不会超过它上面浮动的兄弟元素,最多和他一样高
总结:
浮动主要是让元素水平排列
通过浮动可以制作一些水平方向布局
*/
.box2 {
width: 300px;
height: 300px;
background-color: orange;
/* float: left; */
}
.box3 {
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
.box4 {
width: 300px;
height: 300px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
1.4浮动的特点
设置浮动后
发现并不会盖住文字
当box2和box3都不设置浮动
box2设置,box3不设置
box2和box3都设置自然是在同一行
行内元素脱离文档流后
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
/* 浮动元素不会盖住文字,文字会环绕在图片周围
所以我们可以利用浮动设置文字环绕效果
*/
}
.box2 {
background-color: yellowgreen;
float: left;
/* 元素设置浮动后,将会从文档流脱离
脱离文档流特点:
块元素不再独占页面一行
脱离文档流后,块元素宽高都会被撑开
*/
}
.box3 {
background-color: yellow;
float: left;
}
.s1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
float: left;
/* 行内元素
行内元素脱离文档流会变成块元素
*/
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<p>
对钟爱的世界道一句晚安,日月星辰,山水风光 过往不念 当下不杂 未来不惧 愿你我既可以朝九晚五、又可以浪迹天涯 睹物思人的后半句 永远都是物是人非 任凭风吹也无法忘记你的名字 你和你的声色犬马 我和我的各安天涯 没有人赠与你阳光 那就自己给自己
</p> -->
<div class="box2">鲁大学生网</div>
<div class="box3">鲁大学生网</div>
<span class="s1">鲁大学生网</span>
</body>
</html>
1.5简单的网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
/* 头部 */
header {
width: 1000px;
height: 150px;
background-color: silver;
margin: 0 auto;
}
/* 主体 */
main {
width: 1000px;
height: 400px;
background-color: #bfa;
margin: 10px auto;
}
/* 左侧导航 */
nav {
width: 190px;
height: 100%;
background-color: yellow;
float: left;
}
/* 中间内容 */
article {
width: 600px;
height: 100%;
background-color: red;
float: left;
margin: 0 10px;
}
/* 右侧内容 */
aside {
width: 190px;
height: 100%;
background-color: green;
float: left;
}
/* 底部 */
footer {
width: 1000px;
height: 200px;
background-color: tomato;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 创建头部 -->
<header></header>
<!-- 网页的主体 -->
<main>
<!-- 左边 -->
<nav></nav>
<!-- 中间 -->
<article></article>
<!-- 右边 -->
<aside></aside>
</main>
<!-- 网页的底部 -->
<footer></footer>
</body>
</html>
1.6高度塌陷和BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
.outer {
border: 10px red solid;
/* BFC(block formatting context)块级格式化环境
开启BFC该元素会变成一个独立的布局区域
元素开启BFC后特点:
开启BFC元素不会被浮动元素所覆盖
开启BFC元素子元素和父元素外边距不会重叠
开启BFC可以包含浮动的子元素
可以通过一些特殊方式开启BFC
设置元素浮动
将元素设置为行内块元素
将overflow设置为visible值
常用overflow:hidden或者auto
*/
/* float: left; */
/* 通过浮动开启了BFC */
/* display: inline-block; */
/* 通过行内块元素开启BFC */
/* 以上两种方式不推荐用来开启BFC*/
overflow: auto;
}
.inner {
height: 100px;
width: 100px;
background-color: #bfa;
/* 高度塌陷
浮动布局中,父元素默认被子元素撑开
子元素浮动之后,会脱离文档流,无法撑起父元素,父元素高度会丢失
父元素丢失后,剩下元素会自动上移,导致页面布局混乱
高度塌陷是常见问题,也是我们必须处理的问题
*/
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
<div style="width:100px;height:100px;background-color: yellow;"></div>
</body>
</html>
1.7BFC演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* float: left; */
overflow: hidden;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
overflow: hidden;
}
.box3 {
width: 100px;
height: 100px;
background-color: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<br>
<div class="box2"></div>
</body>
</html>
1.8_clear
clear解决高度塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
div {
font-size: 50px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: rgb(71, 18, 216);
float: right;
}
.box3 {
width: 200px;
height: 200px;
background-color: orange;
/* box1浮动导致box3上移
box3受到了box1浮动影响,位置发生了改变
如果不希望某个元素因为其他元素浮动改变位置
可以通过clear清楚产生影响
clear
left:清除左侧元素影响
right清除右侧元素影像
both清除两侧最大影响的那个
原理:设置清除浮动以后,浏览器会自动为元素设置一个上外边距
以使其不受其他元素影响
*/
clear: both;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2"></div>
<div class="box3">3</div>
</body>
</html>
1.9 after伪类解决高度塌陷
第一种:利用html完美解决高度塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
.box1 {
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
/*清除了box2对他的影响,撑起来了box1 */
.box3{
clear:both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3">
aa
</div>
</body>
</html>
第二种方法:用css自己的方法解决高度塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
.box1 {
border: 10px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
/* ::after是行内元素 */
.box1::after {
content: 'hello';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2.0 clearfix完美解决外边距重叠和高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁大学生网</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box1::before {
content: '';
display: table;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
.clearfix::before,
/* */
.clearfix::after {
content: '';
display: table;
/* 解决外边距重叠问题 */
clear: both;
/* 解决高度塌陷问题 */
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
我们的浮动学习就告一段落啦,后面是相对定位。