-
position 定位基准
- absolute, relative, static,fixed
-
布局模型
- 流动模型(Flow)
- BFC 即 Block Formatting Contexts (块级格式化上下文)
- 具有BFC特性的元素可以看做是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素
- 只要元素满足下面任一条件即可触发BFC特性:
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
- 问题案例:margin塌陷问题:在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象。可以用overflow:hidden产生bfc来解决
- 问题案列:高度塌陷问题,在通常情况下父元素的高度会被子元素撑开,而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌,上下边界重合,这时就可以用BFC来清除浮动了
- 问题案例:div浮动兄弟这该问题:由于左侧块级元素发生了浮动,所以和右侧未发生浮动的块级元素不在同一层内,所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden,触发BFC来解决遮挡问题。这个方法可以用来实现两列自适应布局,效果不错,这时候左边的宽度固定,右边的内容自适应宽度
- 浮动模型(Float)
- 层模型(Layer)
- 流动模型(Flow)
-
CSS垂直居中的8种方法
- 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block
- 父元素display:flex;而子元素align-self:center;
- 为父元素添加伪元素:before,vertical-align:middle,display:inline-block
- 父元素display:table,子元素display:table-cell的方式实现CSS垂直居中
- 创建一个隐藏节点#hide,使得隐藏节点的height值为剩余高度的一半即可
- 子元素的position:relative,再通过translateY即可定位到垂直居中的位置
- position:relative;top:50%;transform: translateY(-50%);transform中的translate偏移的百分比就是相对于元素本身的尺寸而言的
- 子元素的line-height值等于父元素的height(行内元素)
-
CSS一列固定,一列自适应
- float + margin
- float + overflow
- .parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/宽度为剩余宽度/
} - .parent {
display: flex;
}
.left {
width: 100px;
margin-left: 20px;
}
.right {
flex: 1;
}
-
flex
- flex-basis该属性来设置该元素的宽度。当然,width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值
- flex-grow该属性来设置,当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间。flex-grow的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。值越大,索取的越厉害
- flex-shrink该属性来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。flex-shrink的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。
CSS常见问题
最新推荐文章于 2024-07-10 10:04:49 发布