1.5Web前端基础笔记

至暗

已于 2022-03-16 20:57:10 修改

阅读量479

点赞数 2

分类专栏： 1.web前端——html、css基础文章标签：前端 css 学习 web html

于 2022-03-15 21:28:46 首次发布

本文链接：https://blog.csdn.net/m0_64838786/article/details/123506729

版权

1.5Web前端学习笔记

一、盒子模型（框模型）
二、水平方向的布局(*)
三、垂直方向的布局
四、外边距的折叠
五、行内元素的盒模型
六、浏览器的默认样式
系列文章目录

一、盒子模型（框模型）

CSS将页面中的所有元素都设计为了一个矩形的盒子，将页面布局就成了把盒子摆放在不同的位置。
每个盒子都由以下几个部分组成：
	内容区（content）
	内边距（padding）
	边框（border）
	外边距（margin）

1.内容区

内容区由width和height两个属性设置

2.边框

边框的大小会影响盒子的大小，要设置边框至少包含三个属性：宽度（border-width）[有默认值]、颜色（border-color）[默认值为黑]、样式（border-style）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box3{
    
            background-color:rgba(13, 57, 80, 0.678);
            width: 200px;
            height: 200px;
            border-width: 10px;
            border-color: aquamarine;
            border-style: solid;
        }
    </style>
    <title>Document</title>
</head