css set a4 paper size

mydudu2005

于 2017-02-23 17:38:55 发布

阅读量488

点赞数

分类专栏： html+css 文章标签： print

本文链接：https://blog.csdn.net/mydudu2005/article/details/84857660

版权

html+css 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了一种使用HTML和CSS实现A4纸大小页面布局的方法，并通过具体示例展示了如何设置页面尺寸、边距、背景及阴影效果等，同时介绍了如何在打印时调整样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

<div class="book">
    <div class="page">
        <div class="subpage">Page 1/2</div>    
    </div>
    <div class="page">
        <div class="subpage">Page 2/2</div>    
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: #FAFAFA;
    font: 12pt "Tahoma";
}
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.page {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px red solid;
    height: 256mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}
@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}