Web前端新手入门系列：2、CSS
3、CSS概述
3.1 CSS介绍
层叠样式表(CSS),又称串样式列表，由W3C定义和维护的标砖，一种用来为结构化文档(如HTML文档或XML应用)、添加样式(字体、间距和颜色等)的计算机语言。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
html只负责结构，样式交给css来实现。这样以来开发者工作量和效率大大提升，页面也变得更加容易维护，想要修改某个字体或者样式，直接在css文件中修改，不需要修改html结构。
3.1.1 CSS的基本语法
selector { property:value }
- selector选择器通常是需要改变样式的HTML元素
- 每条声明由一个属性(property)和一个属性值(value)组成
- 属性(property)是希望设置的样式属性(style attribute)。每个属性有一个属性值(value)。
- 属性与属性值被冒号分开
3.1.2 CSS的四种引用方式
- 行间样式:应用内嵌样式到各个网页元素
- 内部样式表：在网页上创建嵌入的样式表
- 链入外部样式：将网页链接到外部样式表
- 导入外部样式:css通过@import引入其它的css文件
<div style="color:olive;width:100px:border:1px solid blue; ">行间样式div>
<head>
<style>
p{
background-color:#eeeee;
font-size:18px;
font-style:italic;
}//之后所有的p标签的样式都是这样
style>
head>
<head>
<link rel="stylesheet" href="style.css"/>
//引入外部样式文件，先写一个css文件，写法与内部样式一样样，直接花括号写就行了,类名前要加.
head>
<head>
<style>
@import "css/test.css";
style>
head>
行间样式作用于当前标签；内部样式作用于当前文件；外部样式可以被多个HTML文件引用。最多使用的是外部样式，分为link引入和import引入两种方式，更多使用link，性能由于import。
link和import的区别：
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务，@import属于CSS范畴，只能加载CSS
- link引用CSS时，在页面载入同时加载；@import需要页面网页完全载入以后加载
- link时XHTML标签，无兼容问题;@import实在CSS2.1提出的，低版本的浏览器不支持
- link支持使用Javascript控制DOM取改变样式；而@import不支持
3.1.3 CSS选择器
- 1）**：匹配html中所有元素(*性能非常差)
- 2）标签选择器:用来匹配对应标签
- 3）类选择器：用来选择class命名的标签
- 4）id选择器：用来选择用id命名的标签
- 5）派出选择器：根据上下文来确定选择的标签
<style>
/*1.*选择器*/
*{
color:red;
}
/*2.标签选择器*/
span{
display:block; //转换为块元素
margin-right: 20px;
border:1px solid gray;
}//只作用在span标签上
/*3.类选择器，前面加.*/
.wrapper{
color:aqua;
}
/*4.id选择器,前面加#*/
#content {
color:pink;
}
/*5.派生选择器*/
.box2 li{//选择box2类下的li标签
color: chartreuse
}
/*6.伪类选择器*/
style>
<body>
<ul class="box1">
<li>li001li>
<li>li002li>
<li>li003li>
ul>
<ul class="box2">
<li>li001li>
<li>li002li>
<li>li003
<ul>
<li>subli1li>
<li>subli2li>
ul>
li>
ul>
body>
3.1.4 选择器分组
多个标签使用同一个样式，则需要对这些选择器进行分组，这样同一组的选择器就可以有相同的声明。让多个选择器(元素)具有相同的样式，一般是公共样式
<style type="text/css">
h1,.box, p{
color:red;
}
p{
width:100px;
background-color:#999999
color:blue;//写在后面，则会把p标签原来的红色给覆盖掉
}
style>
3.1.5 选择器的继承
子元素可以继承父元素的样式，反之不可以。
<style>
.test{
font-size:18px;
}
.test span{//继承了test的所有样式
font-weight:bold;//加粗
font-size:12px;//可以改写父元素的样式
}
style>
<body>
<div class="text">
这是一段<span>测试span>。
div>
body>
3.1.6 优先级
多重优先：(外部样式)<（内部样式）<（内联样式）
优先权级：
把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
- !important,加在样式属性值后，权重值为10000
- 内联样式，如：style=“”，权重值为1000
- ID选择器，如：#content，权重值为100
- 类、伪类，如：.content、:hover 权重值为10
- 标签选择器，如：div、p 权重值为1
<style>
p{
color:blue!important;/*加上!importan优先级最高，为蓝色*/
}
#content div.main_content h2{
color:red;/*权重为100+1+10+1=112*/
}
#content .main_content h2{
color:blue;/*权重 为100+10+1=111*/
}
style>
<body>
<p style="color:red;">这是内容1p>
<div id="content">
<div class="main_content">
<h2>标题h2>
div>
div>
body>
3.2 CSS字体
-
font-size：字号
- {number+px} 固定值尺寸像素
- {number+%} 百分比取值是基于父对象中字体的尺寸大小
p { font-size:20px;} p { font-size:100%;} -
font-family：字体
属性值：name，字体名称，以优先顺序排列，以逗号隔开。如果字体名称包含空格，则应该使用双引号
p {font-family：Courier, "Courier New", monospace;}/*如果不支持第一种，则使用第二种，依次递推*/ -
font-style：文字样式
属性值：
- normal：默认值。正常字体
- italic：斜体。对于没有斜体变量的字体，将应用oblique
- oblique：倾斜的字体
p{font-style:}; -
font-weight：文字加粗
属性值：
- normal：默认值，正常的字体
- bold：粗体
- bolder：比bolde粗
- lighter：比normal细
- {100-900}：定义由细到粗的字符。400等于normal，700等同于bold
p {font-weight: normal;} p {font-weight: bold;} p {font-weight: 600;}/*一般使用100的倍数*/ -
line-height：行高（下一行底端距上一行底端的距离）
属性值：
- normal：默认值，默认行高
- {number+px}：指定行高为长度像素
- {number} 指定行高为字体大小的倍数
p{ line-height:normal;} p{ line-height:24px;} p{ line-height:1.5;} -
color：文字的颜色
属性值：
- name：颜色名称只当颜色
- rgb：指定颜色为RGB值
- {颜色16进制}：指定颜色为16进制
p{ color:red;} p{ color:rgb(100,14,200);} p{ color:#345678;} -
text-decoration：文字的修饰
属性值：
- normal：默认值，五修饰。
- underline：下划线。
- line-through：贯穿线
- overline：上划线
p{ text-decoration:underline;} p{ text-decoration:line-through;} p{ text-decoration:overline;} -
text-align：文本对齐方式
属性值：
- left：默认左对齐
- center：居中
- right：右对齐
-
text-transform：字母大小写
属性值：
- node：默认值，无转换
- capitalize：单词首字母大写
- uppercase：大写
- lowecase：小写
-
text-indent：文本缩进
属性值：
- {number+px}：首行缩进number像素
- {number+em}：首行缩进number字符
font复合属性：
font：font-style font-variant font-weight font-size/line-hegiht font-family
-
注意属性值的顺序位置
-
除了font-size和font-family之外，其他任何一个属性值都可以省略
-
font-variant:normal/small-caps（让大写字母小一些）
-
不需要设置的就去掉就好，但顺序不能变换
<style> strong{ font:italic small-caps bolder 18px/1.5 宋体; } style>
3.3 CSS背景
-
background-color 背景色
属性值：
- transparent：默认值（背景色透明）
- {color}：指定颜色
-
background-image 背景图像
属性值
- none：默认值，无背景
- url({url}):使用绝对或相对url地址指定背景图像。
-
background-repeat 设置对象的背景图像铺排方式
- repeat：默认值（背景图像在纵向和横向平铺）
- no-repeat：背景图像不平铺
- repeat-x：背景图像仅在横向平铺
- repeat-y：背景图像尽在纵向平铺
-
background-position 设置对象的背景图像位置
{x-number | top | center | bottom} {y-number | left | center | right}:控制背景图片在元素的位置：x轴、y轴。其铺排方式为 no-repeat
<style> div{ background-image: url('../images/pic.png'); background-repeat: no-repeat; background-position: 50px 50px; } style> -
background-attachment 设置对象的背景图像滚动位置
- scroll：默认值。背景图像会随着页面其余部分的滚动而移动
- fixed：当页面的其余部分滚动时，背景图像不会移动
-
background：设置背景的复合写法
语法：
background：color image repeat attachment position
示例：
<style>body{background:#fff url() no-repeat fixed center center}style>
3.4 CSS伪类选择器
伪类：专门用来表示元素的一种特殊状态。
常用伪类选择器：
-
a标签的伪类：
:link/:visited/:hover/:active
-
:focus:获得焦点时触发样式
-
:first-child/:last-child/:nth-child(number)
<style>
a:link{
color:red;
}/*初始为红色*/
a:visited{
color:green;
}/*访问过变为绿色*/
a:hover{
color:yellow;
}/*鼠标经过时变为黄色*/
a:active{
color:blue;
}/*激活后变为蓝色*/
input:focus{
outline:1px solid #421524
}/*获得文本框焦点后，会出现一个带#421524颜色的边框*/
ul li:first-child{
color:#ff1299
}/*只有第一个有颜色*/
ul li:last-child{
color:#c8ff24
}/*最后一个*/
ul li:nth-child(2){
color:#2c3cff
}/*第二个*/
style>
<body>
<a href="#">单击跳转a>
<input type ="text">
<ul>
<li>aaaali>
<li>aaaali>
<li>aaaali>
<li>aaaali>
ul>
body>
3.5 属性选择器
- [属性名]：包含有指定属性名的元素
- [属性名=值]：属性名的值为指定元素
- [属性名~=值]：属性名的值包含指定值的元素
- [属性名^=值]：属性名的值以指定值为开头的元素
- [属性名$=值]：属性名的值一指定值为结尾的元素
<style>
div.content[title]{
font-weight:bold;
}/*选择div中类别为content且含有title属性的*/
input[name=user]{
background-color:#999999
}/*选择input标签中name属性值为user的*/
div[class~=box1]{
background-color:#5aff29
}/*选择class中含有box1的*/
style>
<body>
<div class="content box1 box2" title="内容">content1div>
<div class="content box2">content2div>
<form action="">
<input type="text" name="account">
<input type="text" name="user">
form>
body>
3.6 关系选择器
- 空格 ：后代选择器（所有的后代）
- 大于符号>：只选择儿子元素
- +：选择兄弟
<style>
h1 strong{
color:#fff;
background-color:#000;
}/*对h1中的所有strong都有效*/
h1>strong{
color:#123;
background-color:#edc;
}/*第一个strong有效*/
ul li+li+li{
list-style-type:none;
color:red;
}/*有连续三个li才有效*/
style>
<body>
<h1>
<strong>关系1strong><span><strong>关系2strong>span>
h1>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
<li>li4li>
<li>li5li>
ul>
body>
3.7 CSS 伪元素
伪元素用于向某些选择器设置特殊效果
-
:first-letter 向文本的第一个字母添加特殊样式。
<p>hello first-letterp> <style> p:first-letter{color:red;font-size:30px} style> -
first-line 向文本的首行添加特殊样式
<p> hello first-linep> <style> p:first-line{color:red;font-size:30px} style> -
:before 在元素之前添加内容
<p>hello beforep> <style> p:before{content:'before content'} style> -
:after 在元素之后添加内容
<p>hello afterp> <style> p:after{ content:'after content'} style>
CSS伪元素和伪类的区别：
- css引入伪类和伪元素概念时为了格式化文档树意外的信息，即用来修饰不在文档树中的部分
- 伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态时根据用户行为而动态变化的，它只有处于dom数无法描述的状态下才能为元素添加样式，所以将其称为伪类。
- 伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过：before来在一个元素前增加一些文本。
伪元素和伪类的特点：
- 伪元素和伪类都不会出现在源文档或者文档树中
- 伪类允许出现在选择器的任何文职，而一个伪元素只能跟在选择器的最后一个简单选择器后面
- 伪元素名和类名都是大小写不敏感的
- 有些伪类时互斥的，而其他的可以同时用在一个元素上。(在规则冲突的情况下，常规层叠顺序决定结果)
:before/:after/:first-letter/:first-line 前面可以是1个冒号也可以是双冒号。
::selection/::placeholder/::backdrop 前面只能是双冒号
补充：
- margin：为给定元素设置四个方向的外边距属性
margin:1em；
margin:-3px;/*应用于所有边*/
margin:5% auto;/*上下|左右*/
margin: 1em auto 2em;/*上|左右|下*/
margin: 2px 1em 0 auto;/*上 右 下 左*/
- padding：控制元素所有四条边的内边距
padding:1em;/*应用于所有边*/
padding:5% 10%; /*上下|左右*/
padding:1em 2em 2em; /*上|左右|下*/
padding:5px 1em 0 2em;/*上 右 下 左*/
4、CSS浮动布局及盒模型
4.1 CSS浮动介绍
float属性定义元素在那个方向浮动，CSS中任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身时何种元素。如果浮动非替换元素，则要指定一个明确的宽度，否则，它们会尽可能窄。
浮动让块级标签不独占一行。目的：把块级标签元素可以排在一行上。原理是让元素脱离文档流，不占用标准流。
float的属性值：
| 值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值。元素不浮动，并会显示其在文本中出现的位置 |
| inherit | 规定应该从父元素继承float属性的值 |
<head>
<style>
.wrapper{
width:600px;
margin:0 auto;
border: 1px solid #666;
}
.box1 .box2{
width:200px;
height:150px;
}
.box1{
background-color:#ff0000;
float:left;/*浮动后与box2排一行了，但wrapper没有高度了*/
}
.box2{
background-color:#217aff;
float:left;
}
style>
head>
<body>
<div class="wrapper">
<div class="box1">box1div>
<div class="box2">box2div>
div>
body>
4.2 清除浮动
浮动后，后面的元素不管是块级还是行级元素，不会显示下一行，这时需要清除浮动，让后面的元素自动进入下一行。
方法：
-
添加空标签，并设置样式：
- clear :left; 清除左浮动
- clear :right; 清除右浮动
- clear :both; 清除左右浮动
- clear :none; 左右浮动都不清除
<style> .clear{ clear:both; } style> <div class="wrapper"> <div class="box1">box1div> <div class="box2">box2div> <div class="clear">div> <div class="box3">box3div> div> -
在要清除浮动的父级添加样式：overflow:hidden;
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，可在浮动元素的父级添加样式：overflow:hidden。
属性值：
- visible：默认值。内容不会被修剪，会呈现在元素框之外，不剪切页不添加滚动条。
- auto：不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动
- hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能
- scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
<style> .wrapper{ width:600px; margin:0 auto; border: 1px solid #666; overflow:hidden; } style> <div class="wrapper"> <div class="box1">box1div> <div class="box2">box2div> div> <div class="box3">box3div> -
使用:after
为了减少空标签的多余，可采用父级的伪元素进行样式清除浮动。
<style> .wrapper{ width:600px; margin:0 auto; border: 1px solid #666; overflow:hidden; } .wrapper:after{ content:""; display:block; clear:both } style> <div class="wrapper"> <div class="box1">box1div> <div class="box2">box2div> div> <div class="box3">box3div>
4.3 CSS盒子元素
CSS盒子模型：规定了元素框处理元素内容(content)、内边距(padding)、边框(border)和外边距(margin)的方式
每个元素都是一个盒子，一个盒子的组成如上图所示。区别外边距和内边距是以边框（border）为参照，系统默认外边距为8px。
4.3.1 margin
外边距(margin)：指元素边框线之外的距离
- margin-left:左边距
- margin-right:右边距
- margin-top:上边距
- margin-bottom:下边距
margin：可用来设置任意一个边的边距，可以带1至4个参数。
- 1个(apx)：表示上下左右都有这样的外边距apx
- 2个(apx bpx)：表示上下外边距为apx，左右外边距为bpx
- 3个(apx bpx cpx)：表示上外边距为apx，下外边距为cpx，左右外边距为bpx
- 4个(apx bpx cpx dpx)：上为apx，右为bpx，下为cpx，左为dpx（顺时针）
4.3.2 padding
内边距(padding) ：元素的文本内容与边框之间的距离，属性与margin一样。
<head>
<style>
div{
width:800px;
height:400px;
border:1px solid red;
margin:20px;
padding:10px;
}/*一个盒子*/
.span{
/*display:block;/*将span由行级标签转为块级标签*/
width:300px;
height:200px;
background-color:#f00;
margin-right:20px;/*与右边块保持20px的距离*/
display:inline-block;/*按行的块*/
padding:20px;/*文本框上下左右与边框的距离为20px*/
border:1px solid #005fbd;
}
.content{
width:100px;
height:200px;
background-color:#46ffb1;
}
.txt{
width:100px;
height:100px;
background-color:#ff9a45
}
style>
<body>
<div class="box">
<div clss="span">
<p class="txt">
p>
div>
<div class="content">div>
div>
body>
head>
4.3.3 border
边框(border)：就是围绕元素内容和内边距的一条或多条线，设置边框的最简单的方法就是使用border属性，允许规定元素边框的样式、宽度和颜色
属性：
- border-width：设置边框的宽度
- border-style：设置边框的样式
- none：默认值，无边框
- solid：定义实线边框
- double：定义双实线边框
- dotted：定义点状线边框
- dashed：定义虚线边框
- border-color：设置边框颜色
border边框的简写：
{width style color}：定义宽度为width，样式为style，颜色为color的边框
示例：
.wrapper{ border:1px solid red;}
盒子的真实尺寸
盒子宽度=width+padding+border左右
盒子高度=height+padding上下+border上下
4.3.4 display
用来设置元素如何显示。
属性值：
- none：不显示元素,动态的选择是否显示。
- block：块显示，在元素前后设置换行符（能设置width和height）
- inline：行内显示，将块级转换为行级标签（删除换行符），内联元素所占据的空间就是他的标签所定义的大小（不能设置width和height）
- inline-block：设置元素为行内块级标签，所有的块级元素开始于新的一行，延展到容器的宽度（能设置width和height）,块之间大概有5px的空格，可设置当前块的margin-right为-5px进行对齐或下一块的left。
<head>
<style>
div{
width:200px;
height:100px;
background-color:#f00;
display:inline-block;/*与*/
}
div:first-child{
background-color:#38ffd1;
margin-right:-5px;
}
span{
width:300px;
height:200px;
background-color:#ffe351;
display:inline-block;
margin-left:-5px;
}
style>
<body>
<div>div1div>
<div>div2div>
<span>spanspan>
body>
head>
4.4 CSS table样式
table主要用来格式化数据
table属性：
- width：宽度
- height：高度
- border-collapse：collapse；单线边框
- border：边框线
- align：对齐
td，tr属性：
- width：宽度
- height：高度
- border：边框线
- text-align：文本左右对齐（left/center/right）、
- vertical-align：文本垂直对齐（top/middle/bottom）
<style>
table,td{
border: 1px solid #666;
}
table{
border-collaspse:collapse;
align:center;/*表格居中*/
margin:0 auto;
width:500px;/*等分单元格宽度*/
height:300px;
text-align:center;/*文本居中*/、
}
td{
vertical-align:bottom/*靠下，设置在table里没用*/
}
style>
<body>
<table>
<tr>
<td>{具体内容1}td>
<td>{具体内容2}td>
<td>{具体内容3}td>
<td>{具体内容4}td>
tr>
<tr>
<td>{具体内容1}td>
<td>{具体内容2}td>
<td>{具体内容3}td>
<td>{具体内容4}td>
tr>
<tr>
<td>{具体内容1}td>
<td>{具体内容2}td>
<td>{具体内容3}td>
<td>{具体内容4}td>
tr>
table>
body>
4.5 CSS 列表样式
不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列表等
1）列表类型：
无序（ul）、有序(ol)和自定义列表(dl)。
ul和ol的列表项都是用li表示的，而dl是由一个dt和一个或多个dd组成的。dl一般用来设定一个定义，比如名词解释等。dt：标题，dd：描述，用来对dt的内容进行解释说明的。
2）样式（用来修改标识类型）
- list-style-image：用图像表示标识
<style>
ul{
list-style-image:url("icon.png");
}
style>
-
list-style-position：标识的位置，outside：默认值，不会占用空间，inside：前面标号会占用文本空间。
-
list-style-type：标识类型
简写：list-style：image type position。位置任意，可任意省略。
list-style-type的属性值：
- 无序：
- disc：实心圆
- circle：空心圆
- square：方块
- 有序
- decimal：数字
- decimal-leading-zero：数字前加0
- lower-roman：小写罗马
- upper-roman：大写罗马
- lower-alpha：小写字母
- upper-alpha：大写字母
- lower-greek：小写希腊字母
- lower-latin：小写拉丁字母
均有一个属性：none，取消前面的标识符
4.5.1 轮播图
组成：
- 轮播的组图（至少两张以上，不能太多）
- 控制器
- 计数器
5、CSS定位布局
5.1 定位(position)
position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
属性值：
- static：默认值，没有定位，元素出现在正常的文档流中，这时给这个元素设置的left，right，bottom，top这些偏移属性都是没有效果的。
- relative：相对定位。占用标准流(文档流)，它会出现在文档流中应该出现的位置。可以通过设置偏移量改变其位置，相对于自身所占的位置做偏移，偏移后块所占位置仍然为原有的位置。
- absolute：绝对定位。脱离文档流，默认相对于body做偏移，而不是自身。一般于相对定位结合使用，相对于relative定义的元素做偏移，relative的元素必须是absolute的父级。
- fixed：固定定位。脱离文档流，相对于窗口左上角（0,0）做偏移,与relative的设定无关，一般在开发中用来固定导航栏。
z-index：
当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。
z-index 仅能在定位元素上奏效（例如：position:absolute；）
元素可以拥有负的z-index属性值
说明：一般元素为普通流，普通流的z-index默认为0，脱离了普通流，在普通流之上(定位，浮动)z-index在0-1之间。如果将z-index值设置为大于或者等于1，元素将会在定位或者浮动流之上。
<style>
div{
width:400px;
height:200px;
}
.div1{
width:1000px;
height:600px;
background-color:#f00;
position:relative;
}
.div2{
background-color:#0f0;
position:absolute;
z-index:2;
}
.div3{
background-color:#00f;
position:absolute;
z-index:3;
}
style>
<div class="div1">
<div class="div2">div>
<div class="div3">div>
div>
5.2 网站整体策略
基本策略：先整体后局部，自顶向下，逐步细化。
5.2.1 双飞翼布局
双飞翼布局是将一个网页分为左列、中列和右列三部分，并且我们要得到的效果是：左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。
- 在外层用一个类名为：container的大的div包裹，内层分为三列
- 让列开始浮动
- 实现左右列固定宽度
<style>
.container{
width:100%;
overflow:hidden;
}/*列开始浮动*/
.column{
float:left;
height:200px;
}
#left_panel{
width:300px;
background-color:#f00;
margin-left:-100%;
}/*没有margin0left:-100%之前，左边列会向上一行浮动*/
#center_panel{
width:100%;
background-color:#0f0;
}
#right_panel{
width:300px;
background-color:#00f;
margin-left:-300px;
} /*向左移动右列的宽度px，就可以出现在右边了*/
style>
<div class="container">
<div class="column" id="center_panel">div>
<div class="column" id="left_panel">div>
<div class="column" id="right_panel">div>
div>
优点：
- 兼容性好，兼容所有主流浏览器，包括IE6。
- 因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。
5.2.2 圣杯布局
圣杯布局和双飞翼布局都是三列布局，两边定宽，中间自适应布局。增加了定位，中间内容是完全呈现的，没有被左右边栏覆盖。
<style>
body{
min-width:600px;
}
.header,.footer{
width:100%;
height:100px;
line-height:100px;
background-color:#2fff99;
text-aligin:center;
font-size:30px;
}
.container{
padding:0 200px;
overflow:hidden;
position:relative;
}
.column{
float:left;
height:200px;
}
#left_panel{
width:200px;
background-color:#f00;
margin-left:-100%;
left:-200px;
}
#center_panel{
width:100%;
background-color:#0f0;
}
#right-panel{
width:200px;
background-color:#00f;
margin-left:-200px;
right:-200px;
}
style>
<div class="header">#headerdiv>
<div class="container">
<div class="column" id="center_panel"> div>
<div class="column" id="left_panel">div>
<div class="column" id="right_panel">div>
div>
<div class="footer">#footerdiv>
5.2.3 侧边栏固定布局
侧边栏布局是一种比较常见的布局方案，它在空位紧缺的界面内可以提供更多快捷的入口供用户操作，简化了操作层级。
5.2.3.1 两栏布局
-
左侧固定，右侧自适应
<style> body{ font-size:18px; min-width:600px; } .container{ width:100%; overflow:hidden; } .left{ width:150px; height:200px;/*实际开发中，不要给高度，高度由内容自行撑开*/ float:left; background-color:#fff; margin-right:-150px; position:relative;/*往左移动150px后,left跑上一行去了，使用relative占据原有位置*/ } .right{ width:100%; height:200px; float:left; background-color:#0f0; color:#fff; margin-left:1600px;/*往右移动一定距离，显示内容*/ } style> <div class="container"> <div class="left">左侧固定div> <div class="right">右侧自适应div> div> -
左侧自适应，右侧固定
和1是镜像的。
-
左右均固定
显然的。
5.2.3.2 三栏布局
-
左右固定，中间自适应
<style> .container{ overflow:hidden; color:#fff; } .left,.right{ float:left; width:200px; height:200px; line-height:200px; position:relative; } .center{ float:left; width:100%; background-color:#12049f; line-height:200px; } .left{ background-color:#124cde; margin-right:-200px; } .content{ margin:0 200px 0;/*避免被左右边栏覆盖*/ } .right{ width:150px background-color:#75819c; margin-left:-150px; } style> <div class="container"> <div class="left">左侧固定div> <div class="center"><div class="content"> 中间自适应 div>div> <div class="right">右侧固定div> div> -
左侧自适应，中右固定
-
左中固定，右侧自适应
5.3 BFC&IFC
FC的含义是Formatting Context，是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC，分别叫Blocking Formatting Context 和Inline Formatting Context。
5.3.1 BFC
BFC叫做块级格式化上下文
形成BFC的条件：
- 浮动元素(float除none以外的值)
- 定位元素(position(absolute/fixed))
- display（值为inline-block/table-cell/table-caption）
- overflow(值为hidden/auto/scroll时)
BFC的布局规则如下：
-
内部的盒子会在垂直方向，一个个地放置
-
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠;
-
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
-
BFC的区域不会与float重叠；
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
-
计算BFC元素的高度时，浮动元素也参与计算。
规则展示：
<style> /*内部的盒子会在垂直方向，一个个地放置*/ /*.box1,.box2{ width:200px; height:100px; border:1px solid #000; }*/ /*盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠，距离为最大值。如果不想叠加，需要将其变成一个独立的容器*/ /*.container{ overflow:hidden; width:100px; height:100px; background-color:#f00; } .wrapper{ overflow:hidden; } .box1{ height:20px; margin:10px 0; background-color:#0f0; } .box2{ height:20px; margin:20px 0; background-color:#00f; }*//*box1和box2间隔20，是多个margin的最大值*/ /*BFC区域不会与float元素区域重叠*/ /*.box1{ /*一个BFC区域*/ float:left; width:200px; height:100px; background-color:#61ff9c } .box2{/*另一个BFC区域*/ overflow:hidden; height:200px; background-color:#ff4f46; }*/ /*计算BFC元素的高度时，浮动元素也参与计算。*/ .box2{ width:200px; height:100px; background: #ff9a45; float:left; } .container{/*如果想让父级也被撑开，则需要设置为BFC，让浮动元素也参与高度计算*/ width:300px; border:1px solid #000; overflow:hidden;/*清楚浮动，转化为BFC区域*/ } style> <body> <div class="container"> <div class="wrapper"> <div class="box1">div> div> <div class="box2">div> div> body>
BFC的作用：
- 解决margin重叠的问题（添加独立BFC）
- 解决浮动高度塌陷的问题(父级清除浮动，overflow:hidden)
- 解决侵占浮动元素的问题。(添加overflow:hidden清除浮动)
5.3.2 IFC
IFC(Inline Formatting Contexts)意为"内联(行级)格式化上下文"，IFC中，盒子依次水平放置，从包含块的顶部开始。
形成IFC的条件：
- font-size
- line-height
- height
- vertical-align
IFC布局规则：
- 框会从包含块的顶部开始，一个接一个地水平摆放
- 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为改行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
- 行框的宽度是由包含块和存在的浮动来决定的。行框的高度为包含框的高度，即最高元素的高度
- 浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
- 行框的宽度容纳不下子元素时，子元素会自动换行显示，并且会产生新的行框
- 行框的元素内遵循text-align和vertical-align
规则展示：
<style>
/*框会从包含块的顶部开始，一个接一个地水平摆放*/
span{
font-size:30px;
background-color:#f4ff57;
/*width:200px;/*行级标签不识别宽高*/
display:inline-block;/*必须用display转化为块级标签后才能识别宽高*/*/
}
strong{
font-size:16px;
background-color:#ffadf5
}
/*浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度*/
.box{
font-size:50px;
float:left;
}
style>
<body>
<span>spanspan>
<strong>strongstrong>
<em class="box">boxem>
body>
5.3.2.1 line box
行盒模型，一个显示区域，根据块状容器内，每一行的多个内联元素(inline-level element)都会共同生成一个行盒模型。
5.3.2.2 font-size
常见的属性，用来指定文本类型节点的大小。IFC内的很多属性的值时基于font-size的。
5.3.2.3 line-height & height
在一个由多个内联元素组成的块状容器内，'line-height’为内联元素的行盒模型指定一个最低高度。这个最低高度时分别由基线上的最小高度和基线下的最小深度组成。
从上到下四条线分别时顶线、中线、基线、底线。那么行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离(实际在数值上，行高也等于其他相同颜色间的距离)
5.3.2.4 vertical-align
该属性影响由多个内联元素生成的盒模型组成的行内盒模型的垂直定位。vertical有几个特定的值，或者指定一个值。
<p class="a1">
<span style="vertical-align:60px">English中文span>
<span>中文Englishspan>
p>
给第一个span，设置60px的垂直偏移，发现span容器的高度被撑高了。
容器的高度 height = line-height + vertical-align
同理，如果容器的高度被指定了，那么高度不变，而超出部分不影响布局。如果设置overflow:hidden，超出的部分则不可见。
而vertical-align的其他特殊值，均可以看作一个根据容器高度而变化的相对值(top/mid/bottom)