css中一种巧妙的head与body的布局方式.

包含head和body

head与body有20px的间距.div.box与其它内容没有间距.

仅有head,没有body

head有设置margin-bottom:20px,但div.box与其它内容没有间距.

解读

这部分布局需要的前置知识点:vue中slot,react中React.ReactNode,以下为方便描述这两者统称为【插槽】.

这是一个布局样式,head与body都需要通过插槽进行设置,可只插入某一样,或者两者同时插入.

重点:不管仅设置哪一个,与div.box外的其它内容,盒子间的距离都是紧贴的,没有间距.但是在盒子内部,如果同时插入了head与body两部分的元素,则div.head与div.body间将会有20px的间距.

使用场景

很多UI库的组件设计都用上了这种套路.如:tabs组件等...

全部源码

import React from 'react';
import styled from '@emotion/styled';
export interface IProps extends ICompProps {}
HeadBodyBox.defaultProps = {} as Partial<IProps>;
function HeadBodyBox(props: IProps) {
    return (
        <RootDiv className={'HeadBodyBox'} >
            <div className="box">
                <div className="head">
                    <div style={{ height: 'auto' }}>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>【头部盒子】:margin-bottom: 20px;</div>
                    </div>
                </div>
                <div className="body">
                    {/* //~【此部分内容在vue中将使用slot替换,在react中将使用children替换】 */}
                    {/* <div style={{ height: 'auto' }}>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>【身体盒子】:margin-bottom: 20px;</div>
                    </div> */}
                </div>
            </div>
            <div className="otherElement">
                <div style={{ height: '400px' }}>其它内容</div>
            </div>
        </RootDiv>
    );
}
export default React.memo(HeadBodyBox as React.FC<IProps>);
const RootDiv = styled.div`
    width: 300px;
    &.HeadBodyBox {
        .box {
            background-color: yellow;
            margin-bottom: -20px;
            .head {
                margin-bottom: 20px;
                background-color: #39d;
            }
            .body {
                background-color: #1f6;
                margin-bottom: 20px;
            }
        }
        .otherElement {
            background-color: #eee;
        }
    }
`;