devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【web前端HTML5+CSS3】03CSS--layout（布局）之盒模型_layout标签 html5

作者：运维做开发 | 2024-07-20 12:50:42

赞

踩

layout标签 html5

目录

1.文档流

2.盒模型

3.盒模型--边框

4.盒模型--内边距

5.盒模型--外边距

6.盒子的水平布局

7.盒子的垂直布局

8.外边框的折叠

9.行内元素的盒模型

10.默认样式

11.练习

  01.京东图片列表

  02.京东左侧导航栏

  03.网易新闻列表

12.盒子的尺寸

13.轮廓和圆角

1.文档流

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box1{
  10.             width: 100px;
  11.             background-color: yellow;
  12.         }
  13.  
  14.         .box2{
  15.             width: 100px;
  16.             background-color: red;
  17.         }
  18.  
  19.         span{
  20.             background-color: #bfa;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <!-- 
  26.         文档流（normal flow）
  27.             - 网页是一个多层的结构，一层摞着一层
  28.             - 通过CSS可以分别为每一层来设置样式
  29.             - 作为用户来讲只能看到最顶上一层
  30.             - 这些层中，最底下的一层称为文档流，文档流是网页的基础
  31.                 我们所创建的元素默认都是在文档流中进行排列
  32.             - 对于我们来元素主要有两个状态
  33.                 在文档流中
  34.                 不在文档流中（脱离文档流）
  36.             - 元素在文档流中有什么特点：
  37.                 - 块元素
  38.                     - 块元素会在页面中独占一行(自上向下垂直排列)
  39.                     - 默认宽度是父元素的全部（会把父元素撑满）
  40.                     - 默认高度是被内容撑开（子元素）
  42.                 - 行内元素
  43.                     - 行内元素不会独占页面的一行，只占自身的大小
  44.                     - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素
  45.                         则元素会换到第二行继续自左向右排列（书写习惯一致）
  46.                     - 行内元素的默认宽度和高度都是被内容撑开
  47.                 
  48.      -->
  49.  
  50.      <div class="box1">我是div1</div>
  51.      <div class="box2">我是div2</div>
  52.  
  53.      <span>我是span1</span>
  54.      <span>我是span2</span>
  55.      <span>我是span2</span>
  56.      <span>我是span2</span>
  57.      <span>我是span2</span>
  58.      <span>我是span2</span>
  59.      <span>我是span2</span>
  60.      <span>我是span2</span>
  61.      <span>我是span2</span>
  62.      <span>我是span2</span>
  63. </body>
  64. </html>

2.盒模型

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.  
  9.     <style>
  10.         .box1{
  11.             /* 
  12.                 内容区（content），元素中的所有的子元素和文本内容都在内容区中排列  
  13.                     内容区的大小由width 和 height两个属性来设置
  14.                         width 设置内容区的宽度
  15.                         height 设置内容区的高度          
  16.              */
  17.             width: 200px;
  18.             height: 200px;
  19.             background-color: #bfa;
  20.  
  21.             /* 
  22.                 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
  23.                     边框的大小会影响到整个盒子的大小
  24.                 要设置边框，需要至少设置三个样式：
  25.                     边框的宽度 border-width
  26.                     边框的颜色 border-color
  27.                     边框的样式 border-style
  28.              */
  29.  
  30.              border-width: 10px;
  31.              border-color: red;
  32.              border-style: solid;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.  
  38.     <!-- 
  39.         盒模型、盒子模型、框模型（box model）
  40.             - CSS将页面中的所有元素都设置为了一个矩形的盒子
  41.             - 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
  42.             - 每一个盒子都由一下几个部分组成：
  43.                 内容区（content）
  44.                 内边距（padding）
  45.                 边框（border）
  46.                 外边距（margin）
  47.      -->
  48.  
  49.      <div class="box1"></div>
  50.  
  51.  
  52.     
  53. </body>
  54. </html>

3.盒模型--边框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box1{
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: #bfa;
  13.  
  14.             /* 
  15.                 边框
  16.                     边框的宽度 border-width
  17.                     边框的颜色 border-color
  18.                     边框的样式 border-style
  19.              */
  20.  
  21.              /* 
  22.              border-width: 10px; 
  23.                 默认值，一般都是 3个像素
  24.                 border-width可以用来指定四个方向的边框的宽度
  25.                     值的情况
  26.                         四个值：上 右 下 左
  27.                         三个值：上 左右 下
  28.                         两个值：上下 左右
  29.                         一个值：上下左右
  30.                     
  31.                 除了border-width还有一组 border-xxx-width
  32.                     xxx可以是 top right bottom left
  33.                     用来单独指定某一个边的宽度
  35.                     
  36.              */
  37.              /* border-width: 10px; */
  38.              /* border-top-width: 10px;
  39.              border-left-width: 30px; */
  40.  
  41.             color: red;
  42.  
  43.  
  44.              /* 
  45.                 border-color用来指定边框的颜色，同样可以分别指定四个边的边框
  46.                     规则和border-width一样
  48.                 border-color也可以省略不写，如果省略了则自动使用color的颜色值
  49.               */
  50.              /* border-color: orange red yellow green;
  51.              border-color: orange; */
  52.  
  53.  
  54.             /* 
  55.                 border-style 指定边框的样式
  56.                     solid 表示实线
  57.                     dotted 点状虚线
  58.                     dashed 虚线
  59.                     double 双线
  61.                     border-style的默认值是none 表示没有边框
  63.              */
  64.              /* border-style: solid dotted dashed double;
  65.              border-style: solid; */
  66.  
  67.              /* border-width: 10px;
  68.              border-color: orange;
  69.              border-style: solid; */
  70.  
  71.              /* 
  72.                 border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
  74.                 除了border以外还有四个 border-xxx
  75.                     border-top
  76.                     border-right
  77.                     border-bottom
  78.                     border-left
  79.               */
  80.               /* border: solid 10px orange; */
  81.               /* border-top: 10px solid red;
  82.               border-left: 10px solid red;
  83.               border-bottom: 10px solid red; */
  84.  
  85.               border: 10px red solid;
  86.               border-right: none;
  87.         }
  88.     </style>
  89. </head>
  90. <body>
  91.     <div class="box1"></div>
  92. </body>
  93. </html>

4.盒模型--内边距

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box1{
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: #bfa;
  13.             border: 10px orange solid;
  14.  
  15.             /* 
  16.                 内边距（padding）
  17.                     - 内容区和边框之间的距离是内边距
  18.                     - 一共有四个方向的内边距：
  19.                         padding-top
  20.                         padding-right
  21.                         padding-bottom
  22.                         padding-left
  24.                     - 内边距的设置会影响到盒子的大小
  25.                     - 背景颜色会延伸到内边距上
  27.                 一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，
  28.                     所以在计算盒子大小时，需要将这三个区域加到一起计算
  29.              */
  30.  
  31.              /* padding-top: 100px;
  32.              padding-left: 100px;
  33.              padding-right: 100px;
  34.              padding-bottom: 100px; */
  35.  
  36.              /* 
  37.                 padding 内边距的简写属性，可以同时指定四个方向的内边距
  38.                     规则和border-width 一样
  39.               */
  40.               padding: 10px 20px 30px 40px;
  41.               padding: 10px 20px 30px ;
  42.               padding: 10px 20px ;
  43.               padding: 10px ;
  44.         }
  45.  
  46.         .inner{
  47.             width: 100%;
  48.             height: 100%;
  49.             background-color: yellow;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <div class="box1">
  55.         <div class="inner"></div>
  56.     </div>
  57. </body>
  58. </html>

5.盒模型--外边距

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box1{
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: #bfa;
  13.             border: 10px red solid;
  14.  
  15.             /* 
  16.                 外边距（margin）
  17.                     - 外边距不会影响盒子可见框的大小
  18.                     - 但是外边距会影响盒子的位置
  19.                     - 一共有四个方向的外边距：
  20.                         margin-top
  21.                             - 上外边距，设置一个正值，元素会向下移动
  22.                         margin-right
  23.                             - 默认情况下设置margin-right不会产生任何效果
  24.                         margin-bottom
  25.                             - 下外边距，设置一个正值，其下边的元素会向下移动
  26.                         margin-left
  27.                             - 左外边距，设置一个正值，元素会向右移动
  29.                         - margin也可以设置负值，如果是负值则元素会向相反的方向移动
  31.                     - 元素在页面中是按照自左向右的顺序排列的，
  32.                         所以默认情况下如果我们设置的左和上外边距则会移动元素自身
  33.                         而设置下和右外边距会移动其他元素
  35.                     - margin的简写属性
  36.                         margin 可以同时设置四个方向的外边距 ，用法和padding一样
  38.                     - margin会影响到盒子实际占用空间
  39.              */
  40.  
  41.              /* margin-top: 100px;
  42.              margin-left: 100px;
  43.              margin-bottom: 100px; */
  44.  
  45.              /* margin-bottom: 100px; */
  46.              /* margin-top: -100px; */
  47.              /* margin-left: -100px; */
  48.              /* margin-bottom: -100px; */
  49.  
  50.              /* margin-right: 0px; */
  51.  
  52.              margin: 100px;
  53.         }
  54.  
  55.         .box2{
  56.             width: 220px;
  57.             height: 220px;
  58.             background-color: yellow
  59.         }
  60.     </style>
  61. </head>
  62. <body>
  63.     <div class="box1"></div>
  64.     <div class="box2"></div>
  65. </body>
  66. </html>

6.盒子

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/856939
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号