DIV+CSS

浮动应用

制作导航栏

• 设置文本或者内容 在一个盒子中间位置的两种方式：

  • 给盒子一个上下相同，左右相同的内边距 使内容在盒子的中间。这种方式适用盒子大小不固定的场景。
  • 当盒子有固定的尺寸时，水平方向设置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>

圣杯布局

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

两栏布局

• 方案一：

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

• 方案一：

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

三栏布局

• 方案一：

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

• 方案二：

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

定位属性

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

• 标准模式：普通文档流

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

• 浮动模式：浮动层的元素

  浮动模式就是使用float属性使其往左边或右边进行浮动而表现出来的位置。这被称为脱标流。

• 定位模式：定位元素 可以在普通文档流中 也可以是定位层

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

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

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

1. 在（x,y）平面上所处位置。
2. 在高度（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

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

解决的方法就是：

1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。

2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。

3. 设置父盒子的font-size:0。