前端的实习日记－初陆 - 三亚米饭网络科技有限公司

做前端已经一个多月了，在学习了解了 Html 和 CSS 样式之后就开始尝试做自己的第一个项目，虽然过程中遇到 […]

2018-11-08

做前端已经一个多月了，在学习了解了 Html 和 CSS 样式之后就开始尝试做自己的第一个项目，虽然过程中遇到了挺多问题，但是通过学习都可以解决。也许你们也会遇到同样的问题，所以这里就把遇到的问题和你们分享一下。布局小课堂要开课了，敲黑板，划重点，大家要拿小本本都记下来哦~

HTML 元素分类

Html 元素可以分为两类：块级元素和内联元素。

块级元素包括：< div >、< h1~h6 >、< ol >、< ul >、< li >、< table >、< p >标签等等。块级元素的特点是每个块级元素都是从新的一行开始，并且其后元素也另起一行，它的高度宽度行高边距都是可以设置的。常用的内联元素则包括：< a >、< span >、< img >、< input >等。与块级元素不同的是内联元素和其他元素都在一行上，高度宽度行高边距都是不可设置的。下面我们就试一下。

块级元素：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
</body>
</html>

内联元素：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准流</title>
</head>
<body>
    <span>文字文字</span>
    <span>文字文字</span>
    <span>文字文字</span>
</body>
</html>

对于块级元素和内联元素的记忆，我的建议是通过平时的练习来加强记忆，靠死记硬背我不知道你们能不能记住，但是你们的小可爱我是记不住，无奈脸。

Html 三种布局方式

1、标准流

网页中默认的布局方式，就是顺序布局，就是从左到右，从头到尾。

2、浮动

一个浮动盒可以向左或者向右移动，其边会挨着父元素的框或者另一个浮动元素的边框并且对齐；浮动盒需要一个可以容纳他的空间才会停止浮动，所以如果没有足够的水平空间来容纳，浮动盒会向下移动，直到空间合适；因为浮动盒不在普通流内，文档普通流中的块级元素感知不到浮动元素的存在。通俗的讲就是浮动的第一个元素会贴着它父元素的边框，第二个贴着第一个，以此类推，直到父元素的宽度不能容纳它，那它就只能排到第二排了。

3、定位

通过改变正常的标准流以非正常的方式，迫使元素脱离标准流，这就是 position 属性。position 属性决定了元素将如何认定，通过 top、right、bottom、left 来实现位置的改变。position 中的可选属性：static、relative、absolute、fixed 和 inherit。static 是默认值，元素按照标准流方式正常显示；relative 是相对定位，使用了的元素仍处于正常的文档流中，我们可以通过使用 top、right、bottom、left 来改变元素的位置；absolute 是绝对定位，也可以改变属性来改变元素的位置，使其脱离文档流。在我看来，定位就是你想让它在哪它就能去哪。

盒子模型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准流</title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 0;
            top: 100px;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            left: 0;
            top: -50px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

说了这么多，可能我们会把盒子模型和定位进行混用，对于盒子模型我们的定义是通过改变内边距 padding 和外边距 margin 来实现元素的移动，而定位是通过元素的位置移动来改变出现在网页中的相对位置。这就是盒子模型和定位的区别。