小猫mip网站建设,wordpress兼容手机端,合肥网站排名优化公司,外贸流程全步骤 外贸篇一、 定位分类
1、静态定位
position:static;#xff08;默认#xff0c;具备标准流条件#xff09;
2、相对定位
position:relative;
通过 top 或者 bottom 来设置 Y 轴位置
通过 left 或者 right 来设置 X 轴位置
特点#xff1a;
相对定位不会脱离文档流相对于自…一、 定位分类
1、静态定位
position:static;默认具备标准流条件
2、相对定位
position:relative;
通过 top 或者 bottom 来设置 Y 轴位置
通过 left 或者 right 来设置 X 轴位置
特点
相对定位不会脱离文档流相对于自己原来的位置
3、绝对定位
position:absolute;
通过 top 或者 bottom 来设置 Y 轴位置
通过 left 或者 right 来设置 X 轴位置
特点
绝对定位的元素会脱离文档流如果父级没有定位则相对于文档进行定位如果父级祖先级有定位则相对于父级祖先级进行定位如果有 padding 则会相对与 paddingbox 的位置进行定位
4、固定定位老IE不支持
position:fixed;
通过 top 或者 bottom 来设置 Y 轴位置
通过 left 或者 right 来设置 X 轴位置
特点
会脱离文档流相对于可视窗口进行定位可借鉴网页两边跟随拉条移动的广告位
5、粘性定位
position: sticky;
定位基点是窗口
通过 top 或者 bottom 来设置 Y 轴位置
通过 left 或者 right 来设置 X 轴位置
特点
以浏览器的可视窗口为参照点移动元素固定定位特点粘性定位占有原先的位置相对定位特点必须添加 top 、left、right、bottom 其中一个才有效
粘性定位不起作用的原因
父元素不能overflow:hidden或者overflow:auto属性。必须指定top、bottom、left、right4个值之一否则只会处于相对定位父元素的高度不能低于sticky元素的高度sticky元素仅在其父元素内生效
6、继承定位
position: inherit;
从父元素继承position属性的值。
二.居中 1、内联元素居中布局 水平方向的居中
//方法一
text-align:center; //方法二
dispaly:flex;
justify-content:center; 垂直居中
单行文本
//方法一
height line-height;//方法二
display: flex;
align-items: center; 多行文本
display: table-cell;
vertical-align: middle; 知识扩展:
如果有图片需要与文本进行垂直居中会发现图片总是会高出一点无法进行垂直居中是因为图片下方有三个像素导致的只要对图片设置vertical-align:middle就好了
vertical-align:middle; 水平垂直居中
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */ 2、块级元素居中布局 水平方向的居中
//方法一
定宽margin 0 auto; //方法二
dispaly:flax;
justify-content:center; //方法三
position: absolute
left50%
margin负自身宽度一半 垂直居中
//方法一
display: flex;
align-items: center; //方法二
position: absolute;
top: 50%;
margin-top负本身高度一半 //方法三
position: absolute;
top: 50%;
transform: translateY(-50%); //方法四
position: relative;
top: 50%;
transform: translateY(-50%); 水平垂直居中
方法一绝对定位 -margin
进行定位后top与left分别设置50%这时元素的上边距到父元素的上边距与到子元素的下边距距离是一样的元素的左边距到父元素的左边距与右边距距离也是一样的这样再减去元素margin本身高度的一半与宽度的一半这时元素就能达到垂直居中的效果。
position: absolute;
top: 50%;
left: 50%;
margin-left: —宽度一半;负
margin-top: —高度一半;负 方法二绝对定位 marginauto
进行定位后利用margin的auto属性使margin自动撑满整个父元素这样就能达到内容居中的效果
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto; 方法三定位 transform
使用transform: translate对元素进行移动这个与第一种方式类似第一种方法是设置margin值而这种是定位后的位置进行移动
position: absolute; /*相对定位或绝对定位均可*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 方法四flex布局推荐
使用flex布局分别设置垂直方向排列子元素的居中与水平方向子元素的居中就能达到垂直居中的效果
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/ 方法五grid网格布局推荐
实现原理与flex布局一样
displaygrid;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
