前端爱好者的小白学习之路 4-1 CSS学习笔记-盒子模型基础知识

经过前面一个阶段对HTML CSS基础语法的学习之后我们已经可以写出来一个简单的网页了
HTML基础知识总结
 CSS基础语法总结
但这些想要做好网页布局只有那些基础知识肯定是不够的诶
（学会了这些基础知识我们只能对网页中单一的一块内容进行设计
或者是凌乱地对一整片网页进行布局太不系统啦！）
所以我们引入了“盒子模型”这个概念，
不理解盒子模型是不能清晰明了地写出来一个网页的~
在这里插入图片描述

我们看到的网页中一个个分块显示的内容，其实就是一个个的盒子
作为一名初入前端领域的小白
肯定是要从盒子模型开始像搭积木一样慢慢把网页搭出来鸭
所以我们一起来巩固一下盒子模型的知识点吧~

进行网页布局的时候我们应该这么想

（其实这里放一个网页模仿案例的整体构思过程感觉是最好的
但是奈何俺懒得一批暂时还没有把完整的流程笔记总结出来
总结出来以后马上会写到博客里再增强一下理解的~）
网页案例构思及实战演练~（待完成）
【1】看看网页中都有什么东西
【2】将这些内容大致做一个分块（一般是竖直地分成几块儿）
【3】依次完成每个分块中的内容
在构思的过程中，我们要：

把所有html标签都看作是一个盒子
之后呢，在通过CSS浮动定位让每个盒子排列成为网页~

这里浮动和定位是基础且无比重要的布局方法我会在接下来的博客中总结出来~
CSS浮动（待完成）
CSS定位（待完成）

CSS盒子模型(Box Model)

了解网页布局前
先来好好康康这几个概念吧~
我们的网页中各个元素不可能贴在一起
那怎么让它们之间有一定距离呢？
答案就是使用这几个概念

margin 外边距

border 边框

padding 填充

content 内容

CSS盒模型本质上是一个盒子，封装周围的HTML元素

盒子模型包括-

外边距Margin–清除边框外的区域，外边距是透明的是本盒子与其他盒子的距离。

边框Border–围绕在内边距和内容外的边框

填充Padding–清除内容周围的区域，内边距是透明的

实际内容-Content–盒子的内容，显示文本和图像

CSS box-model

盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素

当指定一个 CSS 元素的宽度和高度属性时，实际上是在设置内容区域的宽度和高度。

这个内容区域相当于一个小内容外面罩着的小盒子~

以淘宝网的一个版块为例~
在这里插入图片描述

我们看到的蓝色框框里的内容
就是这个盒子的“内容区域”
而我们看到啊这部分的内容非常的复杂肯定不只有宽度和高度
所以：
为了完成一个完整的盒子模型你还必须添加内边距（padding），边框（border）和边距（margin）。
这里再举一个简单的例子：
这样一段对盒子进行修饰的CSS代码
这里我们可以尝试打开在线编译器看看效果~
菜鸟教程在线编译器~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.big {
    
    
	width:680px;
	height:500px;
}
	
.small {
    
    
    background-color: lightgrey;
	width:400px;
    height:100px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

	<div class="big">
		<div class="small">这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

	</div>


</body>
</html>

在这里插入图片描述
.big类选择器对应的是最外层的大盒子

此例子中由于给小盒子定了宽度高度所以套着小盒子的大盒子并不影响小盒子里面内容有多宽~

.small类选择器对应的是小盒子
在这里插入图片描述

可以看到灰色框框中用红笔画出来的区域为——内容 content
灰色部分与红笔画出来的区域之间的距离即为——内边距 padding
绿色框框则是——边框 border

另外我们注意到取消小盒子宽度的时候效果如下：
在这里插入图片描述
可以看到小盒子的宽度被撑开了~
小盒子的宽度=大盒子宽度-内边距padding~

CSS边框属性（border）

边框样式

border-style 用来定义边框的样式
p.none {
    
    border-style:none;}-无边框
p.dotted {
    
    border-style:dotted;}-虚线边框
p.dashed {
    
    border-style:dashed;}-虚线边框
p.solid {
    
    border-style:solid;}-实现边框
p.double {
    
    border-style:double;}-双边框
p.groove {
    
    border-style:groove;}-凹槽边框
p.ridge {
    
    border-style:ridge;}-垄状边框
p.inset {
    
    border-style:inset;}-嵌入边框
p.outset {
    
    border-style:outset;}-外凸边框
p.hidden {
    
    border-style:hidden;}-隐藏边框

边框宽度

border-width:xxpx
p.one
{
    
    
    border-style:solid;-样式
    border-width:5px;-宽度
}
p.two
{
    
    
    border-style:solid;
    border-width:medium;
}

边框颜色

/*"border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。*/
border-style:solid;
border-color:pink;

边框-对框子的四个边进行单独的设置

p.one{
    
    
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}
<p class='one'>内容的左右为实线 上线为虚线</p>

在css中凡是带有四个方位的属性都是默认的“上右下左”顺时针顺序

所以也可以这样写！

border-style=dotted solid double dashed
设置四个框！
上->右->下->左
border-style=dotted solid double 
设置三个框！ 上-dotted 左右-solid 底-double
上->左右->下
border-style=dotted solid
设置三个框！ 上底 dotted 左右-solid
上下->左右

边框的简写属性

可以省去（用于设置边框的）繁多的属性

直接在一个属性中设置边框

*可以再border属性中设置

border-width
border-style
border-color

border:5px solid pink;

更多CSS边框属性复制本链接到最底部查找即可

CSS轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

p{
    
    
    border:1px solid red
        设置边框
}
p.dotted{
    
    
    
    outline-style:dotted;
    /*与border属性的名称相同-dotted*/
    outline-color:blue;
    /*设置轮廓颜色*/
	outline-width:thin;
    outline-width:3px;
    /*设置轮廓宽度*/
}

CSS外边距（margin）

margin定义元素周围的空间。

margin和padding的概念

可见margin可以单独改变元素的上下左右边距

margin 单边外边距属性

margin可以单独改变元素的上下左右边距

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin 简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。

margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px

margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px

margin:25px 50px;
上下边距为25px
左右边距为50px

margin:25px;
所有的4个边距都是25px

CSS填充（padding)

padding定义元素边框与元素内容之间的空间

margin和padding的概念

与外边距类似 padding也有：

单边内边距属性

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

简写属性

padding属性同样有1~4个值

  padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
  padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
  padding:25px 50px;
上下填充为25px
左右填充为50px
  padding:25px;
所有的填充都是25px

到这里我们对盒子模型有了一个初步的认知
当然真正能锻炼我们页面布局能力的还得是实战演练
那么总结完浮动&定位之后就暂时跳过CSS高级技术开始总结一些页面的设计吧~
在这里插入图片描述