HTML+CSS页面布局

前言

网页布局的目的

通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。

如何布局

（1）：确定“版心”

所谓“版心”是页面主体内容的所在位置，一般为居中。

（2）：分析模块

页面通常由五大块组成：头部（header）—导航(nav)—焦点图(banner)—内容(content)—版权(footer)

一、页面布局

1.确定网页的主体内容，在页面中水平居中显示

2.分析页面中的模块，思考各个模块的排版

3.控制页面中的各个模块到指定位置，完成页面布局

二、CSS的定位机制

  1.普通流方式：有元素在html文件中的位置决定(由标签在文件中的位置来决定)
        
   2.浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框
        
   3.绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)

三、浮动属性

1.浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置
2.浮动的实现：在元素的CSS中添加float属性
left:向左浮动

right：向右浮动

none：不浮动（默认设置）

浮动元素不占据空间

四、常见的浮动布局

1.一列固定宽度并自动居中：margin设置为auto

2.一列自适应宽度：相对于浏览器而言,盒子的宽度会随浏览器宽度的改变而改变

3.两列自动居中：采用盒子嵌套方式实现,让外层的盒子自动居中

五、清除浮动

浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响，可以使用clear属性消除浮动

在clear属性中设置

            left：清除左侧的浮动影响

            right：清除右侧的浮动影响

            both：清除左右两侧的浮动影响    

六、绝对定位与相对定位

 

 注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。

七、在页面布局中常用的CSS属性

 1.visibility：元素是否可见

  visible:元素可见（默认）

  hidden：不可见

2.display：元素的显示方式

block:块状显示

inline：显示在一行

none：不显示

hidden和none的区别

visibility: hidden; 隐藏元素后，保留元素所占有的物理空间
             
 display: none;隐藏元素后，不保留元素所占有的物理空间

八、CSS中的块级元素和行内元素

1.常见的块级元素(block)：占据了全部的宽度,在前后都有换行符

            <h1></h1>
            <p></p>
            <div></div>
            <ul></ul>
            <table></table>
            <form></form>

宽度(width)、高度(height)、内边距(padding)、外边距(margin) 都是可以控的

2.内联元素(inline)：只需要必要的宽度,不强制换行

 

 <span></span>
  <a></a>

  宽度(width)、高度(height)
           
  内边距(padding-top、padding-bottom)
           
  外边距(margin-top、margin-botom)
           
  都是不能改变的

块元素：无论内容是什么都会独占一行，主要用于页面布局

行内元素：只占用自身的大小，不会占用一行。

附录（补充内容）

溢出属性

语义标签 

命名规范 

参考链接：https://blog.csdn.net/qq_48315043/article/details/120762281