自学从零开始的CSS基础教程(day6)

黄豆粉面包

已于 2022-12-03 09:14:03 修改

阅读量353

点赞数

文章标签： css 前端 html

于 2022-11-23 20:42:17 首次发布

本文链接：https://blog.csdn.net/qq_59779414/article/details/128007267

版权

注：本文基于VSCode

一、文档流

文档流（normal flow）

网页是一个多层结构，CSS可以给每一层设置样式，最终我们看到的是最上面的一层

文档流是网页最底下的那一层

元素分为两种状态：

1、在文档流中

2、脱离文档流

之前将元素分为三类，块元素、行内元素、行内块元素，分别具有一些特点，

这些特点都是元素在文档流中的特点：

块元素：不会独占一行，宽是父元素内容区宽度，高被内容撑开

行内元素：不会独占一行，宽高被内容撑开，不能自定义宽高

行内块：兼具块元素、行内元素的特点

注意：

1、一旦脱离文档流，以上的分类，以上分类的特点都不复存在

2、我们创建的元素默认是在文档流中

二、盒子模型

布局相关样式：

文档流默认的布局，浮动，定位，弹性盒子等

盒模型、盒子模型、框模型（box model）

网页中也有很多元素，将各种元素摆放在合适的位置，盒模型将页面所有元素的形状都统一了，

你在布局时只需要考虑元素的大小即可

盒模型：快递

内容区 content 冰箱

内边距 padding 泡沫

边框 border 快递盒子

外边距 margin 快递离你的距离

盒子的大小：内容区、内边距、边框有关系，跟外边距没有关系

内容区content

width：内容区的宽

height：内容区的高

<style type="text/css">
.box1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }

    </style>

三、盒子模型的边框

边框（border）边框用来隔开盒子内部和盒子外部

设置边框，三个要素缺一不可，边框的宽度，边框的颜色，边框的样式

边框的宽度 border-width

1、可以设置多个值,空格隔开即可，

4个值上右下左（顺时针）

3个值上左右下

2个值上下左右

1个值上下左右

2、单独设置某一边的宽度

border-top-width

border-bottom-width

border-left-width

border-right-width

3、border-width有默认值，默认在1-3px

边框的颜色 border-color

1、可以设置多个值

规则跟border-width一样

2、可以单独设置某一边的颜色

border-xxx-color

xxx：top、bottom、left、right

transparent：透明色

3、小箭头的写法：

border-color：transparent transparent transparent orange；

4、border-color有默认值，默认为黑色

边框的样式 border-style

1、边框样式的种类

solid 实线

dotted 点状的虚线

dashed 虚线

double 双线

2、可以写多个样式

规则和border-width一样

3、可以单独设置某一边样式

规则和border-width一样

4、没有默认值

边框border简写：

1、语法：border：大小颜色样式；

三要素顺序无所谓

2、单独设置某一边的边框

border-top：大小颜色样式

border-bottom

border-left

3、border：none；不要某一边框

border-right：none

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            border-width: 10px 20px 30px 40px;
            border-top-width: 20px;
            border-color: green;
            border-style: solid dotted double dashed;
        }
    </style>

</head>

<body>
    <div class="box">

    </div>

</body>

</html>

四、内边距

内边距： padding 边框和内容区之间的距离

1、可以单独设置某一边的内边距

padding-top

2、内边距padding的简写

可以写多个值，规则与border-width一样

style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: blue;
            padding-top: 30px;
        }
        /*box2占满box1*/
        .box2{
            width: 100%;
            height: 100%;
            background-color: red;


        }

    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    

</body>

</html>