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属性：（在开始标签添加）
内容
2、通过类选择器来为具有此class属性的元素设置css样式，如：.special{color:red;}
注意：
- 可对不同类型元素的同一个名称的类选择器设置不同的样式规则,如：p.special{font-size:30px;}（在类选择器前面加上标签名就可以，这样只有设置了class为special的p标签才会生效）
- 同一元素可以设置多个类，之间用空格隔开如：
内容1
内容2
通过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 center2.导航
导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题:title 摘要：summary3.功能
标志：logo 广告：banner 登录：login 登录条：loginbar 注册：register 搜索：search 功能区：shop 标题：title 注：id不要滥用，后期JS要用id对文档操作，谨慎使用，适当用classCSS文本样式
1、字体样式
字体属性
字体：font-family、文字大小：font-size、文字颜色：color、文字粗细：font-weight、文字样式：font-style
font-family属性（具体字体名、字体集）："字体1",“字体2”...
注意：含空格字体名和中文,用英文引号(")括起，多个字体用英文","隔开，引号嵌套，外使用双引号，内使用单引号 。说人话（style="family:'宋体'"）
设置多个字体的好处是，浏览器依次查找如果没有就会使用自带的默认样式
字体集：Serif（会在字体尾部添加一下装饰线）、Sans-serif（没有装饰线）、Monospace、Cursive、Fantasy字体大小
font-size文字大小：定义元素内文字大小，语法：font-size：绝对单位|相对单位
- 绝对单位：任何分辨率下显示的都是绝对的大小，不会改变 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:middle3、文本其他样式
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盒子模型介绍
LaravelCSS模型属性介绍
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文档类型声明，按照标准盒子模型来解析。声明方法
盒子模型的应该
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/img2、盒子模型应用总结
盒子模型应用-案例应用：
- 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
清除浮动常用的方法:- .在浮动元素后使用一个空元素。 例如：'
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:fixed5.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; }经典行布局2
- 行布局固定宽：width:~px
- 行布局某部位自适应：width:100%
- 行布局导航随屏幕滚动：position:fixed
经典两列布局
1.两列布局固定：
①一个大div设置宽高固定值，包含两个div
②两个div宽度合计等于大div，高度分别等于大div
③两个div分别进行左右浮动后会在一行
2.两列布局自适应：
将上述的宽度设置改为百分比即可 - position属性-static（静态定位/常规定位/自然定位）
