经过前面一个阶段对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 元素的宽度和高度属性时,实际上是在设置内容区域的宽度和高度。
这个内容区域 相当于一个小内容外面罩着的小盒子~
以淘宝网的一个版块为例~
我们看到的蓝色框框里的内容
就是这个盒子的“内容区域”
而我们看到啊 这部分的内容非常的复杂 肯定不只有宽度和高度
所以:
为了完成一个完整的盒子模型 你还必须添加内边距(padding),边框(border)和边距(margin)。
这里再举一个简单的例子:
这样一段对盒子进行修饰的CSS代码
这里我们可以尝试打开在线编译器看看效果~
菜鸟教程在线编译器~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</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高级技术 开始总结一些页面的设计吧~
更多推荐
前端爱好者的小白学习之路 4-1 CSS学习笔记-盒子模型基础知识
发布评论