CSS Padding填充

SS Padding（填充）屬性定義元素邊框與元素內容之間的空間。

Padding（填充）

當元素的 Padding（填充）（內邊距）被清除時，所"釋放"的區域將會受到元素背景顏色的填充。

單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。

可能的值

值	說明
length	定義一個固定的填充(像素, pt, em,等)
%	使用百分比值定義一個填充

填充- 單邊內邊距屬性

在CSS中，它可以指定不同的側面不同的填充：

實例

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

填充 - 簡寫屬性

為了縮短代碼，它可以在一個屬性中指定的所有填充屬性。

這就是所謂的縮寫屬性。所有的填充屬性的縮寫屬性是"padding":

實例

padding:25px 50px;

嘗試一下 ?

Padding屬性，可以有一到四個值。

padding:25px 50px 75px 100px;

上填充為25px
右填充為50px
下填充為75px
左填充為100px

padding:25px 50px 75px;

上填充為25px
左右填充為50px
下填充為75px

padding:25px 50px;

上下填充為25px
左右填充為50px

padding:25px;

所有的填充都是25px

更多實例

在一個聲明中的所有填充屬性

這個例子演示了使用縮寫屬性設置在一個聲明中的所有填充屬性，可以有一到四個值。

設置左部填充

這個例子演示了如何設置元素左填充。

設置右部填充

這個例子演示了如何設置元素右填充。.

設置上部填充

這個例子演示了如何設置元素上填充。

設置下部填充

這個例子演示了如何設置元素下填充。

所有的CSS填充屬性

屬性	說明
padding	使用縮寫屬性設置在一個聲明中的所有填充屬性
padding-bottom	設置元素的底部填充
padding-left	設置元素的左部填充
padding-right	設置元素的右部填充
padding-top	設置元素的頂部填充

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

模型是CSS布局的基礎，理解它的每個組成部分對于創建整潔、響應式的網頁至關重要。本文將深入探討盒模型的四個主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內容（Content），并解釋它們如何共同工作來創建網頁布局。

盒模型概述

在CSS中，盒模型是一種用于設計和布局的概念模型，它將HTML元素視為一個盒子。這個盒子包括了元素的內容、內邊距、邊框和外邊距。理解盒模型對于控制元素的大小和在頁面上的位置至關重要。

盒模型的結構

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每個盒子從里到外包括：

內容（Content）：這是盒子中的實際內容，包括文本、圖片或其他媒體。
內邊距（Padding）：內容區域周圍的空間，內邊距是透明的。
邊框（Border）：圍繞內邊距和內容的線框，可以設置大小、樣式和顏色。
外邊距（Margin）：盒子外圍的空間，用來隔開相鄰的盒子。

邊距（Margin）

邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見，不會被背景顏色或背景圖片覆蓋。

/* 單邊邊距設置 */
.element {
  margin-top: 10px;    /* 上邊距 */
  margin-right: 15px;  /* 右邊距 */
  margin-bottom: 10px; /* 下邊距 */
  margin-left: 15px;   /* 左邊距 */
}

/* 簡寫形式 */
.element {
  margin: 10px 15px;   /* 上下邊距 | 左右邊距 */
}

邊距可以用來創建元素之間的空間，或者將元素與頁面邊緣分開。當兩個元素的垂直邊距相遇時，它們會合并成一個邊距，這個現象稱為邊距折疊。

邊框（Border）

邊框是盒子的一個可視化組件，圍繞著內邊距和內容。邊框的樣式、寬度和顏色都可以自定義。

.element {
  border-style: solid; /* 邊框樣式 */
  border-width: 2px;  /* 邊框寬度 */
  border-color: black; /* 邊框顏色 */
}

/* 簡寫形式 */
.element {
  border: 2px solid black;
}

邊框對于突出顯示元素或分隔內容非常有用。你還可以只為邊框的一邊或幾邊設置樣式。

填充（Padding）

填充是圍繞內容內部的空間，它可以增加內容和邊框之間的距離。與邊距不同，填充區域會被背景顏色或背景圖片覆蓋。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 簡寫形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充對于控制元素內部的空白區域非常有用，它可以幫助改善內容的可讀性。

內容（Content）

內容是盒子中的文字、圖片或其他媒體。內容的大小可以通過設置width和height屬性來控制，但實際可見區域的大小還會受到內邊距和邊框的影響。

.element {
  width: 200px;
  height: 150px;
}

內容區域是設計和布局的核心，所有的文本和媒體都在這里顯示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  .container {
    max-width: 800px;
    margin: auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid #0056b3;
    text-align: center;
  }

  .footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Welcome to My Page</h1>
  </div>

  <div class="content">
    <h2>Understanding CSS Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
    
    <div class="box">Content Box</div>
  </div>

  <div class="footer">
    Footer Content
  </div>
