AI智能
改变未来

css居中等问题搜集

定位方式
postion:absolute(相对于父元素)、fixed(相对于浏览器窗口)、relative(相对于其正常位置定位)、static、inherit

margin重叠:
在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下:
a、全部都为正值,取最大者;
b、不全是正值,则都取绝对值,然后用正值减去最大值;
c、没有正值,则都取绝对值,然后用0减去最大值。

BFC:
(1) 内部的Box会在垂直方向,一个接一个地放置。
(2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
(3)每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
(4)BFC的区域不会与float box重叠。
(5) BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
(6)计算BFC的高度时,浮动元素也参与计算。
创建BFC

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

居中

justify-content:\'center\' //水平居中align-items:\'center\'   //垂直居中//水平居中postion:\'absolute\';left:\'50%;transform:\'translateX(-50%)\';/垂直居中postion:\'absolute\';top:\'50%;transform:\'translateX(-50%)\';   //  transform: translate(-50%,-50%);

display:none和visibility:hidden区别
(1)空间占据 前者不占,后者占
(2)重排和重绘 前者重排重绘,后者只重绘
(3)“继承” 前者父节点隐藏,子节点也隐藏,后者子节点可显隐(visibility:visible)
(4)visibility不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。
CSS3的transition支持visibility属性,但是并不支持display,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

CSS盒子模型
(1)标准模型 boxSizing:“content-box”’

(2)ie模型 boxSizing:“border-box”

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css居中等问题搜集