html页面布局

   布局的常用方法有几下几种

一,float布局

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。

浮动元素会生成一个块级框,而不论它本身是何种元素。

属性值:

float:left        元素向左浮动。

float:reght     元素向右浮动。

float:none     默认值。元素不浮动,并会显示在其在文本中出现的位置。

float:inherit   规定应该从父元素继承 float 属性的值。

float案例:

 <div style="width:100px; height: 40px; background-color: black;float: right;"> </div>
       <div style="width:100px; height: 40px; background-color: #FF0000;float: left;"> </div>
       <div style=" width: 100px; background-color: #0000FF; height: 40px; float: left;"> </div>

效果:(如果不用浮动div块将会一次垂直往下排列)浮动后的块元素可以用magin或pading来留白修饰来使其美观。

二、absolute布局

absolute译为绝对的,absolute是postion属性一个属性值。当一个元素使用绝对定位时,这个元素将不受页面的布局影响

可以根据自己的需求来改变其位置,来完成一些不规则的页面布局:

属性值:

postion:absolute     生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

postion:fixed           生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

postion:relative        生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

postion:static           默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

postion:inherit          规定应该从父元素继承 position 属性的值。

absolute 中有一个值的注意的地方 相对于 static 定位以外的第一个父元素进行定位  在使用绝对定位时要注意他父元素数的定位,假若对父元素没有要求

可以给父元素设置一个相对定位relative。对于新手来说,定位之间的切换,父级和下一级之间的关系常常扰乱我们(我就是这样)所以要勤加练习更好的

掌握 。

absolute 案例:

<style type="text/css">
            .div1{
                width: 100px;
                height: 40px;
                background-color: #FF0000;
                position: absolute;
                top: 20px;
                left: 30px;
            }
            .div2{
                width: 100px;
                height: 40px;
                background-color: #0000FF;
            }
        </style>
    </head>
    <body>
       <div class="div1"> </div>
       <div class="div2"> </div>
       <div class="div3"> </div>
    </body>

效果:(使用绝对定位将红色块定位到距离上边框20px左边框30px)如果想让蓝色的div块在上面,可以用在蓝色样式加绝对定位用z-index:1来设置

                     

 

 

 

 三、flex弹性布局

        弹性布局东西太多不写了直接看别人的博客吧我看着蛮好   http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

四、table布局 (链接:https://blog.csdn.net/Bessicxie/article/details/78572424)

      Table布局的缺点是比其它html标记占更多的字节,会阻挡浏览器渲染引擎的渲染顺序,会影响其内部的某些布局属性的生效,

优点就是用table做表格是完全正确的

语法:display:table;

属性:常见   display:table相当于“table”标签;display:table-row相当于“tr”标签;display:table-cell相当于“td”标签;

 

 

 

 案例:

 

 

 五、grid布局(链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

内容来源  作者:_leonlee

                 链接:https://www.jianshu.com/p/d183265a8dad
                 来源:简书

作为小白的我还是第一次来了解grid布局,刚刚百度了一下子看了几篇博文,了解到这是一个非常nb的东西

简介
         CSS网格布局(又称“网格”),是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table(表格)布局,然后用float(浮动),position(定位)和inline-block(行内块)布局,但是这些方法本质上是hack,遗漏了很多功能,例如垂直居中。后来出了flexbox(盒子布局),解决了很多布局问题,
但是它仅仅是一维布局,而不是复杂的二维布局,实际上它们(flexbox与grid)能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块,2012
年11月06日成立草案
          使用Grid布局非常简单,你只需要给容器(container)定义:display:grid,并设置列(grid-template-columns)和 行(grid-template-rows)的大小,然后用grid-column和grid-row定义容器子元素(grid-item项目)的位置。与flexbox布局类似,一开始项目的排列顺序并不重要,可以放置在容器的任何位置,这也使得你非常容易通过媒体查询重新排列你的项目。想象一下,当你定义整个页面的布局时,你只需要几行CSS就可以完成页面重排以便适应各种屏幕宽度,这得有多么神奇!
好东西总是来的晚,不要焦躁,不要沮丧。活好每一天,自然就等到了。
目前浏览器还不支持Grid布局,IE10和IE11支持老的语法。如果你想体验Grid布局的强大,推荐使用开通过“体验新功能”的Chrome, Opera 或 Firefox, Chrome:打开浏览器,输入chrome://flags,找到"experimental web platform features",启用并重启浏览器;Opera:输入opera://flags,与Chrome一样;Firefox:输入layout.css.grid.enabled。
属性:
1. display: grid | inline-grid | subgrid       
            grid: 生成块级网格
            inline-grid: 生成行内网格
            subgrid: 如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小。
2. grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
             track-size: 轨道大小,可以使用css长度,百分比或用分数(用fr单位)。
            line-name: 网格线名字,你可以选择任何名字。
3.grid-template-areas
             grid-area-name: 网格项的grid-area属性值(名字)
            ‘.’ : 空网格单元
            none: 不定义网格区域
4. grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> 
          line-size: 网格线间距,设置单位值。
5. grid-gap:<grid-row-gap> <grid-column-gap>;
         是grid-column-gap 和 grid-row-gap简写。
6. justify-items: start | end | center | stretch(默认) ;
         start: 左对齐
         end: 右对齐。
         center: 居中对齐。
        stretch: 填满(默认)
7. align-items: start | end | center | stretch ;
         start: 顶部对齐。
         end: 底部对齐。
         center: 居中对齐。
         stretch:填满(默认)。
此处省略一万字.....................
    grid 内容原文链接 (链接  https://www.jianshu.com/p/d183265a8dad)
本来就想写刚刚会的两个的,但是一百度居然有这么多我没用过的布局,所以记下来留个印象,好歹以后有点印象
 内容若侵权请告知
posted @ 2020-04-10 22:51  一生的风景  阅读(834)  评论(0编辑  收藏