DIV+CSS布局

2021-09-11 05:10:53

浮动应用

制作导航栏

设置文本或者内容在一个盒子中间位置的两种方式：
- 给盒子一个上下相同，左右相同的内边距使内容在盒子的中间。这种方式适用盒子大小不固定的场景。
- 当盒子有固定的尺寸时，水平方向设置text-align:center使内容居中。垂直方向使得行高=盒子高度 以达到文本或内容居中的效果。

页面的布局

经典布局

最外面的是版心容器：<div class="main"></main>
- 页面布局首先需要设置版心（版面的中心区域）的大小，一般是"1000px居中" 。
垂直的上中下的布局：

<div class="main">
    <div class="header">
        头部
    </div>
    <div class="center">
        中间
    </div>
    <div class="footer">
        底部
    </div>
</div>

中间区域分为侧边栏和内容区

<div class="center">
    <div class="left">
        侧边栏
    </div>
    <div class="right">
        右边内容
    </div>
</div>

圣杯布局

圣杯布局是最早出现在国外网站上的一个说法。在西方，圣杯是表达“渴求之物”的意思；它是一种两栏或者三栏的布局方式，其中核心点是主体内容区宽度可变，也就是自适应页面大小。

两栏布局

方案一：

设置父容器为一个固定宽度，让左右盒子都浮动，右边盒子的大小为计算值
方案一：

设置HTML结构：父容器中包含左边和右边区域
CSS初始化盒子总大小为一个或者`min-width值以自适应页面的宽度
设置左边区域和右边区域的大小，添加可视背景
设置左边区域左浮动，右边区域外边距为（盒子宽度+间距）
清除父容器的浮动

三栏布局

方案一：

设置HTML结构，显示左边盒子，然后右边盒子最后中间盒子
初始化整个容器自适应宽度，三栏垂直分布分别设置它们的大小以及可视背景
让左边区域左浮动，右边区域右浮动中间区域设置左右边距为（盒子宽度+间距）
清除父容器的浮动

方案二：

设置HTML结构，出现顺序依次是中间内容区，然后是左边区域，再是右边区域
CSS初始化让整个容器自适应宽度，三栏垂直分布。分别设置中间区域、左右两边的大小和可视背景。中间区域宽度100%比较合适，但不能小于(父盒子宽度 - 左右盒子)
三栏同时左浮动，设置左边区域外边距为-中间区域宽度%，右边区域的外边距为-盒子宽度，清除父盒子浮动
给中间区域嵌套子盒子，设置其外边距为（左右盒子宽度+间距）

定位属性

网页中的一个元素（盒子），其在网页上的位置，有如下三种方式来确定：

标准模式：普通文档流

标准模式就是元素没有进行浮动也没有进行明确定位时的“默认模式”，这也被称为标准流。
浮动模式：浮动层的元素

浮动模式就是使用float属性使其往左边或右边进行浮动而表现出来的位置。这被称为脱标流。
定位模式：定位元素可以在普通文档流中也可以是定位层

就是使用明确的“位置设定”信息来让一个盒子定位到指定的位置。

定位模式中，有的是标准流的，有的是脱标流的。

定位设定可以确定一个盒子在下述两个方面的位置：

在（x,y）平面上所处位置。
在高度（z轴）方向的位置（层次）。

在css中使用position属性设置元素的定位方式：

static：默认静态非定位的元素
absolute：绝对定位，相对于父元素设置坐标，前提是该父元素拥有定位属性，如果没有定位依次向上查找直到body。absolute绝对定位或脱离普通文档流，后续元素可以补充它的位置

relative：相对定位，它是相对于自己原先在网页中的位置来设置坐标。并且它定位之后会保留原先的位置
fixed：固定位置，是相对浏览器窗口来设置坐标，它也脱离文档流，一般使用fixed来实现吸顶效果。

零碎和补遗

pre：格式化输出标签，它能让以代码编辑的格式在页面中显示。
cursor：设置鼠标在某个盒子上的时候的光标形状。
box-shadow：设置盒子的阴影效果
text-shadow：设置文本的阴影效果
border-radius：设置圆角边框
text-overflow：当一行的文字在一行中放不下，但又不适宜（不允许）换行时（通常是标题性质的文字）。
- 该属性的设置有三个前提：
- 1）盒子的overflow为非visible，通常为hidden；
  
  2）盒子的width为非auto，通常是设定为固定宽度；
  
  3）文字的换行特性white-space为不允许换行（nowrap）；
box-sizing：设置盒子内容区的大小。默认的盒子模型中，width和height设置的是内容区的大小。也可以通过该属性设置width和height所包含的区域：
- content-box：默认值，width和height只是内容区大小
- border-box：width和height是包括了边框+内边距+内容的总的大小，实际的内容区域只有width/height-边距-边框的大小
vertical-align：垂直方向对齐

vertical-align 这个看上去很美好的一个属性，实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块级元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

vertial-align有一个特别的应用是用来去除3px bug

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

给img vertical-align:middle | top等等。让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了。
设置父盒子的font-size:0。