【无标题】

CSS属性书写顺序(重点)
建议遵循以下顺序：
1.布局定位属性：display / position/ 关闭float / clear / visibility /overflow (建议 display第一个写，毕竟关系到模式)
2.自身属性：width / height /margin/ padding / border / background
3.文本属性：color / font /text-
decoration/text-align /vertical-align /white- space / break-word
4.其他属性 (CSS3): content / cursor/ border-radius / box-shadow / text-
shadow /background:linear-gradient
举例：
举例：
1 .jdc {
2 display: block;
3 position: relative;
5
4 float: left;
width: 100px;
6
height: 100px;
7 margin: 0 10px;
8 padding:20px 0;
9 font-family: Arial 'Helvetica Neue'
Helvetica, sans-serif;
10 color: #333；
11 background:rgba(0, 0,0,.5);
12 border-radius: 10px;
13
七、CSS定位
1.定位(position)
1.1为什么使用定位
场景1：某个元素可以自由的在一个盒
子内移动位置，并且压住其盒子.
智能硬件
小米净水器下闻
1999元
小业气净化排2
A
Sources NetworkTimelineProfilesApplicationSecurityAudits
1161280059”>
Styles Computed Event ListenersDOM Breakpoints Properties
orick-item Filter
brick-item-m-
2161200866”) position: absolute;
o"figure top：epx;
></div) left:
“title")
width：64p×i
“desc”>智能空 height：22px;
H 加括</p> margin-left:-32P×;
场景2：当我们滚动窗口的时候，盒子
是固定屏幕某个位置的。
□
结论：要实现以上效果，标准流或浮动都无法快速实现
所以：
1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
2.定位则是可以让盒自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
1.2定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位也是用来布局的，它有两部分组
成：
定位=定位模式+偏移量
定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
边偏移(方位名词)
边偏移 就是定位的盒子移动到最终位置。有top、bottom、left和right4个属性。
边偏移属性 示例
top top：
80px 顶端偏移量，上
bottom: 底部偏移量，
bottom
80px 下
left left:
80px 左侧偏移量，左
right: 右侧偏移量，
80px
定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。
定位模式(position)
在CSS中，通过positi属性定义元素的定位模式，语法如下：
1 选择器{
2 position:属性值；
3 }
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值
可以分为四个：
829
值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
偏移top:100px
position:属性值
偏移left:100px- top:100px;
left:100px
定位=定位模式+边偏移
1.3 静态定位(static)-了解
静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的
none，静态定位static，不要定位的时候用。
语法：
1 选择器
2 position: static;
3
•静态定位 按照标准流特性摆放位置，它没有边偏移。
•静态定位在布局时我们几乎不用的
1.4相对定位(relative)-重要
相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的(自恋型)。
语法：
1选择器
2 position: relative;
3
相对定位的特点： （务必记住）
1、它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。
效果图：
标准温中的默认位置
相对定位
relat ive 前色盘子在接育实中
posicion.retativer 120px 原有的区域仍然会保留
/* 边偏移 */
3 left：80px; 380px
top：120px;
1.5绝对定位(absolute)-重要
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)。语法：
1 选择器《
2 position: absolute;
3
特点：
1、完全脱标—完全不占位置；
2、父元素没有定位，则以浏览器为准定位 (Document文档)
8
把对走位的特总总结，(务必记住)
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位
(Document文档)。
2、如果祖先元素有定位(相对m绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
3、绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。(脱标)
1.6定位口诀——子绝父相
弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这句话的意思是：子级是绝对定位的话，父级要用相对定位。
因为绝对定位的盒子是拼爹的，所以要和公奶一起估田
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要而有位置，因此父亲只能是相对定位。
相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位
置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
疑问：为什么在布局时，子级元素使用
绝对定位时，父级元素就要用相对定位呢?
观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。
热点 全新途观L 2年0利率 世界再大 也如阳能
父元素
后面的盒子
>1个鑫子
4楼对座任一相时座位占据位然，合影响后面盘子的冠示一
2绝对案位 糖对定位不占與位器，肌离标准读
2父盒子+
1相对定位 相对工位，占露位置，按系正常标准流程示，后面的盘子按照正常显示
一条绝对连份一场对案位不占媒位想，拍面的盘子顶管對之的的位酷——
由于千元素，不占舞你然，师以我们便用地对案位
南于父元素占舞经置，不能响应后能元素的正常胜示，我们世用相对主位
总结：
由于子元素，不占据位置，所以我们使用绝对定位
由于父元素占据位置，不能响应后面元素的正常显示，我们使用相对定位
分析：
1、方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
2、父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
•如果父级盒子也使用绝对定位，会完全脱标，那么下方上告盒子会上移，这显然不是我们想要的。
结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。
1.7固定定位(fixed)-重要
固定定位是元素固定干浏览器可视区的
位置。 （认死理型）
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
1 选择器
2 position: fixed;
3
• 固定定位的特点： （务必记住）
1、以浏览器的可视窗口为参照点移动元素。
•跟父元素没有任何关系
•不随滚动条滚动。
2、固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。(认

死埋型)
•完全脱标—— -完全不占位置；•只认浏览器的可视窗口——
浏览器可视窗口+边偏移属性 来设置元素的位置；
。跟父元素没有任何关系；单独使用的
。不随滚动条滚动。