前端学习笔记之3 盒子模型

引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端; 这篇文章只是作为我的笔记发在这里, 供自己业余时间看看; 全是很基础的东西, 看到的小伙伴 酌情略过 吧^_

盒子模型的概念

CSS盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：

图片

如果想要了解更多, 请看这篇文章; 或自行百度, 这种文章多得是

1. 居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>

    <!-- 水平居中
        行内标签和行内块级标签 在父标签设置居中
        块级标签设置外边距(margin)左右自动, 则水平居中
    -->

    <!-- 垂直居中
        行内标签和行内块级标签 让父标签 line-height == height
        块级标签: 通过布局
    -->

    <style>
        div{
            background-color: red;
            width: 400px;
            height: 250px;
            line-height: 250px;

            /*水平居中, 设置子标签居中, 要在父标签中设置*/
            text-align: center;

        }
        span{
            background-color: green;

            /*line-height: 250px;*/
        }
        p{
            background-color: gold;
            width:200px;
            /*上下0, 左右自动*/
            margin: 0px auto;
            text-align: center;
        }
        button{
            width: auto;
            height: 50px;
        }


    </style>
</head>
<body>
    <div>
        <!--<span>行内标签</span>-->
        <button>行内块级标签</button>
        <!--<p>P块级标签</p>-->
    </div>
</body>
</html>

2. 属性补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性补充</title>
    <style>
        input{
            width: 200px;
            height: 40px;
            padding: 5px;
            /*默认是 content-box, 会往外挤*/
            box-sizing: border-box;
        }
    </style>

</head>
<body>
    <input>
</body>
</html>

3. CSS布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>

    <!--
      - 默认情况下, 所有网页标签都在标准流布局中
        : 从上到下, 从左到右 (跟这滑动)
      - 脱离标准流的方法有
        : float属性 浮动在父标签左边, 或者右边
        : position属性 和 left, right, top, bottom属性

    -->
    <style>
        ul{
            display: inline-block; // 变成行内块级标签
            background-color: red;
        }
        ul li{
            /*float: left;*/
            float: right;
        }

    </style>

</head>
<body>
    <ul>
        <li>哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈</li>
        <li>哈哈哈哈哈哈哈哈</li>
    </ul>
</body>
</html>

4. Position定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position定位</title>
    <style>
        div{
            background-color: red;
            width:200px;
            height: 200px;

            /*position: 默认是static*/
            position: relative;
        }
        span{
            background-color: green;
            
            position: absolute;
            left: 20px;
            top: 20px;
        }

    </style>
</head>
<body>
    <div>
        <span>哈哈哈哈哈哈哈</span>
    </div>
</body>
</html>