</div>

</body>
</html>

總結

理解盒模型是前端開發的基礎，它允許我們精確控制元素的布局和間距。通過恰當地使用邊距、邊框、填充和內容，我們可以創建出既美觀又功能強大的網頁設計。隨著響應式設計的興起，現代CSS框架已經將盒模型的概念整合進其核心，使得跨設備布局變得更加一致和簡單。

在日常開發中，經常使用開發者工具來檢查和調試盒模型的各個部分，確保我們的樣式表現按照預期工作。掌握盒模型，你將能夠更加自信地處理網頁布局的挑戰。

題背景描述

我們在做項目的時候，可能會遇到這樣的一個需求，根據業務數據，生成一份pdf文件，然后提供給用戶下載查看。

生成pdf文件，可能會有很多種方式實現：

1.根據html模板，把數據填充到html模板，生成一份pdf文件
2.根據pdf模板，把數據填充到pdf模板，生成一份pdf文件
3.根據word模板，把數據填充到word模板，生成一份pdf文件

對比了這3種實現方式：

第1種實現方式，html的代碼，會導致有些樣式丟失，效果不好。(不太建議)
第2種實現方式，操作起來，很麻煩，需要編寫大量的代碼，最終的效果也不是很友好。(難度比較大，不太建議)
第3種實現方式，這種實現，是個人目前覺得比較好的一種方式，樣式，實現也可以接受啦！！！

以上，僅代表個人觀點，可能有不對的地方，別噴，或輕點噴！！！

那今天咋們著重的討論一下第3種實現方式！！！^_^

word轉pdf說明

目前，word轉pdf，我們可以借助openoffice幫我們實現這個功能。

但凡，有個但是啦，畢竟你要借助openoffice，這畢竟是一個工具，那咋們就不得不部署運行這個程序，那這樣得話，不得加重咋們后期服務器的部署和運維了嘛？

所以這里，咋們還是得想想看，有無其他簡單的實現方式？

哈哈，那肯定是有的啦，我們可以通過純代碼的方式，實現word轉pdf的功能！！！

下面看哥們操作嘍！！！^_^

word轉pdf實現

word模板數據填充工具類

public class WordTemplateUtils {
    private static Logger logger = LoggerFactory.getLogger(WordTemplateUtils.class);
    /*
     * 根據Word模板生成word文檔
     * @param uploadPath    文件夾路徑
     * @param writePath     生成word文件路徑
     * @param templatePath  word模板路徑
     * @param contentMap    填充數據
     */
    public static boolean writeWordByTemplate(String uploadPath, String writePath, String templatePath, Map<String, Object> contentMap) throws Exception {
        //如果文件夾不存在，新建文件夾
        File file = new File(uploadPath);
        //如果路徑不存在，新建
        if (!file.exists() && !file.isDirectory()) {
            file.mkdirs();
        }
        boolean result = false;
        logger.info("---根據模板生成word文檔");
        XWPFDocument document = new XWPFDocument(new FileInputStream(templatePath));
        if (document == null) {
            logger.error("---模板文件不存在，tempPath：{}", templatePath);
            return result;
        }
        InputStream is = null;
        FileOutputStream fos = null;
        try {
            fos = new FileOutputStream(writePath);
            WordTemplateUtils.changeText(document, contentMap);
            //生成新的word文檔
            document.write(fos);
            result = true;
        } catch (IOException e) {
            logger.error("---輸出word文檔失敗,原因：{}", e.getMessage());
            result = false;
        } finally {
            if (is != null) {
                is.close();
            }
            if (fos != null) {
                fos.close();
            }
        }
        return result;
    }

