css布局父级下的a子级占30 b子级占70%怎样使用flex布局来划分

如果要使用 Flex 布局来实现这个要求，可以将父级元素的 `display` 属性设置为 `flex`，然后将子元素的 `flex` 属性设置为相应的比例值。具体实现方法如下：

HTML 代码：

<div class="parent">
  <div class="child1">a</div>
  <div class="child2">b</div>
</div>

CSS 代码：

.parent {
  display: flex;
}

.child1 {
  flex: 3;
}

.child2 {
  flex: 7;
}

其中，父级元素的 `display: flex;` 将其设置为 Flex 布局，子元素的 `flex` 属性用于设置其占据的空间比例，这里设置 `.child1` 占据 30%，`.child2` 占据 70%。注意，这里的比例值是相对于其他子元素而言的，可以是小数或整数。

这样设置后，`.child1` 和 `.child2` 就会按照 3:7 的比例占据父级元素的空间，从而实现占比布局的效果。

相关问题

css怎样父级内的子级显示滚动条

你可以给父级元素设置一个固定的高度和 `overflow: auto` 的样式，这样子元素内容超出父级元素高度时就会出现滚动条。

例如：

<div class="parent">
  <div class="child">子元素内容</div>
  <div class="child">子元素内容</div>
  <div class="child">子元素内容</div>
  <div class="child">子元素内容</div>
  <div class="child">子元素内容</div>
</div>

.parent {
  height: 200px;
  overflow: auto;
}

.child {
  height: 50px;
}

在上面的例子中，当子元素的高度加起来超过了父元素的高度时，就会出现滚动条。

elementui父级定义子级的css样式

在ElementUI中，父组件可以通过传递CSS样式或者通过类名来定义子组件的CSS样式。下面是一些示例：

1. 传递CSS样式

<el-button style="background-color: red; color: white;">Click Me</el-button>

在上面的示例中，el-button组件的父级定义了它的背景颜色和文本颜色。

2. 通过类名定义CSS样式

<template>
  <div class="my-component">
    <el-button>Click Me</el-button>
  </div>
</template>

<style>
.my-component .el-button {
  background-color: red;
  color: white;
}
</style>

在上面的示例中，我们定义了一个类名为my-component的div容器，并且使用了类名选择器来定义el-button组件的CSS样式。