shaosiming

html中常规的布局开始写法你知道吗?

刚才,有个人问我说,HTML应该怎么样开始布局呢?自己写的布局总是不能居中怎么回事?不知道怎么开始写布局,然后就问我在html中怎么样才算是真的开始写自己的布局。...

关键词: html 布局
时间:2019-09-16
查看:
评论:0 条 / 我也去评论
刚才,有个人问我说,HTML应该怎么样开始布局呢?自己写的布局总是不能居中怎么回事?不知道怎么开始写布局,然后就问我在html中怎么样才算是真的开始写自己的布局。

所以,我就简单的画了个图给他解释了一下,图片如下:


没错,很凌乱的一张图,但是大致的颜色还是可以分清楚,然后我就给他解释了一下各种颜色的意义。

1丶红色代表整个html网页部分。
2丶黄色打代表的body。
3丶绿色的代表我们要写的父级属性。
4丶蓝色代表我们的要写在父级属性里面的子级属性。
5丶棕色部分才是最终我们写入的内容。

是不是看着很麻烦?其实并不是,html 和 body这是html必须具备的标签,所以,要写一个html网页必须具备<html>和<body>标签。

那么,剩下的三个部分才是我们要写的,也就是3 4 5 才是我们要写入的布局。比如下面代码

<html >  
<body>
    <div class="01">
        <div class="02" style="width: 1200px;margin:auto">
            <div class="03">
                少司命个人博客
            </div>
        </div>
    </div>
</body>
</html>

html和body是标准的html代码,必须写入。 那么下面的 01 是父级 02是子级 03才是我们要写的内容布局。 

其中01的父级可以跟随body走写个宽度100%就可以。而02取的属性就是父级的属性,我们可以规定一个宽度,比如1200px然后再给一个默认margin:auto属性,就可以居中了。

margin:auto 属性是指自动占用可用空间。而子级元素下面我们规定了1200px,所以写入margin:auto会自动居中切占满子级元素的空间。

需要注意的是,如果我们直接在body下写margin:auto是不会居中的,所以我们需要一个父级属性,然后在子级属性里面写入margin:auto才行。

认真一点可以发现,从浏览器审查元素中就可以看到。整个网页一般都是分为5个层面。1 2 是必备的html和body 而3 4 是父级和子级  5 才是子级写入的内容。比如说下图这样


大家可以去看任何网站,不管第五层如何规定的,外面都会包裹着4层,也就是 html body 父级 子级 只有中间才是我们最终要写内容的地方。
顶一下  
(2)
  66.7%
踩一下  
(1)
  33.3%
  • 本文标题:html中常规的布局开始写法你知道吗?
  • 本文链接:https://www.shaosiming.net/html/news/41.html
  • 转载说明:如果没有标明转载均为少司命个人博客原创!转载需要注明出处~
  • 既然都来了,就说点什么吧……
    • 全部评论(0
      还没有评论,快来抢沙发吧!