前端web4

最新推荐文章于 2022-12-21 12:00:52 发布

DIONG.

最新推荐文章于 2022-12-21 12:00:52 发布

阅读量827

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_55990888/article/details/122800313

版权

七 CSS-盒模型

7.1 盒模型--content

如何画一个矩形的格子：用到新的标签div标签。

div就是一个干净透彻的矩形

1. content

设置高度宽度

<div class="box"></div>
.box {
  width: 200px;
  height: 100px;
}

给矩形添加背景颜色

<div class="box"></div>
.box {
  width: 200px;
  height: 100px;
  background-color: purple;
}

2. 百分百尺寸

<div class="father">
  <div class="son"></div>
</div>
.father {
  width: 200px;
  height: 80px;
  background-color: #5b6dcd;
}
.son {
  width: 60%;
  height: 20%;
  background-color: #fec03e;
}
我们如果这样去铺满整个平面是错误的

<div class="bg"></div>
.bg {
  width: 100%;
  height: 100%;
  background-color: blue;
}

因为父类是0，0的百分之百还是。

7.2 盒模型--padding

padding直观的说就是网页上一些标题栏的部分

<div class="box">
    All afternoon his tractor pulls a flat wagon with bales to the barn, then back to the waiting chopped field. 
    It trails a feather of smoke. Down the block we bend with the season: shoes to polish for a big game,storm windows to batten or patch. 
    And how like a field is the whole sky now that the maples have shed their leaves, too.
</div>
.box{
    width:300px;
    height:300px;
    background-color:purple;
    padding:20px;
    color:white;
}

下面代码是从不同方位的页边距

.box {
    padding-top: 20px; /*上内边距*/
    padding-right: 20px; /*右内边距*/
    padding-bottom: 20px; /*下内边距*/
    padding-left: 20px; /*左内边距*/
}

简化这个写法就是

div{
    padding:20px 20px 20px 20px;
}

2. box-sizing

box-sizing规定了如何计算一个元素的总宽度和高度，他有两个值content-box，border-box，默认是content-box

content-box计算公式；width=内容的宽度height=内容的高度

border-box计算公式： width=border+padding+内容的宽度height=border +padding+内容的高度

<div class="father">
    <div class="son"></div>
</div>
.father{
    width:200px;
    height: 100px;
    background-color: #5C70CA; 
}

.son{
    box-sizing: content-box;
    width: 100%;
    height: 40px;
    background-color:#FEC03E;
}

.father{
    width:200px;
    height: 100px;
    background-color: #5C70CA; 
}

.son{
    box-sizing: content-box;
    width: 100%;
    height: 40px;
    /* 添加padding */
    padding: 0px 20px;
    background-color:#FEC03E;
}

7.3 盒模型--border

1. 给矩形设置边框线

.box {
  /* 设置矩形大小 */
  width: 200px;
  height: 30px;
  /* 设置边框线 */
  border-width: 2px; /* 设置边框的粗细 */
  border-color: grey;/* 设置边框的颜色 */
  border-style: solid;/* 设置边框的线型，（比如实线或者虚线） */
}

.box {
  /* 添加顶部border */
  border-top: 1px solid black;
  /*添加右侧border*/
  border-right: 3px solid orange;
  /*添加底部border*/
  border-bottom: 5px dashed pink;
  /*添加左侧border*/
  border-left: 10px dashed purple;
}

2. 利用层叠性设置边框

.box {
  /*设置矩形的宽*/
  width: 300px;
  /*设置矩形的高*/
  height: 300px;
  /*设置矩形的背景颜色*/
  background-color: white;
  /*设置矩形的边框*/
  /*统一设置矩形的所有边框样式*/
  border: 2px solid black;
  /*重新设置一个下边框的样式来层叠掉统一设置的边框的样式*/
  border-bottom: 5px solid orange;
}

3. 边框

.box {
  border-bottom: none;
}

4. 圆角

就是一个页面中矩形不是方方正正的，就可以带点圆角等等

.box {
  border-radius: 12px;
}

如果看到效果就是这样

div {
  width: 200px;
  height: 200px;
  border-radius: 18px;
  border: 1px solid black;
}

分开设置如下下

.box {
  width: 200px;
  height: 200px;
  background-color: violet;
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 15px;
}

5. 阴影

<div class="box"></div>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid #c4c4c4;
  /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

7.4 盒模型--margin

1. 作用：

调节矩形与矩形之间的距离

2 . 如何使用:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: #D5E8D4;
            border: 1px solid #82B366;
        }

        .box{
          background-color: #F5F5F5;
          border: 1px solid #FF0818;
          margin-top: 20px;
          margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="box"></div>
    <div></div>
</body>

</html>

3. 水平距离

4. 垂直距离

垂直距离是取两个盒子之间的最大值，而并不象是水平距离一样

.box1{
    margin-bottom: 50px;
}

5. 盒子左右居中

下边代码的作用就是让子盒子在父盒子中居中对齐

<div class="father"> 
    <div class="son"></div>
</div>
.father{
    width:400px;
    height:200px;
    border: 1px solid #ccc;
}

.son{
    width:200px;
    height:100px;
    margin:0 auto;
    border: 1px solid #ccc;
}

7.5 盒模型--display

转化为行内元素：display: inline;

转化为块状元素：display：block；

将改元素隐藏： display： none；

DIONG.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端web4

七 CSS-盒模型7.1 盒模型--content如何画一个矩形的格子：用到新的标签div标签。div就是一个干净透彻的矩形1. content设置高度宽度<div class="box"></div>.box { width: 200px; height: 100px;}给矩形添加背景颜色<div class="box"></div>.box { width: 200px; height: 100px...
复制链接

扫一扫