DIV+CSS布局
浮动应用
制作导航栏
-
设置文本或者内容 在一个盒子中间位置的两种方式：
- 给盒子一个上下相同，左右相同的内边距 使内容在盒子的中间。这种方式适用盒子大小不固定的场景。
- 当盒子有固定的尺寸时，水平方向设置
text-align:center使内容居中。垂直方向使得行高=盒子高度以达到文本或内容居中的效果。
页面的布局
经典布局
- 最外面的是版心容器：
- 页面布局首先需要设置版心（版面的中心区域）的大小，一般是"1000px居中" 。
- 垂直的上中下的布局：
头部中间- 中间区域 分为侧边栏和内容区
侧边栏右边内容圣杯布局
圣杯布局是最早出现在国外网站上的一个说法。在西方，圣杯是表达“渴求之物”的意思；它是一种两栏或者三栏的布局方式，其中核心点是 主体内容区宽度可变，也就是自适应页面大小。
两栏布局
-
方案一：
设置父容器为一个固定宽度，让左右盒子都浮动，右边盒子的大小为计算值
-
方案一：
- 设置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。
原文：https://www.cnblogs.com/xiaoyixiang/p/14902194.html