    /**
     * 替換段落文本
     *
     * @param document docx解析對象
     * @param textMap  需要替換的信息集合
     */
    private static void changeText(XWPFDocument document, Map<String, Object> textMap) {
        //獲取段落集合
        List<XWPFParagraph> paragraphs = document.getParagraphs();
        for (XWPFParagraph paragraph : paragraphs) {
            //判斷此段落時候需要進行替換
            String text = paragraph.getText();
            System.out.println(text);
            if (!text.equals("")) {
                List<XWPFRun> runs = paragraph.getRuns();
                for (XWPFRun run : runs) {
                    String textR = run.getText(0);//讀取的模板段落
                    if (StringUtils.isEmpty(textR)) {
                        continue;
                    }
                    String newTxetR = "";
                    //判斷文本是否需要進行替換
                    // System.out.print(textR + ",");
                    for (Map.Entry<String, Object> entry : textMap.entrySet()) {
                        //匹配模板與替換值 格式${key}
                        String key = entry.getKey();
                        Object value = entry.getValue();

                        if (textR.contains(key)) {//
                            if (value instanceof String) { //文字替換
                                String inputText = value.toString();
                                if (inputText.contains("\n")) {//包含換行符
                                    String[] lines = inputText.split("\n");
                                    //newTxetR = textR.replace(key, lines[0]);
                                    run.setText(lines[0].trim(), 0); // set first line into XWPFRun
                                    for (int i = 1; i < lines.length; i++) {
                                        // add break and insert new text
                                        run.addBreak();//換行
                                        run.addTab();//縮進
                                        run.setText(lines[i].trim());
                                    }
                                } else {
                                    newTxetR = textR.replace(key, (String) value);
                                    //替換模板原來位置
                                    if (!newTxetR.equals("")) {
                                        run.setText(newTxetR, 0);
                                    }
                                }
                            } else if (value instanceof Map) { //圖片替換
                                newTxetR = textR.replace(key, "");
                                //替換模板原來位置
                                if (!newTxetR.equals("")) {
                                    run.setText(newTxetR, 0);
                                }
                                Map picMap = (Map) value;
                                int width = Integer.parseInt(picMap.get("width").toString());
                                int height = Integer.parseInt(picMap.get("height").toString());
                                int picType = getPictureType(picMap.get("type").toString());
                                FileInputStream fis = (FileInputStream) picMap.get("content");
                                try {
                                    String blipId = document.addPictureData(fis, picType);
                                    int id = document.getNextPicNameNumber(picType);
                                    createPicture(id, blipId, width, height, run);
                                } catch (Exception e) {
                                    e.printStackTrace();
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /**
     * @param id
     * @param blipId
     * @param width  寬
     * @param height 高
     *               //* @param paragraph  段落
     */
    private static void createPicture(int id, String blipId, int width, int height, XWPFRun xwpfRun) {
        final int EMU = 9525;
        width *= EMU;
        height *= EMU;
        CTInline inline = xwpfRun.getCTR().addNewDrawing().addNewInline();
        //CTInline inline = paragraph.createRun().getCTR().addNewDrawing().addNewInline(); //在遍歷run列表的時候，創建新的run有可能會導致報錯
        String picXml = ""
                + "<a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">"
                + "   <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">"
                + "      <pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">"
                + "         <pic:nvPicPr>" + "            <pic:cNvPr id=""
                + id
                + "" name="Generated"/>"
                + "            <pic:cNvPicPr/>"
                + "         </pic:nvPicPr>"
                + "         <pic:blipFill>"
                + "            <a:blip r:embed=""
                + blipId
                + "" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"/>"
                + "            <a:stretch>"
                + "               <a:fillRect/>"
                + "            </a:stretch>"
                + "         </pic:blipFill>"
                + "         <pic:spPr>"
                + "            <a:xfrm>"
                + "               <a:off x="0" y="0"/>"
                + "               <a:ext cx=""
                + width
                + "" cy=""
                + height
                + ""/>"
                + "            </a:xfrm>"
                + "            <a:prstGeom prst="rect">"
                + "               <a:avLst/>"
                + "            </a:prstGeom>"
                + "         </pic:spPr>"
                + "      </pic:pic>"
                + "   </a:graphicData>" + "</a:graphic>";

        inline.addNewGraphic().addNewGraphicData();
        XmlToken xmlToken = null;
        try {
            xmlToken = XmlToken.Factory.parse(picXml);
        } catch (XmlException xe) {
            xe.printStackTrace();
        }
        inline.set(xmlToken);

        inline.setDistT(0);
        inline.setDistB(0);
        inline.setDistL(0);
        inline.setDistR(0);

        CTPositiveSize2D extent = inline.addNewExtent();
        extent.setCx(width);
        extent.setCy(height);

        CTNonVisualDrawingProps docPr = inline.addNewDocPr();
        docPr.setId(id);
        docPr.setName("docx_img_ " + id);
        docPr.setDescr("docx Picture");
    }

    /**
     * 根據圖片類型，取得對應的圖片類型代碼
     *
     * @param picType
     * @return int
     */
    private static int getPictureType(String picType) {
        int res = XWPFDocument.PICTURE_TYPE_PICT;
        if (picType != null) {
            if (picType.equalsIgnoreCase("png")) {
                res = XWPFDocument.PICTURE_TYPE_PNG;
            } else if (picType.equalsIgnoreCase("dib")) {
                res = XWPFDocument.PICTURE_TYPE_DIB;
            } else if (picType.equalsIgnoreCase("emf")) {
                res = XWPFDocument.PICTURE_TYPE_EMF;
            } else if (picType.equalsIgnoreCase("jpg") || picType.equalsIgnoreCase("jpeg")) {
                res = XWPFDocument.PICTURE_TYPE_JPEG;
            } else if (picType.equalsIgnoreCase("wmf")) {
                res = XWPFDocument.PICTURE_TYPE_WMF;
            }
        }
        return res;
    }


    public static void main(String[] args) throws Exception {
        Map<String, Object> contentMap = new HashMap<String, Object>();

        //組裝文本參數
        contentMap.put("demo1", "示例1");
        contentMap.put("demo2", "示例2");
       
        String fileName = "demo.docx";
        WordTemplateUtils.writeWordByTemplate("D:\word\file", ""D:\word\file\" + fileName, 
            "D:\word\template\template.docx", contentMap);
    }
}
復制代碼

word模板，可以是這樣：

最終生成的效果如下：

word轉pdf工具類

/**
 * Word或Excel 轉Pdf 工具類
 *
 * 備注:需要引入 aspose-words-15.8.0-jdk16.jar / aspose-cells-8.5.2.jar
 */
public class PdfUtil {

    private static boolean getLicense() {
        boolean result = false;
        try {
            // license.xml應放在..\WebRoot\WEB-INF\classes路徑下
            InputStream is = PdfUtil.class.getClassLoader().getResourceAsStream("License.xml");
            License aposeLic = new License();
            aposeLic.setLicense(is);
            result = true;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }

    /**
     * @param wordPath 需要被轉換的word文件名
     * @param pdfPath  轉換之后pdf的文件
     */
    public static void doc2pdf(String wordPath, String pdfPath) {
        if (!getLicense()) { // 驗證License 若不驗證則轉化出的pdf文檔會有水印產生
            return;
        }
        try {
            long old = System.currentTimeMillis();
            File file = new File(pdfPath); //新建一個pdf文檔
            FileOutputStream os = new FileOutputStream(file);
            Document doc = new Document(wordPath); //Address是將要被轉化的word文檔
            doc.save(os, com.aspose.words.SaveFormat.PDF);//全面支持DOC, DOCX, OOXML, RTF HTML, OpenDocument, PDF, EPUB, XPS, SWF 相互轉換
            long now = System.currentTimeMillis();
            os.close();
            System.out.println("共耗時：" + ((now - old) / 1000.0) + "秒"); //轉化用時
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * @param excelPath 需要被轉換的excel全路徑帶文件名
     * @param pdfPath   轉換之后pdf的全路徑帶文件名
     */
    public static void excel2pdf(String excelPath, String pdfPath) {
        if (!getLicense()) { // 驗證License 若不驗證則轉化出的pdf文檔會有水印產生
            return;
        }
        try {
            long old = System.currentTimeMillis();
            Workbook wb = new Workbook(excelPath);// 原始excel路徑
            FileOutputStream fileOS = new FileOutputStream(new File(pdfPath));
            wb.save(fileOS, com.aspose.cells.SaveFormat.PDF);
            fileOS.close();
            long now = System.currentTimeMillis();
            System.out.println("共耗時：" + ((now - old) / 1000.0) + "秒"); //轉化用時
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

   

    public static void main(String[] args) {
        //word 和excel 轉為pdf
        String fileName = "D:\word\file\demo.docx";
        String pdfPath = "D:\word\pdf\demo..pdf";
        doc2pdf(filePaths, pdfPath);
    }
}
復制代碼

這里提供一下：License.xml文件

<License>
    <Data>
        <Products>
            <Product>Aspose.Total for Java</Product>
            <Product>Aspose.Words for Java</Product>
        </Products>
        <EditionType>Enterprise</EditionType>
        <SubscriptionExpiry>20991231</SubscriptionExpiry>
        <LicenseExpiry>20991231</LicenseExpiry>
        <SerialNumber>8bfe198c-7f0c-4ef8-8ff0-acc3237bf0d7</SerialNumber>
    </Data>
    <Signature>sNLLKGMUdF0r8O1kKilWAGdgfs2BvJb/2Xp8p5iuDVfZXmhppo+d0Ran1P9TKdjV4ABwAgKXxJ3jcQTqE/2IRfqwnPf8itN8aFZlV3TJPYeD3yWE7IT55Gz6EijUpC7aKeoohTb4w2fpox58wWoF3SNp6sK6jDfiAUGEHYJ9pjU=</Signature>
</License>

好了，這個就是word轉pdf的示例，也是比較簡單啦！！！

好了，word轉pdf，大概的實現，就是這樣了！！！^_^

那我們就可以愉快的編寫代碼了！！！^_^

作者：llsydn
鏈接：https://juejin.cn/post/7087036463035973640

在線咨詢

上一篇：js 跳轉頁面方式詳解
下一篇："巧用CSS ::before 創建帶透明陰影效果的圖標按

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商