做情人节网站,专业网站建设的公司,网站建设的公司怎么做,wordpress朋友圈注#xff1a;本文的css样式均使用less写法
1、字体居中
#xff08;1#xff09;先text-align:center;行内元素水平居中
#xff08;2#xff09;再line-heigh:(盒子高度);行内元素垂直居中 text-align: center;line-height: ( 30 / vw );
2、盒子居中
情景1#…注本文的css样式均使用less写法
1、字体居中
1先text-align:center;行内元素水平居中
2再line-heigh:(盒子高度);行内元素垂直居中 text-align: center;line-height: ( 30 / vw );
2、盒子居中
情景1版心居中
margin:0 auto;
情景2标题栏制作时让左右两个弹性盒子居中的方法 1设置浮动
2给父级添加行高line-height: (25 /vw );
.head{display: flex;justify-content: space-between;width: (345 /vw );height:(26 /vw ) ;background-color: pink;margin-bottom: (16 /vw );line-height: (25 /vw );h4{font-size:(20 /vw ) ;}a{font-size:(12 /vw ) ;color: #a1a4b3;}
}
3、图片居中 情景1弹性盒子含img
一般是flex布局的几个弹性盒子居中直接给父级设置纵轴对齐方式属性align-items:center;
情景2背景图图片
1仅需要设置background-image和background-size
2水平居中方法background-positioncenter 0
4、图片不符合盒子比例
方法1盒子里放图片
1设置包括图片的盒子大小
2设置图片宽高成100%
3给图片加属性object-fit: cover不挤压变形 object-fit: cover 以缩放的方式显示图片等比例缩放不挤压变形contain 改变图片的比例 li{width: ( 345 / vw );height: ( 108 / vw );img{width: 100%;height: 100%;object-fit: cover;}}
5、固定定位出现的问题
1需要定位的区域需要设置width:100%;
2设置需要固定定位盒子position:fixed;以及left、top等方位。
3固定定位元素脱标与之相邻的盒子需要加margin不然会重叠。
6、运用less写法公共样式不要嵌套到父级中
否则无法达到效果
