0基础学习网页结构编程

目录

一、定位

二、补充！！

一、定位

定义：是一种布局手段，而且是一种高级的布局手段，可以将页面中的任何元素放在页面中的任意位置

通过position属性进行设置
可选值：
static          默认值，不开启定位
relative       开启相对定位
absolute     开启绝对定位
fixed           开启固定定位
sticky          开启粘滞定位

掌握定位：如何开启、开启后的特点

（1）相对定位position： relative；
开启相对定位：；
开启后的特点：
①开启了相对定位，如果不配合偏移量使用，元素不发生变化

②相对定位，是相对于元素原来在文档流中的位置进行定位的

③开启了相对定位后，元素的层级会变高，会盖住其他元素

④开启相对定位后，元素的性质不会发生变化，块还是块，行内还是行内
偏移量：
left         相对于定位位置左侧的偏移量
right       相对于定位位置右侧的偏移量
top         相对于定位位置上侧的偏移量
bottom 相对于定位位置下侧的偏移量

一般情况下，设置偏移量
水平方向，left或right调动一个值
垂直方向，top或bottom调动一个值

（2）绝对定位position ：absolute；
开启绝对定位 position： absolute；
开启后的特点：
①开启绝对定位后，如果不配合偏移量使用，元素的位置没有发生变化

②开启绝对定位后，元素会脱离文档流，下面的元素就会跑上去

③开启了绝对定位，元素脱离文档流，元素的性质就会发生变化，不再区分块还是行内，也就是块不会独占一行了，行内也可以设置宽高了

④绝对定位的原点，是相对于其包含块来确定的；一般情况下，如果设置子元素为绝对定位，我们同时设置其父元素相对定位，以便设置偏移量，这种情况叫‘’子绝父相‘’，但最终情况以方便情况为准。

包含块：
~ 在没有定位的情况下，其包含块就是父元素或祖先元素
~在开启定位的情况下，其包含块就是离它最近开启了定位的祖先元素；如果其祖先元素都没有开启定位，那么定位原点就是根元素的开始

⑤开启了绝对定位，元素会提升一个等级

（3）固定定位position：fixe；
开启固定定位position：fixe；
开启后的特点：
①开启固定定位后，元素会脱离文档流，元素的性质会发生变化

②开启固定定位后，元素会固定在页面中，不会随着滚动条的滚动而滚动

③开启固定定位后，也需要配合偏移量使用，来改变元素在页面中的位置

④固定定位原点一直是html根标签，也就是浏览器视口

常用的场景
①固定的侧边导航  ②固定的广告  ③固定的顶部、底部导航

（4）粘滞定位position：sticky;
开启粘滞定位position：sticky;
开启后的特点：
①开启粘滞定位，元素不会脱离文档流，元素的性质不会发生改变
②开启粘滞定位后，元素位置不发生改变，需要配合偏移量使用

一般情况下，配合top值使用
在没有到达top值之前，随着滚动值滚动而滚动
到达top值之后，不会随着滚动条滚动而滚动

③粘滞定位是后来增加的定位方式，注意它的兼容性，一般兼容达到ie9以上的浏览器

④粘滞定位的原点也是浏览器的视口，也就是html根标签

主要的应用的场景
①侧面导航  ②广告  ③底部导航

二、补充！！

（在定位的情况下，元素的水平方向，增加了两个值，从原来的7个值变为9个值，但依然遵循过度约束原则，即水平方向9个值相加必须要等于其父元素内容区的宽度，如果不等于的话，浏览器会进行自动调整）！！
left........7个.........right
如何调整
1、如果9个值中没有auto，调整的就是right
2、如果有auto，9个值中，有left，margin，widt，right 4个值可以设置auto
设置1个auto，其它为固定值，谁是auto调整谁
设置2个auto，优先级right>left>width>margin
设置3个auto，优先级right>left>width>margin
设置4个auto，优先级right>left>width>margin
总结：
①如果9个值中没有auto，调整right
②如果9个值中有auto，按优先级调整
③在绝对定位的情况下，如果right，left，top，bottom，width为固定值，元素就会水平垂直居中