前端学习

Luson 的个人博客 / 1127 / 0 / 创建于 4年前 / 更新于 4年前

CSS基础

1、css引入方式

1、外部样式表，把CSS样式代码写在独立的一个文件中扩展名：CSS文件名.CSS
引入外部文件：要放在

标签之间
2、CSS导入式
@import "css.css" @import url(css.css);

2、CSS使用方法的优先级

优先级
行内样式＞内部样式＞外部样式
说明：
1.链入外部样式与内部样式表之间的优先级取决于所处位置的先后
2.最后定义的优先级最高（就近原则）

CSS选择器

1、标签选择器

以HTML标签作为选择器：如，p{color:red;font-size:30px;}

2、类选择器

1、为HTML标签添加class属性：（在开始标签添加）

<h1 class="special">内容</h1>

2、通过类选择器来为具有此class属性的元素设置css样式，如：.special{color:red;}
注意：

可对不同类型元素的同一个名称的类选择器设置不同的样式规则,如：p.special{font-size:30px;}（在类选择器前面加上标签名就可以，这样只有设置了class为special的p标签才会生效）
同一元素可以设置多个类，之间用空格隔开如：<p class="special special1>内容

3、id选择器

为HTML标签添加ID属性：如

<p id="p1">内容1</p>
<p id="p2">内容2</p>

通过ID选择器来为具有此ID的元素设置CSS规则：

#p1{color:red;}
#p2{color:blue;}

