初入WEB前端（14）CSS 布局、文档流、盒子模型

最新推荐文章于 2024-03-06 03:59:34 发布

宋辰轩

最新推荐文章于 2024-03-06 03:59:34 发布

阅读量126

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/107086984

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            background-color: red;
            width: 100px;
        }
        .box2{
            background-color:saddlebrown;
            width: 100px;
        }
        span{
            background-color: seagreen;
        }
    </style>
</head>
<body>
    <!-- 文档流
            网页是一个多层的结构，一层摞着一层，通过css可以为每一层设置样式
            用户智能看到最上一层
            这些曾中，最下面一层是文档流，文档流是网页的基础 我们所创建的元素都是在文档流
            中进行排列

            元素只有两个状态：在文档流中\不在文档流中 

            元素在文档流中有什么特点：
                   块元素（无论宽度总会独占一行，默认宽度是父元素的全部-body则是整行，默认高度被内容撑开）
                   行内元素在页面中从左向右排列，如果一行中不能容纳，则会换到第二行自左向右排列，行内元素的默认高度和宽度都是被内容撑开
        
        -->
        <div class="box1">div1</div>
        <div class="box2">div2</div>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
</body>
</html>

2.盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            /* width和height用来设置内容区（content）的宽度和高度 */
            width: 300px;
            height: 200px;
            background-color: rgb(121, 177, 145);
            /* 边框（border）里面属于盒子边缘，里面属于内部，外面属于外部，也会影响盒子的大小
               设置边框至少要设置三个样式 
                  border-width边框宽度  上下左右都有边框，只填一个就是默认四个都是该值，写四个是顺时针
                                        写四个：上 右 下 左
                                        写三个：上 左右 下
                                        写两个：上下 左右
                                        写一个：上下左右
                                        当然，你可以这样写：border-xxx-width用来单独指定某一个边，如border-top-width
                  border-color边框颜色   四个边的颜色，规则和宽度一样
                  border-style边框样式
                       solid实线
                       dotted点状虚线
                       dashed虚线
                       double双线
                  我们往往可以使用border简写属性 如： border solid 10px orange
                  也可以border-xxx指定如border-top
            */
            border-width: 10px 20px 30px 40px;   
            border-color:orange red yellow green;
            border-style: solid;
            
        }
    </style>
</head>
<body>
    <!-- 盒子模型：CSS将页面中所有的元素都设置为了一个矩形的盒子
         将元素设置为矩形盒子后，对页面的布局就变成了把不同的盒子放到不同的位置
         每一个盒子都有几个部分组成
           
         盒子由里到外：
               内容区（content）
               内边距(padding) 盒子里面的东西不会塞满盒子，要有一些空隙（泡沫纸）
               边框（border）
               外边距（margin）决定盒子的位置


    -->
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

宋辰轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端（14）CSS 布局、文档流、盒子模型

1.文档流<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{
复制链接

扫一扫