css混合布局 |css table选中变色

.parent {
display: flex;
align-items: center;
justify-content: space-between;
height: 200px;
background-color: #f0f0f0;
padding: 20px;
}
.left {
width: 200px;
height: 100px;
background-color: #ccc;
}
.right {
flex: 1;
height: 100px;
background-color: #999;
margin-left: 20px;
}

在这个示例代码中，大家定义了一个具有混合布局的父容器，采用了flex布局的方式。display:flex属性使得子元素可以被弹性布局，align-items:center属性定义了子元素在交叉轴上的对齐方式为居中对齐，justify-content:space-between属性则定义了子元素在主轴上的对齐方式为两端对齐。在这个布局中，大家还设置了父容器的高度、背景色和内边距。

接下来，大家定义了两个子元素，左侧的子元素采用了固定的宽度和高度，背景色则为灰色，右侧的子元素采用了弹性布局的方式，flex:1属性相当于flex-grow:1;flex-shrink:1;flex-basis:auto;，它将子元素的初始宽度设置为0，从而使子元素可以根据父容器的可用空间自适应。在这个布局中，右侧子元素的背景色为浅灰色，并且设置了一个20px的左边距。

通过这样的混合布局，大家可以轻松实现各种复杂的网页布局效果，例如：头部固定、中间自适应、底部固定的三栏布局、左右两侧固定、中间自适应的三栏布局等。