【CSS】DIV+CSS进行布局、命名规范_网页布局div命名-CSDN博客

本文链接：https://blog.csdn.net/qq_46658751/article/details/116134605

本文详细介绍了CSS布局，包括流式布局、浮动布局和定位布局的原理与实践，以及HTML语义标签和网页模块的命名规范。内容涵盖布局目的、布局属性如浮动和定位，以及各种布局类型的实例。

摘要由CSDN通过智能技术生成

1. DIV+CSS进行布局

将各部分模块有序排列，使网页的排版变得丰富、美观。
在这里插入图片描述

确定“版心”：页面主题内容所在的位置，通常在浏览器窗口中水平居中。
分析页面中的模块：最简单的页面布局，主要由头部（header）、导航（nav）、焦点图（banner）、内容（content）、页面底部（footer）五部分组成。
控制页面中的模块：通过盒子模型，使用div+css进行模块控制

按照元素的类型和在HTML源文件中出现的顺序进行定位

当元素浮动时，它将不再处于普通文档流中，相当于附在文档之上，不占据空间，但是会缩进行框,产生文字环绕的效果

绝对定位(position:absolute)：通过页面坐标（页面左上角）的方式来定位元素。使用绝对定位后元素不会占用普通流空间
相对定位(position:relative)：如果一个元素进行相对定位，它将以它所在的位置（即它在普通流中的位置）为初始位置，然后可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动

选择器{float: 属性值;}

选择器{clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响)

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

在CSS中，通过CSS定位（CSS position）可以实现网页元素的精确定位。
元素的定位属性主要包括定位模式和边偏移两部分。
定位模式：
选择器{position: 属性值;}

属性值	描述
static	自动定位（默认定位方式）、无法通过边偏移属性（top、bottom、left或right）来改变元素的位置
relative	相对定位、相对于其原文档流的位置进行定位,普通文档流中的位置保存
absolute	绝对定位、相对于其上一个已经定位的父元素进行定位,已经脱离普通文档流，在普通文档流中的位置不保存
fixed	固定定位、相对于浏览器窗口进行定位绝对定位的一种特殊形式、已经脱离普通文档流

相对定位：将元素相对于它在标准文档流中的位置进行定位
绝对定位：将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。

边偏移：
通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比

选择器{overflow: 属性值;}