ID选择器与类选择器区别：(class是点，id是#)

1.id不能像class元素添加在多种元素上面，因为id是唯一的
2.同一种元素一般不能引用多种id的样式；除有一些浏览器可以，就算可以也会影响到以后其他功能的识别
3.同一个文件下面，每一个id是唯一的

4、群组选择器与全局选择器

群组选择器可以设置同一个样式（标签选择器（h1），ID选择器（#h1），类选择（.h1）器）注意：class和id的名字是区分大小写的如写错会显示不出来效果
p.special,#three,p,h1,h2{color:red:}
全局选择器：给所有标签设置样式
*{ 属性:值; 属性:值; 属性:值; 属性:值; }

5、后代选择器

即通过标签的父子关系对标签设置样式，如：

      p a em{ ...}  //代表p标签中包含a标签中的em标签所使用的样式
     #p1 em{...}  //代表id为p1的标签中的em标签所使用的样式
     p.red a em{...} //代表class为red的p标签中的a标签中的em标签所使用的样式

5、伪类选择器

定义标签不同状态下显示不同的样式，举个栗子：

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */

注意：

a:hobver 必须置于a:link 和 a:visited之后，才有效
a:active 必须置于a:hover之后，才有效
伪类名称对大小写不敏感
伪类顺序：link > visted > hover > active

伪类选择器就很多了，常见的就是这些：

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

CSS继承与层叠、优先级

1、继承

继承的好处：父元素设置样式，子元素可以继承（部分！）属性，减少CSS代码

IE6以下版本border不会继承body的属性，所以用群组的方式进行相应的样式设置
浏览器默认字体为：16px（2em）
当上级元素定义了样式与元素本身默认的样式冲突时，这时它将忽略继承得来的样式即若设定body为12px而h1默认为2em（16）则样式冲突而h1变为24px

2、CSS层叠：

同一个元素可以定义多个样式
若元素不冲突时（不存在两个相同属性的不同值时），多个样式可以层叠为一个（葫芦娃合体葫芦小金刚）
元素冲突时（存在两个相同属性的不同值时）就按就近原则来应用

3、CSS优先级

id选择器>class选择器>标签选择器
相同类型定义时，就近原则

css权值
同一样式表中:
1.权值相同（就近原则）；
2.权值不同（哪种权值高，就使用哪种）
选择器权值：

标签选择器：权值为1
类选择器和伪类：权值为10
ID选择器：权值为100
通配符选择器：权值为0
行内样式：权值为1000
权值规则

统计不同选择器个数
选择器个数乘以相应权值
相加所有值得最终权值。
eg: b{color:purple}// 1个
p b{color:yellow} //2个，此权值高

CSS优先级总结

!important一定条件下优先级最高。
css总样式的优先级：行内>内部样式>外部样式，
link链入式和style内部样式优先级取决于先后顺序。
样式表中优先级：id>class>标签>通配符，当权值不同根据权值计算总的权值比较，权值相同就近原则

CSS命名规范

CSS样式命名
1.采用英文字母、数字以及“-”和"_"
2.只能以小写字母开头。
3.命名形式：单字，连字符 -，下划线 _和驼峰 eg:mainTitle
4.使用有意义的命名

常用CSS样式命名
1.页面结构

  页头：header    导航：nav 
  页面主体：main   页尾：footer 
  内容：content/container  容器：container
  侧栏：sidebar    栏目：column 
  页面外围控制：wrapper   左右中：left right center

2.导航

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar
左导航：leftsidebar 右导航：rightsidebar
菜单：menu 子菜单：submenu 标题:title
摘要：summary

3.功能

标志：logo 广告：banner 登录：login
登录条：loginbar 注册：register
搜索：search 功能区：shop 标题：title
注：id不要滥用，后期JS要用id对文档操作，谨慎使用，适当用class

CSS文本样式

1、字体样式

字体属性

字体：font-family、文字大小：font-size、文字颜色：color、文字粗细：font-weight、文字样式：font-style
font-family属性（具体字体名、字体集）："字体1",“字体2”...
注意：含空格字体名和中文,用英文引号(")括起，多个字体用英文","隔开，引号嵌套，外使用双引号，内使用单引号。说人话（style="family:'宋体'"）
设置多个字体的好处是，浏览器依次查找如果没有就会使用自带的默认样式
字体集：Serif（会在字体尾部添加一下装饰线）、Sans-serif（没有装饰线）、Monospace、Cursive、Fantasy

绝对单位：任何分辨率下显示的都是绝对的大小，不会改变 in英寸、cm厘米、mm毫米、pt磅、pc
1英寸=2.54厘米，1厘米=0.394英寸，1毫米=0.1厘米，72磅=1英寸，1pc=12pt
当不设置字体大小时，默认为浏览器默认值。
xx-small（9px）x-small（11px）small（13px）medium（16px）large（19px）x-large（23px）xx-large（28px）
相对单位：px像素、em/% 、langer、smaller
em/% 、langer、smaller，都是针对父元素
px单位值受显示器分辨率影响（在手机端设置大小时，一般不使用px）

字体颜色

语法 color:具体颜色名称/RGB值/16进制
如：color:blue color:rgb(255,255,0) color:rgb(100%,100%,0%) color:#f2f2f2 (0-f) #008822=#082

可以通过查找“网页的安全色“ 查找相应的颜色值

字体样式

font-weight加粗。normal,bold,bloder,lighter
粗细值位100~900一个阈值，因为加粗受字体限制，100~600几乎相同，700~900几乎相同，所以在开发过程中一般用normal、bold，其中normal相当于400粗细值，bold相当于700粗细值.
html中斜体是em、i 
font-style文字格式。normal、italic斜体、oblique倾斜。
font-variant字体变形(针对英文，设置为小型大写字母)。normal、small-caps小型大写字母。

字体属性总结

font属性系列简写，顺序，空格分开是重点
font：font-style font-variant font-weight font-size/font-height font-family。这个顺序很重要
注意：

1、同时设置font-size和font-family，属性才会起作用且必须先size再是family 。
2、style variant weight可以打乱顺序
3、style variant weight必须写在size前面
4、height是行高，必须和size写在一起用分号隔开
总结：font属性简写的话，每个属性值之间用空格隔开，书写顺序是：font-style font-variant font-weight font-size font-family，如果font-family的值有多个时，值用逗号分开。

2、文本样式

文本对齐方式

text-align,设置元素内文本的水平对齐方式，四种对齐方式left,right,center,justify（两端对齐）。
该属性只对块级元素设置有效；不同浏览器会对元素有不同的展示效果。

p{width:50%;margin:0 auto;} 设置浏览器一致显示居中,（上下为0） auto（左右自动）

行高

为了大段文字便于阅读（line-height:长度值|百分比）
注意：

1.当行高为固定值px，且小于字体大小 (font-size>line-height) 时，行与行之间会发生重叠的现象
2.当字体发生什么变化，行高也随之发生变化时，不能用px单位，而是要用em或者%；因为em和%与字体大小有关系。如：
·当font-size：20px，line-height：1.3em时，行高=201.3=26px
·当font-size：20px，line-height：120%时，行高=20120%=24px
3.在开发过程中，一般使用em单位来定义
4.浏览器有默认行高，不同浏览器默认行高不一样（一般行高默认为字体的120%）
5.line-height的属性是可以继承的。
·继承的是计算后的值，不是直接把em或%的值继承过来

vertical-align属性

作用：设置元素内容的垂直方式，垂直方式的属性只对行内元素和单元格有效，对块级元素不生效
属性有：baseline（默认对齐）、sub（下标对齐）、super（上标对齐）、top（顶线对齐）、text-top（文本顶端对齐）、middle（中线对齐）、bottom（底线对齐）、text-bottom（文本底线对齐）。

前端学习

垂直对齐方式的属性只对行内元素有效。如span、p标签等
vertical-align：-15px（向下移）、15px（向上移）、100%向上移
单行文本想要垂直居中则将line-height与高度值相同
多行垂直居中，因为垂直居中属性只能作用于行内元素和单元格元素，所以，先将块级元素转换为单元格，要知道这个思路！！！

1.素转为单元格元素添加display:table-cell
2将父元素也设置为表格即添加样式 display:table
3现在才能用用垂直居中 vertical-align:middle

3、文本其他样式

line-height:行高
text-indent:25px首行缩进
文本样式属性
word-spacing：元素内单词之间的间距
letter-spacing：元素内字母之间间距
text-transform：capitalize：首字母大写，uppercase：转成大写，lowercase：转成小写，none：无
text-decoration：underline：下划线，overline： 上划线，line-through：贯穿线（删除线） ，blink：闪烁效果（有兼容性问题） ，none：
text-decoration不可以被继承，这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中

CSS 盒子模型

CSS盒子模型介绍

Laravel

CSS模型属性介绍

1、宽度

宽度属性(width宽度，max-width最大宽度，min-width最小宽度)：是设置内容的宽度，不是元素的宽度
width:长度值(in、cm、px)|百分比|auto(自动);
max-width:长度值(in、cm、px)|百分比|auto(自动);
min-width:长度值(in、cm、px)|百分比|auto(自动);

1当设置了width、max-width或min-width（根据继承的样式与我们设置的样式是否冲突来选择要实现的样式）。max-width、min-width为宽度的界限，若width未超过界限则显示width,超过max,显示max.低于min,显示min.
2.max-width和min-width有兼容性问题，IE6及以下只能识别width的值。
3，同时设置max和min时，width超过max，显示max；低于min，显示min。若设置的max低于min,显示min。
4.%是针对于父元素宽度来设置当前元素的宽度的。

2、高度属性设置

高度属性(使用方法，同宽度属性width基本一致)
高度：height: 长度值/百分比/auto
最大高度：max-height:长度值/百分比/auto
最小高度：min-height:长度值/百分比/auto
注：

1.min与max的高度与宽度设置在IE6及以下不兼容，无法实现。
2.float属性（浮动属性）
例：.p{float：left}——应用这个样式的p标签的内容都在同一行显示，没有换行显示。
3.设置块级元素和替换元素的内容高度（一般内容的高度相当于元素（容器）的高度，因块级元素，占一整行，默认（设置）其他边框、边距都为0px。）
4.height与line-height的区别：height是整个内容（可有多行）的高度（也就是规定一个容器有多高的内容），line-height只是一行的高度（是文本实际高度，所以会出现文本高度line-height超出我们规定的高度height）
5.%是针对于父元素高度来设置当前元素的高度的。

3、border边框属性 (针对元素的边框)

1.边框宽度（border-width），格式如下：
border-width:thin（窄或薄）|medium（中等）|thick（厚）|长度值(px,em);
2.边框颜色（border-color），格式如下：
border-color:颜色（三种方式）|transparent（透明）;
3.边框样式（border-style），格式如下：border-style:值;
值有：none（定义无边框，默认值），hidden（与none相同，除非在表格元素中解决边框冲突时），dotted（定义点状边框，在大多数浏览器中呈现为实现），dashed（定义虚线，在大多数浏览器中呈现为实线），solid（定义实线），double（定义双线），groove（定义3D凹槽边框），ridge（定义3D垄状边框），inset（定义3D inset边框），outset（定义3D outset边框），inherit（规定应该从父元素继承边框样式）。

4、padding 属性

定义：设置元素的内容与边框之间的距离（内边距或填充）。分4个方向（上、右、下、左）格式为：
padding-top:长度值（px）|百分比;
padding-right:长度值|百分比;
padding-bottom:长度值|百分比;
padding-left:长度值|百分比;
说明：

1.值不能为负值
2.盒子在网页中占的空间，不单单与width和height属性有关，还与padding属性有关。
padding属性缩写，格式如下：
padding:值1;——4个方向都为值1
padding:值1 值2;——上下=值1，左右=值2
padding:值1 值2 值3;——上=值1，左右=值2，下=值3
padding:值1 值2 值3 值4;——上=值1，右=值2，下=值3，左=值4（值与值之间用空格隔开。padding属性有4个值时，按照顺时针来排列，即上、右、下、左）
具体例：padding:10px 5px 8px 20px;

5、margin属性

定义:设置元素与元素之间的距离（外边距，也可理解为4个方向的边框延伸出去的距离）

1.4个方向（上、右、下、左），格式如下：
margin-top:长度值（px）|百分比|auto;
margin-right:长度值（px）|百分比|auto;
margin-bottom:长度值（px）|百分比|auto;
margin-left:长度值（px）|百分比|auto;

值可以设置为负数
2.margin属性的缩写,格式如下：
margin:值1;——4个方向都为值1
margin:值1 值2;——上下=值1，左右=值2
margin:值1 值2 值3;——上=值1，左右=值2，下=值3
margin:值1 值2 值3 值4;——上=值1，右=值2，下=值3，左=值4（从”上“开始顺时针，值之间用空格隔开）
3.默认情况下，相应的一些HTML块级元素（body、h1～h6、p等）存在外边距。在开发过程中，为了不受元素本身默认的外边距影响，在开发之前可以声明margin属性，覆盖默认样式。格式：
body,h1,h2,h3,h4,h5,h6,p{margin:0;}
4.margin值为auto时，实现水平方向居中（本元素相对于父元素而言）显示效果，且由浏览器计算外边距(格式为两种：1.margin:0 auto; 2.margin:auto;)
5.垂直方向（水平方向也一样），两个相邻元素都设置外边距（一个元素的下外边距，一个元素的上外边距（这两者一般设置为一样）），外边距会发生合并（两个外边距合并形成一个外边距）。
即：合并后两元素之间的距离=两个发生合并的外边距中的最大值

盒子模型计算

width(宽度)=左边框（margin）+左内边距(padding)+内容宽度+右内边距+右边框
height(高度)=上边框+上内边距+内容高度+下内边距+下边框

CSS 盒子模型

ie盒子模型
CSS 盒子模型

注：IE盒子模型与标准盒子模型的区别：width（宽度）和height（高度）所描述的对象不同。

IE盒子模型：（盒子是包含外边距，边框，内边距和内容的）

注意：

1.不使用Doctype文档类型声明，各浏览器按照自己的方式解析。
2.如果有Doctype文档类型声明，按照标准盒子模型来解析。声明方法<!Doctype HTML>

盒子模型的应该

1、display 属性

display属性：

1、inline：元素将显示为内联元素，元素前后没有换行符；
2、block：元素将显示为块级元素，元素前后会有换行符；
a、将块级元素设置为内联元素：display：inline；
b、将内联元素设置为块级元素：display：block；
注意：内联元素之间有缝隙，如何去除？
a、可能是标签之间有换行，那么写代码时不添加换行或者空格就行了；
b、去外层添加一个父元素，设置父元素的font-size：0px；然后子元素单独设置font-size:16px;
c、行内元素不具有宽高属性，给其设置宽高不起作用，内边距起作用，外边距上下不起作用；
3、inline-block：行内块元素，元素呈现为inline，具有block相应特性,
即display：inline-block；（可以设置宽高、内边距、外边距属性）
4、display：none
实现子元素刚开始不显示，当鼠标经过父元素时显示
在子元素内设置：display：none；
在父元素内设置：父元素：hover 子元素{display：block}鼠标经过时块状显示子元素
在父元素内设置：父元素：hover 子元素{display：inline}鼠标经过时行内显示子元素

补充：
html常用块级元素：
p 、div、h1~h6、ul、ui、ol、dl、dt 、dd等
行内元素： span/a/em/input/img

2、盒子模型应用总结

盒子模型应用-案例应用：

1.为了不影响全局，我们首先要对body、p、div等某些元素的margin和padding值设置为0，字体统一设置为微软雅黑，我们也可以直接用通配符。
2.设置顶部水平居中对齐，可用margin:0,auto;
3.先搭建html结构，在写css声明，从外到内，从大到小。
4.一个元素可以赋予多个选择器，在同一个class中用空格隔开。

CSS 背景与列表

CSS背景

1、背景颜色 background-color

语法：backgroud-color:颜色|transparent（默认值）
说明:

1.transparent（透明色）的作用
如果你不希望某个元素有背景颜色，同时又不希望用户对浏览器的设置影响了你的设计，就有必要设置了。即透明色，其展现形式基本等于没设置。
2.颜色值（颜色名|rgb|十六进制）
3.背景区（背景颜色区域）包括内容、内边距（padding）和边框（border），不包括外边距（margin）

注：边框（border）的设置，不仅需要设置边框宽度，还需要设置边框样式和边框颜色。

如果没有设置边框样式，则边框显示不出来；
边框颜色会覆盖掉背景颜色；
边框颜色在没有设置的时候是默认和（内容中）文本的颜色一样的；——border:20px solid;

2、背景图片

background-image语法：background-image:url(地址)|none;——（none无背景图片）
说明：

1.url地址可以是相对地址也可以是绝对地址。
2.元素的背景图片占据了元素的全部尺寸，包括内容、内边距和边框，但不包括外边距。
3.默认地，背景图片位于元素的左上角，并在水平和垂直方向上重复（当图片大小无法充满元素的全部尺寸时，元素的其余尺寸在水平和垂直方向上重复显示该图片，使图片占据了元素的全部尺寸）。
注：
当你既设置背景图片又设置背景颜色的时候，背景图片会覆盖掉背景颜色（与两者代码前后顺序无关，背景图片都会覆盖掉背景颜色）。开发过程中一般会同时设置背景图片和背景颜色，以防图片失效后还可以看到背景颜色。

2.1背景图片重复属性（background-repeat）；必须基于有背景图片的情况下才是有效的。

设置元素的背景图片的重复方式，格式：
background-repeat:repeat|no-repeat|repeat-x|repeat-y;
具体例：background-repeat:no-repeat;
repeat：重复（默认值）
no-repeat：不重复
repeat-x：水平重复
repeat-y：垂直重复（竖直方向重复）

2.2 背景图片显示方式

设置元素的背景图片的显示方式
background-attachment：scroll、fixed
说明：
scroll：默认值，背景图片随滚动条滚动
fixed：当页面的其余部分滚动时，背景图片不会移动

2.3 背景图片定位

图片定位background-position用于定位图片有有以下值

百分比：（x% y%），注：只写一个参数的话，第二个默认为居中

具体数值：（x y），注只写一个参数的话，第二个默认为居中

top：顶部显示，相当于垂直方向（50% 0）

right：右边显示，相当于（100% 50%）

bottom：底部显示，相当于（50% 100%）

left：左边显示，相当于（0 50%）

center：中间显示（50% 50%）
总结：

CSS 盒子模型

2.4 背景图片设置缩写

背景缩写属性（background）
background:background-color background-image background-repeat background-attachment background-position；
具体例：background:#000000 url(img/bg.png) no-repeat top fixed;
说明：

1.各值之间用空格分割，不分先后顺序，可写一个或多个值。
2.当background-attachment 属性是fixed的时候，也就是说，背景图片不随滚动条滚动的时候，那么background-position的值(百分比)，都是相对于整个页面来说的，而不是背景图片的容器来说的，比如，这个时候，我设置居中，就是在整个页面的居中，如果这个时候，我attachment的属性是scroll的话，那么居中，就是针对背景图片的容器说的，

CSS列表样式

1、列表项的标记样式类型

设置列表项的标记样式类型，语法：
list-style-type:关键字|none;——disc是默认值，具体例：list-style-type:circle;list-style-type:lower-roman;
属性值为：

1.无序列表
none（无标记）、disc（实心的圆点）、circle（空心的圆点）、square（实心的方块）
2.有序列表
none（无标记）、decimal（从1开始的整数）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
注：css列表样式（列表项标记属性）可以将ul设置成有序列表, 将ol设置成无序列表，或者将ul，ol设置成无标记列表。列表项标记属性一般是作用在li标签（有标记的标签）样式上的

2、使用图片来当列表项标记

设置语法：list-style-image: url(图片链接)

3、列表项标志位置设置

列表项标记位置语法：
list-style-position：inside | outside 列表项标记在list内的显示位置，基本属性：

1.inside(标记在文本内，且环绕文本根据标记对齐）
2.outside(默认值，放置在文字外面，不包含标记，第二行跟文本对齐）

4、列表属性缩写

列表样式缩写（list-style）——一般是使用在有标记的标签（li）样式上的。语法：list-style:list-style-type list-style-position list-style-image;具体例：list-style:square inside url(img/em.png); 说明：

1.值之间用空格分隔
2.值的顺序不固定
3.list-style-image会覆盖list-style-type的设置

浮动

浮动属性介绍

1、基本概念

css float（浮动）的基础知识

1.浮动会使元素向左或向右移动，只能左右，不能上下。
2.浮动元素碰到包含框或另一个浮动框，浮动停止。
3.浮动元素之后的元素将围绕它，之前的不受影响。
4.浮动元素会脱离标准流。

浮动清除：
语法 clear : none | left | right | both
清除浮动常用的方法:

.在浮动元素后使用一个空元素。例如：'<div class="clear>

';在.clear 里面设置 clear: both; 2.给浮动元素的容器（父元素）添加 overflow( 溢出 ): hidden( 隐藏 ); 3.使用CSS3 的 :after 伪元素（主流方法）
/zoom: 1; / 触发 hasLayout属性兼容IE6、7 *

.clearfix:after{
content:'.';  //内容为空
height:0;
display:block;
visibility:hidden;
clear:both;
}

浮动应用实例

/*重置代码部分*/
*{
margin: 0;
padding: 0;
}
ul{list-style: none;}
a{text-decoration: none;}
/*当前页面样式*/
.container{
width: 1200px; /*最外侧框架，给它个固定宽度*/
margin: 0 auto; /*上下外边距为0 左右居中*/
}
.header{
width: 1200px;
background: #ccc;
/*高由内容撑起来*/
overflow: hidden; /*清除浮动带来的高度塌陷*/
zoom:1;/*使上面清除效果兼容IE*/
}
.header .logo{ /*这里的宽高就是logo的宽高*/
width: 200px;
height: 80px;
float: left;
/*logo位置太靠左，下面进行微调*/
margin: 0 40px;/*可先给个大概的值看看效果，不好再改*/
}
.header .nav{
/*高由内容撑起来*/
float: right;
overflow: hidden;/*清除浮动*/
zoom:1;
/*导航太靠右，下面进行微调*/
padding-right: 40px;
}
.header .nav li{
/*宽高由内容撑起来*/
float: left;
margin-right:20px; /*导航之间加点间距*/ 
}
.header .nav li a{
/*宽度可由内容撑起来*/
padding: 0 20px;
height: 80px;
line-height: 80px; /*垂直居中*/
display:block;/*转成块元素才能设置高度*/
font-size:16px; 
font-family:"微软雅黑";
color:#333;
}
.header .nav li a:hover{ /*鼠标经过导航的效果*/
color:#fff;
}

.main{
width: 1200px; /*和头部同宽，高度由内容撑起*/
overflow: hidden;/*清除浮动问题*/
zoom:1;
}
.main .con{
width: 1000px;
height: 500px;
background: blue;
float: left;
}
.main .sidebar{
width: 200px; /*1200-1000*/
height: 500px;
background: orange;
float: left;
}
.footer{
width: 1200px;
height: 100px;
background: red;
}
/*以下仅为演示效果*/
.main,.footer{
font-size: 22px;
color:#fff;
}
body内容：
<div class="container">
<div class="header">
<div class="logo">
<a href="#"><img src="./img/logo.png"></a>
</div>
<ul class="nav">
<li><a href="#">免费课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="main">
<div class="con">
content
</div>
<div class="sidebar">
sidebar
</div>
</div>
<div class="footer">
footer
</div>
</div>

CSS定位

position属性详情

position属性-static（静态定位/常规定位/自然定位）
语法：position:static;
原理：使元素定位于常规/自然流中，参照物就是页面内的水平左右，垂直上下。
特点：
- 1.忽略top、bottom、left、right、Z-index声明，强制元素回归到正常的自然流。
- 2.两个相邻元素设置了margin，最终外边距=两者外边距中最大的。
- 3.具有固定宽高的元素，把水平或者垂直边距设为auto，会造成居中的效果。

2.position属性relative
相对定位的元素不会离开自然流，也就是说用top/right/bottom/left/z-index进行偏移后，这个元素原先所占的位置还留在那里，别的元素不会占掉那个位置。
而相对定位的相对是相对于元素本来在自然流中的位置所定位。
可以使浮动元素进行偏移，并控制其堆叠顺序。

3.position属性absolute
absolute绝对定位是可以将元素脱离常规自然流的布局方式。absolute的几个特点

3.1会使元素脱离常规自然流，这时候原布局不再保留脱离元素的空间，周围元素的布局也会受到影响。
3.2当设置元素偏移量伟百分比的时候，该元素会以最近的设置了relative的定位祖先元素为参照进行偏移，当文档中找不到这样的元素，那么就以body伟参照。
3.3联合上一节的知识，设置为relative的元素，他的子元素可以以其为参照进行布局。从课件上可以看出，如果想把元素设置在父元素的外部，那么可以设置负值将其布局到父元素的外边，这种方法可以实现广告挂接的效果，也就是局部定位。
3.4lrtb(上下左右)如果设置为0，当元素没设置宽和高，元素会对齐到最近定位祖先元素的各边（填充父容器）；当设置了宽和高，而且设置了margin属性，那么元素将会针对margin方向值为auto的方向进行居中对齐。
2.1.5当lrtb都设置为auto，元素会回归常规自然流。
2.1.6z-index可以实现元素的堆叠。

4.position:之fixed
跟absolute区别：
绝对定位absolute，相对于网页而言，如果网页过高，可以滚动，那么绝对定位的元素也会跟着滚动
固定定位fixed，相对于用户视角而言，在可视化范围内固定，不随着网页滚动而滚动

position:fixed

5.sticky 磁贴定位（了解）
概念
说明：

1.要有一个定位矩形的概念，当这个定位矩形完全捕获到磁铁元素，则磁铁元素固定住
2.偏移标尺是由最近祖先元素来决定
3.要注意其兼容性，因为其实后起之秀

网页布局

经典行布局1

基础行布局：宽（width）和高（height）设置具体的单位长度（px）
行布局自适应：设置最大的容器相对于浏览器（body）的百分比宽度
行布局自适应限制最大宽：设置max-width，当浏览器视口小于设置的最大宽度（max-width），内容宽度则为设置的百分数，若大于设置的最大宽度；内容宽度则是max-width的具体值。这时设置居中的话，就可以实现水平宽度的自适应。（如{width: 100%;max-widrh:1000px;height:1000px;margin:0 auto;}）
行布局垂直水平居中
垂直水平居中方式，距离top偏移50%，距离left偏移50%，再让上边距margin-top和左边距margin-left，分别向负方向偏移，元素高宽的一半。
```
.container{
width:800px;
height:200px;
background-color:#4c77f2;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-400px;
}
```