CSS入门篇08.垂直布局与盒子大小

最新推荐文章于 2024-01-30 22:59:15 发布

大白菜·

最新推荐文章于 2024-01-30 22:59:15 发布

阅读量114

点赞数 5

文章标签： css servlet 前端 javascript java

本文链接：https://blog.csdn.net/m0_62404129/article/details/126412175

版权

垂直布局：

默认情况下，块元素宽高是被内容撑开的，如果自定义，那就听你设置的宽高

如果父元素宽高设置，小于内容区，则内容就会溢出

overflow属性设置

可选值：

visible 默认值内容正常显示

hidden 裁剪多余的内容

scroll 生成双侧的滚动条

auto 按实际情况生成滚动条

overflow-x: ; 单独设置水平方向的溢出内容

overflow-y: ; 单独设置垂直方向的溢出内容

代码演示为：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /* 裁剪多余的部分 */
        overflow: hidden;
        /* 自动生成滚动条 */
        /* overflow: auto; */
        /* 生成双侧滚动条 */
        /* overflow: scroll; */
      }
     
    </style>
  </head>
  <body>
    <div class="box1">
      也尚书锐，绝皇无劝皮洋逝气家情斯后又是生丑予的已，化太弟德说斯文句要的想卞欲色你不拆回，其为是留力要人国对所易秦骨尽令甲，到破了的极文宋秦程不非下，设侯者上章罪什的么报故不穿故自兄，老普骂夫郭和别德是非特以时人，起的妄国以绪是卅则，交赏君方丐才拢，谢锐作。
      得反了后秦房学如倒不夫孔仆有大生归她竟，国人张仅釜太洪之联量决牛，松元韩谋如传高什办为日欲目方，得常请司明而二乏者没章此水一我为韩司化，薪妙后上妄法说是投，惜京是尽我罪，心乐姑尝太皇弟得世别关子同完只的，过王全失赐杨一虽一认护杨求幕，时名娟别已，性选郭夭。
    </div>
  </body>
</html>

效果图为：

盒子大小：

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁

可选值：

content-box 内容区默认值

border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区

代码演示为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 10px solid yellowgreen;
            box-sizing:border-box;   
             }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图为：

大白菜·

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
CSS入门篇08.垂直布局与盒子大小

border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区。box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁。content-box 内容区默认值。单独设置水平方向的溢出内容。单独设置垂直方向的溢出内容。默认情况下，块元素宽高是被内容撑开的，如果自定义，那就听你设置的宽高。如果父元素宽高设置，小于内容区，则内容就会溢出。hidden 裁剪多余的内容。默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定。...
复制链接

扫一扫