CSS笔记(7)
CSS笔记(7)
CSS盒子模型
终于学到新内容啦!CSS的盒子模型,其实学到这里有些东西已经懵懵的了,听都听得懂,因为老师讲的实在是很好,但还是害怕实际运用的时候不知所措...不管了先学吧.居然还要学习一点PS...又要重新下载,心累.
网页布局过程:
1.先准备好相关的网页元素,网页元素基本都是盒子BOX.
2.利用CSS设置好盒子样式,然后摆放到相应位置.
3.往盒子里装内容.
网页布局的本质:就是利用CSS摆盒子
1.盒子模型
盒子模型(Box Model)的组成:
所谓盒子模型:就是把html页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS盒子模型的本质是一个盒子,封装周围的html元素,它包括:边框,外边距,内边距和实际内容.
边框(border)
border可以设置元素的边框.边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色.
border的属性:
border : border-width | border-style | border-color
<!DOCTYPE html>
<html lang="zh-cn">
<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 {
width: 300px;
height: 200px;
/* 边框粗细一般用px */
border-width: 5px;
/* border-style: solid; 实线边框 */
/* border-style: dashed; 虚线边框 */
/* dotted表示点线边框 */
border-style: dotted;
/* 边框颜色 */
border-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图:
边框简写: border-width border-style border-color 没有顺序
边框分开写法:
比如只想设置上边框,可以写成 border-top:1px solid red
课堂练习:设置一个200*200的盒子,上边框为红色,其余为蓝色.
我们可以这样实现:
注意在单独写上边框覆盖原来的边框时,需要将三个属性都写出来,不然不会显示.
设置表格的边框样式:
很久之前我们还在学习表格的时候制作过一个这样的表格;
现在我们想要修改这个表格的边框样式,就可以用到我们现在学到的知识了.
首先,我们使用CSS修改边框
table {
border: 2px solid pink;
}但是这样做会出现问题.
因为边框只是四周的一圈,所以我们要给td和th都设置上.
设置完以后又会出现一个新的问题:
这我们给表头,每个单元格和边框都设置了2像素的边框,那么三个加载一起就会变成6像素,此时我们要用到一条属性:border-collapse,它可以将这些边框的交界处合并起来.
table,td,th {
border: 2px solid pink;
border-collapse: collapse;
}
现在就变细啦
注意:边框会影响盒子的实际大小,比如我们设置了一个200*200的盒子,并设置了10px的边框,那么盒子的大小最终会变成220*220
内边距(padding)
padding属性用于设置内边距,即边框与内容之间的距离.
我将span转换成行内块元素后,设置边框,并设置内边距:
padding-left: 10px;
padding的属性:
有点难记,而且4个都要记下来!!!记住是顺时针.
注意:
padding也会影响盒子的实际大小,也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子.
如何盒子本身没有指定width/height属性,则此时padding不会被撑大.
外边距(margin)
margin属性用于设置外边距,即控制盒子和盒子之间的距离.
margin简写方式代表的意义和padding完全一致.
在学到盒子模型以后,可以在F12里查看盒子模型.
外边距典型应用
外边距可以让块级盒子水平居中,但是必须要满足两个条件:
①盒子必须指定了宽度(width).
②盒子左右的外边距都设置为auto.
可见蓝色的div盒子已经在浏览器中居中显示了.
今天就学到这里吧,要继续学习python了,感觉已经好久没学,被scrapy折磨的...失去信心...
视频进度:(151 / 528)
腾讯云开发者
