(这篇博客我们学习了盒子模型和浮动,学习之前如果想回顾一下之间的知识点可以在我的主页里面找一下复习复习之间的内容)
1.盒子模型
1.介绍下盒子模型
1.作用:
帮助我们做布局的
2.盒子的概念
1.页面的每一个标签,都可看作是一个"盒子",通过合资的视角更方便我们进行布局
2.浏览器在渲染页面时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称其为盒子
3.盒子模型
CSS中规定每个盒子分别由:内容区域,内边区域,边框区域,外边框区域构成,这就是盒子模型
2.盒子模型的内容
1.内容区域width,height
(已经很熟悉了)
2.border 边框属性
属性值:单个取值的连写,取值之间以空格隔开 boder:10px solid red
(注意三个取值是,没有顺序的,)
10px:代表边框的粗细
solid:边框的种类,实线(solid),虚线(dashed),点线(dotted).........其他的不用记
red:代表边框的颜色
也可以只设置一边:把border换成border-left/right/top/bottom
也可以将他们的属性拆分:border-width border-style border-color
(注意边框和padding都会将盒子的撑大,这个时候我们可以根据实际需要将width,height调小)
新浪导航小案例
3.内边框padding(margin和padding一样的用法)
四个值: padding: 上 右 下 左(顺时针)
三个值: padding: 上 左右 下
两个值: padding: 上下 左右 一个值:padding: 上下左右
上面的案例:宽度width=80px已经固定了,但是在实际开发中我们可能如果我们想在里面添加很多或者很少的内容他依旧是80px就很不灵活------padding来实现.因为我们一开始写80px为宽度的时候就是想让两两之间存在间距,但间距的padding就可以实现且间距不会变
注意:前面我们有说过border和padding都会撑大盒子,如果我们使用了border和padding实际开发中我们要手动缩小我们的高和宽.这样很麻烦,可以通过
box-sizing:border-box
变成CSS3的盒子模型,好处:加了border和padding不需要手动减法(内减模式)
4.消除默认样式
*{
margin:0;
padding:0;
}5.版心居中 margin: 0 auto;
6.小案例
这里我们学了一个新的样式:list-style:none去掉列表的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
width: 500px;
height: 400px;
border: 1px dashed #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.div1 h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
line-height: 1.5;
}
li {
list-style: none;
}
a {
display: block;
text-decoration: none;
color: black;
height: 50px;
border-bottom: 1px dashed #ccc;
line-height: 50px;
text-indent: 2em;
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<div class="div1">
<h2>最新文章</h2>
<ul>
<li><a href="#">哈哈哈哈哈哈哈</a></li>
<li><a href="#">哈哈哈哈哈哈哈</a></li>
<li><a href="#">哈哈哈哈哈哈哈</a></li>
<li><a href="#">哈哈哈哈哈哈哈</a></li>
<li><a href="#">哈哈哈哈哈哈哈</a></li>
</ul>
</div>
</body>
</html>7.外边距折叠现象-合并现象
场景:垂直布局的块级元素,上下的margin会合并
结果:最终两者距离为margin的最大值
处理的办法:避免就好 只给一个盒子加margin
8.外边距的塌陷问题
场景:相互嵌套的块级元素,子元素的margin-top会做用到父元素上.
结果:导致父元素一起往下移动
解决办法:
1.给父元素border-top或者padding-top(分隔父子元素的margin-top)
2.给父元素设置overflow:hidden(重要)
3.转化为行内块元素
4.设置浮动
(这里的padding和margin都是针对block和line-block生效的,而行内元素只会生效左右,上下不会生效)
2.CSS浮动
1.结构伪类
目标:能够使用结构伪类选择器在HTML中定位元素
1.作用与优势
作用:根据元素在HTML中结构关系查找元素
优势:减少对于HTML中类的依赖,有利于保持整洁的代码
场景:常用于查找某父级元素的子元素
2.选择器
E:first-child{} 匹配父元素中第一个子元素,并且是E元素
E:last-child{} 匹配父元素中的最后一个子元素,并且是E元素
E:nth-child(n){} 匹配父元素中的第几个元素,并且是E元素
E:nth-last-child(n){} 匹配父元素中倒数第n个子元素,并且是E元素
n的注意点:
1.n可以为1,2,3,4,5.......
2.通过n可以组成常见的公式
偶数: 2n,even 奇数 2n-1,2n+1,odd 找到前5个-n+5 从第五个往后n+5
2.伪元素
伪元素:一般页面中非主体内容可以使用伪元素
区别:
1.元素:HTML设置的标签
2.伪元素:由CSS模拟出的标签效果
种类: ::before 在父元素内容最前面添加一个伪元素
::after 在父元素内容的最后添加一个伪元素
注意点:1.必须设置content属性才能生效 2.伪元素默认是行内元素
3.标准流
标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
常见的标准流排版规则
1.块级元素:从上往下,垂直布局,独占一行
2.行内元素 或行内块元素 :从左往右,水平布局,空间不够自动拆行
4.浮动
1.浮动的作用:让块级标签完美的在一行排列 (早期:图为环绕)
首先根据我们现有的知识能不能让块级元素在一行排列???
答:可以只有一种方法,display:inline-block(但是有个很严重的问题: 浏览器解析行内块或者是行内标签的时候,如果标签换行书写会产生一个空格的距离)不换行可读性极差!!!!!!!
这里我的vscode设置了保存时自动规整代码,两个div标签规整后不在一行内,就不给你们展示了.这里用浮动给你们展示一下
float: left 在左边展示 right在右边展示
5.浮动的特点:
1.浮动元素会脱离标准流(脱标),在标准流中不占位置
2.浮动元素比标准流高了半个级别,可以覆盖标准流中的元素
3.浮动找浮动,下一个浮动元素会在上一个浮动元素后面浮动
4.浮动元素特殊的显示效果:1.一行可以显示多个 2.可以设置宽高
6.小案例
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
height: 30px;
background-color: black;
}
.top {
height: 100px;
width: 1226px;
background-color: pink;
margin: 0 auto;
}
.box {
width: 1226px;
height: 460px;
background-color: #ccc;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: orange;
}
.right {
float: left;
width: 992px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="top"></div>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>7.CSS属性的顺序
(浏览器的执行效率会更高)
1.浮动 / display
2.盒子模型相关的属性:margin border padding width height background-color
3.文字的样式
8.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
margin: 50px auto 0;
width: 1226px;
height: 614px;
}
.one {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.box {
float: right;
width: 978px;
height: 614px;
}
ul {
list-style: none;
}
li {
float: left;
margin-right: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
margin-bottom: 14px;
}
li:nth-child(4n) {
margin-right: 0px;
}
</style>
</head>
<body>
<div class="div1">
<div class="one"></div>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>9.清除浮动
含义:清除浮动带来的影响
影响:如果元素浮动了,此时子元素不能撑开标准流的父元素
1.额外标签法:
在父元素内容最后添加一个块级元素
给添加的块级元素设置clear:both
特点:会在页面中添加额外的标签,会让THML结构变得复杂
2.单伪元素清楚法
基本写法:
.clearfix::after {
content: '';
display: block;
clear: both;
/*下面的代码是为了兼容性可以不加*/
height:0px;
visibility:hidden;
}
3.双伪元素写法
.clear::before:解决外边距塌陷问题
以后清除浮动可以用它,解决外边距塌陷也可以用它--双伪元素
.clearfix::before,
.clearfix::after {
content: '';
/* 伪元素是行内元素,要求变成块 */
display: block;
}
.clearfix::after {
clear: both;
}4.给父级元素设置overflow:hidden
特点:方便
总结:清除浮动一共有四种方法,
最简单的overflow:hidden
双伪元素的优势:既可以清除浮动,也可以清除塌陷
overflow每次使用都要找他的父级,给他的父级设置,双伪元素只需要看哪里需要加上clearfix就好
单伪元素和额外标签法:都是加了额外的标签
所以关于
盒子模型:
weight height border margin padding 外边距折叠现象 外边距塌陷现象 消除默认样式,
在多练几个案例就OK了
浮动:
结构伪类:nth-child(n){}
伪元素: ::before ::after
浮动的作用 浮动的特点 清除浮动
在多练几个案例理解深刻就好了
点进我的主页学习CSS_04吧
(感谢你们的观看,三连一下呗.谢谢啦)
扫一扫
1430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
