css盒子模型的padding的误解,利用padding实现居中

最新推荐文章于 2024-06-23 12:25:57 发布

Mars-xq

最新推荐文章于 2024-06-23 12:25:57 发布

阅读量2.7k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/sinat_31057219/article/details/65936125

版权

css 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、Android中的图片使用padding摆放：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="150dp"
        android:background="#ffffff">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="150dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:paddingTop="50dp">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher" />
    </LinearLayout>


</LinearLayout>

第一个线性布局加上padding-top后变成第二个线性布局的样子：
1、白色背景的线性布局高度不变，只是移动了Android机器人图片的位置。如果padding-top足够大，将看不到Android机器人图片。
2、线性布局linearlayout宽高度类似css中的border宽高，不会受padding、margin、content影响。

二、css中的盒子模型使用padding：

盒子高度=上margin+上padding+content高+下padding+下margin
盒子宽度=左margin+左padding+content宽+右padding+右margin

注意：1、当盒子添加了padding或者margin，只影响盒子的尺寸，并不会影响content的区域尺寸。2、div的宽高度就是content的宽高。

使用padding属性使content水平竖直居中的方法：

方法一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="author" type="Nancle from CAU CS101"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>如何让img标签在div里左右上下居中</title>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        #container1 {
            /*  300*150*/
            width: 300px;
            height: 150px;
            background-color: cyan;
            /*水平居中*/
            text-align: center;
        }

        #container2 {
            /*  300*150*/
            width: 300px;
            height: 150px;
            background-color: cyan;
            /*水平居中*/
            text-align: center;
            /*垂直居中*/
            padding-top: 50px; /*div高度-img高度*/
        }

        #container3 {
            /*  300*150*/
            width: 300px;
            height: 150px;
            background-color: cyan;
            border: #000 1px solid;
            /*水平居中*/
            text-align: center;
        }

        #container4 {
            /*  300*150*/
            width: 300px;
            height: 150px;
            background-color: cyan;
            border: #000 1px solid;
            /*水平居中*/
            text-align: center;
            /*垂直居中*/
            padding-top: 50px; /*div高度-img高度*/
        }
    </style>
</head>
<body>
<!--300*150-->
<div id="container1"><!--150*100-->
    <img src="ic_launcher.png" width="150" height="100" style="background-color: bisque"/>
</div>

<br>
<br>
<br>

<!--300*200-->
<div id="container2"><!--150*100-->
    <img src="ic_launcher.png" width="150" height="100" style="background-color: bisque"/>
</div>

<br>
<br>
<br>

<!--302*152-->
<div id="container3"><!--150*100-->
    <img src="ic_launcher.png" width="150" height="100" style="background-color: bisque"/>
</div>

<br>
<br>
<br>

<!--302*202-->
<div id="container4"><!--150*100-->
    <img src="ic_launcher.png" width="150" height="100" style="background-color: bisque"/>
</div>
</body>
</html>

在这里插入图片描述

方法二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="author" type="Nancle from CAU CS101"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>如何让img标签在div里左右上下居中</title>
    <script type="text/javascript">
    </script>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }
          
        #container {
            /*  300*150*/
            width: 300px;
            height: 150px;
            background-color: cyan;
            border: #000 1px solid;
        }

        #container1 {
            /*  300*150*/
            width: 300px;
            height: 150px;
            background-color: cyan;
            border: #000 1px solid;
            /*水平居中*/
            padding-left: 150px; /*div宽度-img宽度*/
        }

        #container2 {
            /*  300*150*/
            width: 300px;
            height: 150px;
            background-color: cyan;
            border: #000 1px solid;
            /*水平居中*/
            padding-left: 150px; /*div宽度-img宽度*/
            /*垂直居中*/
            padding-top: 50px; /*div高度-img高度*/
        }
    </style>
</head>
<body>
<div id="container"><!--150*100-->
    <img src="ic_launcher.png" width="150" height="100"/>
</div>
<br/>
<br/>
<br/>
<div id="container1"><!--150*100-->
    <img src="ic_launcher.png" width="150" height="100"/>
</div>
<br/>
<br/>
<br/>
<div id="container2"><!--150*100-->
    <img src="ic_launcher.png" width="150" height="100"/>
</div>
<p>
</p>
</body>
</html>