CSS——页面布局

01 盒子

1.网页布局

网页布局的过程：

1. 准备网页元素
2. 摆盒子样式
3. 装内容

2.盒子模型

组成：

自外而内：

• margin （盒子之间的距离）
• border（边框）
  • 粗细：border-width(以px为单位)
  • 样式:border-style（solid实线边框 dashed虚线边框 dotted点线边框 ····越炫酷的兼容性越不大好)
  • 颜色:border-color
  • 简写：不要求顺序
  • 合并相邻的边框：border-collapse:collapse
  • 盒子的border会影响大小=border左右+实际大小i
• padding（内边距：边框和内容间的距离
• content内容

注意

width = css( content ）

进阶

盒子模型的结构是一定的，但其有不同的模式，可以通过属性box-sizing设置

默认情况下：

• 为标准模式 ，又称标准盒模型
• width = css( content ）
• 设置（box-sizing:content-box)

怪异模式下

• 又称IE盒模型
• 设置（box-sizing:border-box)
• width = css( content + padding-left +padding-right + border-left + border-righ）
  

水平居中的实现

• 块元素

  • 指定宽度，且margin:0 auto

  • div{
    	width:500px;
    	margin:0 auto;
    }
    

• 行内块、行内元素

  • 给其父亲： div{ text-align：center }

  • 为什么不利用margin：行内元素指定宽度无效

垂直异常的解决

• 相邻外边距，垂直合并（水平不会出现）

  • 情景复现：上面盒子有margin-bottom，下面的有margin-top，最终盒子的距离=max(上margin-bottom，下margin-top)
  • 解决方案：只给一个盒子margin

• 嵌套块元素塌陷

  • 情景复现：两个嵌套关系的块元素，都有margin-top，父元素的margin-top取较大值，孩子与父元素相对关系不变

  • 解决方案：

    • 方案一：给父元素定义上边框 .father{ border:1px solid transparent; }

    • 方案二：给父元素内边距，不给子元素margin-top

    • 方案三：给父元素：overflow：hidden元素 不会带来额外的大小

清除内外边距

必须清除，不同浏览器不同元素的默认内外边距不同

*{

​	margin: 0;

​	padding: 0;

}

好看的盒子：

（CSS3属性，但不支持css3时使用这些属性不会带来“灾难”）

圆角边框：

• border-radius:数值或百分比；
  属性值可写4个——依次从左上开始顺时针指定四角弧度，也可简写为2个——此对角线同
• 可分开写：

border-top-left-radius:

盒子阴影：

box-shadow:水平轴移动，垂直轴移动，blur影子的模糊程度，spread影子大小（默认outset且不可专门设置outset）;

文字阴影：

text-shadow:水平轴移动，垂直轴移动，blur影子的模糊程度，spread影子大小（默认outset且不可专门设置outset）;

3.总结

标准流擅长盒子的垂直摆放

浮动擅长 1.多个块级盒子的水平布局 2.文字环绕

定位擅长 1.叠压 2.元素任意位置摆放

02 网页布局

1.标准流（普通流/普通流）

默认方式排列

2.浮动

为什么：

• 某些布局：标准流很难实现、不能实现
• 网页布局第一标准：竖着排列找标准流，浮动管横着排列的

什么是？

用于创建浮动框，使其移动，直到碰到左边缘、右边缘、另一个浮动边缘（之后浮动的浮动框会和前面的对齐）

float: none/left/right;

！特性

• 只压住盒子。不压住文字
• 会脱离标准流------》移动到指定位置（脱标）
  • 不再保留原来位置
  • 会一行内显示
  • 浮动的盒子“浮动后”，留下的位置会使余下的按标准流重新排列
• 多个盒子都这只浮动，按float值显示并顶端对齐排列，父级宽度装不下的另起一行
• float的元素会具有行内块特性======》
  • 可以直接给宽和高
  • 没有指定宽，所占位置大小默认由内容撑开
  • 浮动的元素间是没有缝隙的

实用搭配

先用标准的父元素排列上下位置，再浮动搞定块级盒子的

两个注意点

标准流的父元素排列上下位置

一个父元素里，只要有一个浮动了，其他都要浮动，容易出现异常（预期外的重叠）========》浮动的盒子只影响后面的标准流

清除浮动

为什么：
1.实际上，父元素里的元素全都浮动，脱离标准流，此时父元素高度为0
2.理想情况应该由子盒子撑开==》但父盒子中可能子盒子不确定，所以，高度应该是不确定的

本质：清除浮动造成的影响=》使得父级根据子盒子自动检测高度=》父级有了高度，就不会影响下面的标准流（父盒子有高度则无需清除浮动）

使用：clear:left\right\both;清除左、右、所有浮动

方法：

• 方案一：额外标签法（隔墙法）

在父盒子中浮动元素末尾添加一个空标签
 .clear{
 	clear:both;
 }
 
 
 <div class="father">
 	<>
 	<>
 	<div class="clear">
 </div>

* 优点：简单易行
* 缺点：增加无关类
* 新增盒子要求必须是块元素

• 父级添加overflow，属性设置为：hidden、scroll、auto

  • 优点：代码简洁
  • 缺点：会隐藏溢出内容

• 父级添加after伪元素

  .father：after{
  	content:"";
  	display:block;
  	height:0;
  	clear:both;
  	visibility:hidden;
  }
  
  .father{
  	*zomm:1;
  }/*兼容IE4\IE7*/
  

  • 优点：结构清晰，没有增加标签

  • 缺点：照顾低版本浏览器

• 父级添加双伪元素

  .clearfix:before,
   .clearfix:after{
  	content:"";
  	display:table;
  }
  .clearfix:after {
  	clear:both
  }
  .clearfix{
  	*zomm:1;
  }
  

  • 优点:代码更简洁

  • 缺点：照顾低版本浏览器

3.定位

为什么：

（自由移动或始终固定）且能压住其他

对比：浮动可以使得多个块级盒子一行且没有缝隙

组成：

• 定位模式+边偏移

• 边偏移——定位到的盒子最终在的距离

  • top,距离xxx的上
  • bottom,距离xxx的下
  • left,距离xxx的左
  • right,距离xxx的右

• 定位模式——定位方式

  • position属性

    • fixed

      • 始终在浏览器可视窗口

      • 与父元素无任何关系

      • 边偏距相对于可视窗口

      • 原位置被侵占

      • ！贴在版心右侧：

        left：50%;
        margin：版心宽度的一半；
        

    • ！absolute：

      • 相对于祖先元素来说

      • 没有祖先元素、祖先元素没定位： 边偏距相对于浏览器文档

      • 给父亲+相对定位

        position:relative
        

      • 不再占有原位置

    • ！relative：移动元素位置时，是相对原来的位置（自恋型）;走了但原位置保留不被侵占（不脱标）

    • static：按标准流摆放，无边偏移，很少使用

    • sticky：粘性定位。

      • 以可视窗口为基准
      • 必须添加top、left、right、left
      • IE不支持
      • 效果：原本符合快要脱离可视窗时，相对可视窗位于边偏移位置。

• 子绝父相

  • 子元素绝对定位，父元素应相对定位
  • 子级绝对定位，不会占有位置，可以放到父盒子任意位置，兄弟们可不考虑他。

• 定位叠放次序 z-index

  • 数值为整数，不能+单位
  • 大的在上
  • 如果属性值相同：后来者居上
  • 只有定位的盒子有该属性

• 绝对定位的盒子 居中

  • 不能通过 margin:0 auto实现

<!--水平居中-->
left:50%;
margin-left:-盒子大小的一半
<!--垂直居中同理-->

• 定位特殊性

  • 绝对定位、固定定位同float
    • 行内元素可设置高宽
    • 块默认高宽为内容大小

03 分析

1. 版心宽度
2. 分析页面中的行模块，每个行中的列模块==》即为“页面布局第一准则”
3. 一行中的列模块，经常浮动布局，
   1. 确定每列大小
   2. 列的位置
4. 现有结构，后有样式

先理清布局结构，再写代码

04 注意（小技巧）：

• 行内元素尽量只设置左右内外边距，不要设置上下内外边距。

• css第一行永远是清除内外边距

• 水平均中的实现要区分为：1.块级 2.其他

• 垂直异常的解决注意区分：相邻带来合并和嵌套带来塌陷

• 整齐的嵌套：大盒子里小盒子，盒子之间可分割==》

• 盒子padding要注意，宽高指定会撑开；盒子margin要利用，盒子再多能列齐

• 善用比例，避免修改麻烦。

• 产品标题用h

• 大量文字用p

• 请名字方便后期维护

• 利用层叠样式时注意权重

• 导航栏不会直接用a，而是li+a==》链接放在li里===》避免关键字堆砌引起搜索引擎降权

• li前点点的去除：

  list-style:none;
  

• 标准流（普通流/普通流）：默认方式排列

• 最内层的盒子，先填充内容，再考虑盒子构成，最后修饰

  • float:只压住盒子。不压住文字==========》浮动最初的意义：文字环绕
  • 绝对定位、固定定位会。

• 为防止盒子被撑大，一定要约束图片大小

• 最内层的盒子，先填充内容，再考虑盒子构成，最后修饰

• 文字环绕

  • float:只压住盒子。不压住文字==========》浮动最初的意义：文字环绕
  • 绝对定位、固定定位盒子、文字全压住。

max-width

总结

以上就是本文内容，完成了网页布局的介绍。

---

如有错漏，敬请指正。