[前端]CSS盒子模型&布局

CSS盒子模型

所有HTML元素可以看作盒子,在CSS中,“Box-Model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其他元素和周围元素边框之间的空闲位置放置元素。

下面的图片说明了盒子模型(Box Model):

在这里插入图片描述

每一部分的说明:

  • Margin(外边距)

    清除边框外的区域,外边距是透明的。

  • Border(边框)

    围绕在内边距和内容外的边框。

  • Padding(内边距)

    清除内容周围的区域,内边距是透明的。

  • Content(内容)

    盒子的内容,显示文本和图像。

不同区域的相关属性

content

width, height,一般来说就是这两个指标

padding
/* 以上边界为开始顺时针旋转,没有值则和该边界的对称边界取相同值 */
div {
    padding: 30px;
    padding: 30px 20px;
    padding: 30px 20px 10px;
    padding: 30px 20px 10px 0px;
}
/* 单独对一个方向进行设置 */
div {
    padding-top: 40px;
    padding-bottom: 60px;
    padding-left: 60px;
    padding-right: 90px;
}
border
/* 拆分的属性 */
div {
    border-style: dashed;
    border-color: red;
    border-width: 10px;
}
/* 简化的写法(无顺序要求) */
div {
    border: 10px dashed red;
}
/* 对不同方向的样式 */
div {
    border-top-style: solid;
    border-bottom-color: blue;
    border-left-width: 2px;
}
margin

margin属性,设置盒子整体与外部的距离,用法和padding的区别是可以设置auto

div {
    margin: 10px auto;
}

padding中无auto

通过对width和height的定义的不同可以大致分为两种

现在主流浏览器使用的是W3C标准规定的盒子模型

W3C的标准盒子模型

在这里插入图片描述

IE盒子模型(非标准)

在这里插入图片描述

CSS元素的分类

  1. 块级元素:独占一行,对宽度,高度支持 display:block
  2. 内联元素:不独占一行,对宽度高度不支持;内容多长占据多大的空间 diaplay:inline
  3. 内联块级元素:不独占一行,但是对宽度高度支持 display:inline-block

对于块级元素拥有自带属性

display:block

对于内联元素拥有自带属性

display:inline

对于内联块级元素拥有自带自带属性

display:inline

布局

一、float普通的盒子类型

是一种横着的布局:float普通盒子类型

常用的就两种:左浮动和右浮动

.right {
    width: 700px;
    height: 200px;
    background-color: blue;
    float: right;
}

会产生的问题

  1. 用了float之后,所在的父级元素无高度的情况下会导致下方元素向上移动

在这里插入图片描述

解决这个问题可以给父级元素设置高度或者将溢出的部分隐藏

  1. 元素之间的间距均匀分布需要计算,而且不一定能均分

二、内联元素&内联块级元素

这布局我有二不用

在这里插入图片描述

一、我不用span,因为他没办法调整高度很局限

二、我不用内联块级元素,因为他会识别换行符导致产生空白很不美观

三、flex弹性盒子属性(推荐)

只要设置父级元素display: flex就可以让父元素随着子元素的高度变化

子元素始终横着布局甚至压缩自身空间,这就是弹性盒子的体现

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flexBox {
      display: flex;
      width: 100%;
      height: 500px;
      background-color: chocolate;
    }

    .child {
      width: 100%;
      text-align: center;
    }
    .child:nth-child(even) {
      background-color: aqua;
    }
    .child:nth-child(odd) {
      background-color: brown;
    }
  </style>
  <title>弹性盒子Demo</title>
</head>
<body>
  <div class="flexBox">
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
  </div>
</body>
</html>

在这里插入图片描述

在布局中,我们常常通过改变flex盒子的排列方向以达到我们设计的占比,也就是控制子元素的排列方式

控制子元素横向排列方式:flex-direction

flex-direction 设置弹性盒子内子元素的排列方向 ,默认row(横着从左到右),row-reverse(横着从右到左), column(靠左从上到下),column-reverse(靠左从下到上)

控制子元素换行:flex-warp

flex-warp 设置弹性盒子内子元素换行方式(横着的时候才能讨论是否换行),默认nowarp(不换行) warp(换行)(作用到弹性盒子上)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flexBox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 500px;
      background-color: chocolate;
    }

    .child {
      width: 20%;
      text-align: center;
    }
    .child:nth-child(even) {
      background-color: aqua;
    }
    .child:nth-child(odd) {
      background-color: brown;
    }
  </style>
  <title>弹性盒子Demo</title>
</head>
<body>
  <div class="flexBox">
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
    <div class="child">这是一个弹性盒子的孩子</div>
  </div>
</body>
</html>

在这里插入图片描述

控制子元素的顺序:flex-order

order设置在display为flex的类上,order的值越小排序越优先靠前

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .flexBox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 500px;
      background-color: chocolate;
    }

    .child {
      width: 20%;
      text-align: center;
    }
    .child:nth-child(even) {
      background-color: aqua;
      order: 1;
    }
    .child:nth-child(odd) {
      background-color: brown;
    }
  </style>
  <title>弹性盒子Demo</title>
</head>
<body>
  <div class="flexBox">
    <div class="child">这是一个弹性盒子的孩子1</div>
    <div class="child">这是一个弹性盒子的孩子2</div>
    <div class="child">这是一个弹性盒子的孩子3</div>
    <div class="child">这是一个弹性盒子的孩子4</div>
    <div class="child">这是一个弹性盒子的孩子5</div>
    <div class="child">这是一个弹性盒子的孩子6</div>
    <div class="child">这是一个弹性盒子的孩子7</div>
    <div class="child">这是一个弹性盒子的孩子8</div>
    <div class="child">这是一个弹性盒子的孩子9</div>
    <div class="child">这是一个弹性盒子的孩子10</div>
    <div class="child">这是一个弹性盒子的孩子11</div>
    <div class="child">这是一个弹性盒子的孩子12</div>
    <div class="child">这是一个弹性盒子的孩子13</div>
  </div>
</body>
</html>

这是不设置order的排列方式

在这里插入图片描述

设置后

在这里插入图片描述

控制子元素的拉伸/压缩比例:flex

flex 设置弹性盒子内子元素的压缩比例/拉伸比例(作用到弹性盒子子元素上)
flex是复合属性,由flex-grow(拉伸因子),flex-shrink(压缩因子),flex-basis(基准宽度)三个属性组成
复合属性可以简写

.container {
    flex-grow: 1;
    flex-shrink: 2;
}
/* 上述写法等价于 */
.container {
    flex: 1 2;
}

/* 若值拉伸压缩比例相同 */
.container {
    flex: 2;
}

存中…(img-agDs65Pl-1723017199791)]

控制子元素的拉伸/压缩比例:flex

flex 设置弹性盒子内子元素的压缩比例/拉伸比例(作用到弹性盒子子元素上)
flex是复合属性,由flex-grow(拉伸因子),flex-shrink(压缩因子),flex-basis(基准宽度)三个属性组成
复合属性可以简写

.container {
    flex-grow: 1;
    flex-shrink: 2;
}
/* 上述写法等价于 */
.container {
    flex: 1 2;
}

/* 若值拉伸压缩比例相同 */
.container {
    flex: 2;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值