zoukankan      html  css  js  c++  java
  • 网页的布局与定位看完这篇就够了

    写在前面的话:"你想要的东西很贵,你想去的地方都很远,只有不停的努力,才能攒好足够的勇气,跨过人生中的每一场冒险。"每次学习都会问自己这次学习,学习到了什么?通过反问可以让自己真正的去学习东西,而不是假装很努力。希望静下心来,体会身边的美好,探索未知的世界。我是梦阳辰!期待与你相遇!

    01.元素的类型

    HTML标记被定义成了不同的类型,一般分为块标记和行内标记,也称块元素和行内元素。

    1.块元素

    特点:
    1.每个块元素通常都会独自占据一整行或多整行。

    2.可以对其设置宽度,高度,对齐等属性。

    3.常用于网页布局和网页结构的搭建。

    常见的块元素:

    1.<h1>~<h6>
    2.<p>
    3.<table>
    4.<div>
    5.<from>
    6.<ul>
    7.<ol>
    8.<li>
    
    

    2.行内元素

    特点:
    1.和其他行内元素显示在同一行,知道显示不下才换行。

    2.仅靠自身字体的大小和图像的尺寸来支撑结构。

    3.一般不可以设置宽度高度等属性,常用于控制页面中的文本样式。

    常见的行内元素:

    1.<strong>
    2.<b>
    3.<em>
    4.<i>
    5.<del>
    6.<s>
    7.<ins>
    8.<u>
    9.<a>
    10.<span>
    

    3.行内块元素

    特殊的行内元素:
    可以对他们设置宽高和对齐属性。

    特点:
    inline-block 元素特点:
    1、和其他元素都在一行上;
    2、元素的高度、宽度、行高以及顶和底边距都可设置。

    行内块元素:

    1.<img/>
    2.<input/>
    

    02.元素类型的转换

    网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的特性(如设置宽高…),或者如果希望块元素具有行内元素的特性(不独占一行)可以使用display属性对元素类型进行转换。

    display常见的属性值及含义:

    inline:此元素将显示为行内元素(行内元素默认的dispaly属性值)

    block:此元素将显示为块元素。

    inline-block:此元素将显示为行内块元素,可以对其设置宽高和对齐属性,但是该元素不会独占一行。

    none:此元素将被隐藏,不显示,也不会占用页面空间,相当于元素不存在。

    代码书写规范:
    display:inline-block;
    display:inline;
    display:none;
    display:block;
    

    03.元素在网页的定位

    浮动:
    所谓浮动,即设置浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定的位置。

    定义:

    选择器{float:属性值;}
    

    常用的属性值:

    left:向左浮动
    
    right:向右浮动。
    
    none:不浮动。(默认)
    

    如果特定的某个标签你不希望他浮动。可以对其设置清除浮动:

    选择器{clear:属性值(left,right,both);}  
    

    浮动布局虽然灵活,但是却无法对元素进行精准定位。

    1.定位模式(position)

    语法格式:
    选择器{position:属性值;}
    

    position常见的属性值:

    static:静态定位(默认的定位方式)

    relative:相对定位,相对于原文档流的位置进行定位。

    absolute:绝对定位:相对于上一个已经定位的父元素进行定位。

    fixed:固定定位:相对于浏览器窗口进行定位。

    注意:定位模式仅仅用于定义元素以哪种方式进行定位,并不能确定元素的具体位置。
    还需要通过边偏移属性top,bottom,left或right来精确定位元素的位置。

    其偏移量是相对于父元素的。

    1.1静态定位static

    元素的默认定位方式。各个元素在在HTML文档流中默认的位置。如果没有定义position属性,或者定义为static,它会遵循默认显示为静态位置。静态定位状态下无法通过边偏移属性(top…)来改变元素的位置。

    1.2 相对定位relative

    相对于标准文档流中的位置进行定位。

    可以通过边偏移量来改变元素的位置,但是他在文档流中的位置仍然保留。

    1.3 绝对定位

    依据最近的已经定位的(绝对,固定或相对定位)的父元素进行定位。

    如果所有父元素都没有定位,则依据body根元素(浏览器窗口)进行定位。

    文档流中的位置释放。

    1.4 固定定位fixed

    它以浏览器窗口作为参照物来定义网页元素。
    他将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。

    不论浏览器窗口如何滚动,也不管浏览器窗口大小如何变化,该元素始终显示在浏览器窗口的固定位置。

    2.层叠属性z-index

    用于图层的上下关系,上面的图层会覆盖下面的图层。

    只对定位元素有效。

    其取值可为:正整数,0,负整数。默认属性值为0.

    关注公众号【轻松玩编程】回复关键字“电子书”,“计算机资源”,“Java从入门到进阶”,”JavaScript教程“,“算法”,“Python学习资源”,“人工智能”等即可获取学习资源。

    ”当坚强成为你唯一的选择,你才知道自己可以有多坚强。在你坚持不住的时候,记得告诉自己,再坚持一下。想一千次,不如去做一次。华丽的跌倒,胜过无谓的徘徊。“

    在这里插入图片描述

    以梦为马,不负韶华。
  • 相关阅读:
    009——数组(九) each list array_map array_walk array_walk_recursive
    008——数组(八)删除添加数组 得到数组键名键值
    laravel怎么获取到public路径
    laravel中composer镜像服务的方式
    logback的使用和logback.xml详解
    log4j-over-slf4j工作原理详解
    java
    【Log】logback指定配置文件(二)
    logback 中文手册
    logback logback.xml常用配置详解(三) <filter>
  • 原文地址:https://www.cnblogs.com/huangjiahuan1314520/p/13743533.html
Copyright © 2011-2022 走看看