HTML/CSS

CSS常见问题总汇

字数:2381    阅读时间:12min
阅读量:4697

一、如何清除浮动

在使用div布局的时候,经常会使用到float来使元素浮动到需要的位置。使用浮动之后div就会脱离普通文档流,这个时候你如果没有设置div的高度的话就会产生高度塌陷的问题,而且有可能会导致兄弟元素出现排版混乱等问题。为了解决这些问题我们通常需要清除浮动:

1.使用clear属性清除浮动

(1).利用伪类清除浮动(常用)

(2).利用空标签清除浮动(会产生大量无用空标签不推荐)

2.触发BFC
  • 什么是BFC:
    Block Formatting Context(块级格式化上下文),指页面中一个独立的渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。 可以把它看作是一个独立的空间,这个空间内的元素怎样布局,与空间外的元素毫不相干
  • 如何触发BFC:
    float:的值不能为none(可以是 left,right,inherit)
    overflow:的值不能为visible(可以是hidden,scroll,auto)
    position:的值不为relative和static(可以是 fixed,absolute,inherit) display:table-cell, table-caption, inline-block中的任何一个

举个栗子:为浮动元素父级添加 overflow:hidden 就可清除浮动;只要能触发BF都可以清除浮动具体使用什么方式触发看项目需求咯

二、如何让元素水平垂直居中

1.行内元素居中

(1).让行内文字居中:text-align:center(水平居中),line-height:height(垂直居中)

(2).让行内盒子居中:(这种方法垂直居中,需要有一个元素的高与父级元素高相同才行)

2.块级元素居中

(1).定位

3.flex居中

这里先看flex是如何实现水平垂直居中的

补充一下flex布局知识
  Flex是lexible Box 的缩写,就是"弹性布局" 。由于兼容行的问题(ie10+),现阶段flex广泛用于移动端的布局
  给块级flex布局:display:flex;给行内元素flex布局:display:inline-flex;flex有两个轴方向,一个是主轴,一个是交叉轴(我们可以自定义主轴方向);flex布局分为父级的"容器"和子级的"项目"组成;"容器"和"项目"上分别由六个属性可以设置:

  • 容器属性
    1. flex-direction (设置主轴方向)
      • row 默认值 主轴方向是水平 从左到右
      • row-reverse 主轴方向是水平 从右到右左
      • column 主轴方向是垂直 从上到下
      • column-reverse 主轴方向是垂直 从下到上
    2. flex-wrap (设置子项目是否换行显示)
      • nowrap 不换行
      • wrap 换行,第一行在上边
      • wrap-reverse 换行,第一行在下边
    3. flex-flow (是 flex-direction 和 flex-wrap 的缩写)
    4. justify-content (整个子项在主轴(水平)方向的对齐和分布方式)
      • flex-start 默认值 主轴起点(左对齐)
      • flex-end 主轴末尾(右对齐)
      • center 主轴中间(居中)
      • space-between 两端对齐,项目之间的间隔都相等
      • space-around 每个项目两侧的间隔相等;所以,项目之间的间隔比项目与边框的间隔大一倍
      • space-evenly 每一项间隔都相等,包括项目与边框之间的距离
    5. align-content (整个子项在交叉轴(垂直)方向上的对齐和布局方式,只有一条交叉轴时无效)
      • flex-start 与交叉轴的起点对齐 (上对齐)
      • flex-end 与交叉轴的终点对齐 (下对齐)
      • center 与交叉轴的中点对齐 (垂直对齐)
      • space-between 与交叉轴两端对齐,轴线之间的间隔平均分布
      • space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
      • stretch 默认值 轴线占满整个交叉轴
    6. align-items (每个子项在交叉轴(垂直)方向的对齐和分布方式)
      • flex-start 交叉轴的起点对齐(上对齐)
      • flex-end 交叉轴的终点对齐(下对齐)
      • center 交叉轴的中点对齐(垂直对齐)
      • baseline 项目的第一行文字的基线对齐
      • stretch 默认值 如果项目未设置高度或设为auto,将占满整个容器的高度
  • 项目属性
    1. order (改变某个子项的排列位置;0默认位置, 数值越小,排列越靠前 )
    2. flex-grow (某个子项目的放大的比例,放大占用的是所有子项目的剩余空间;默认值是0,如果属性都为1,它们将等分剩余空间 )
    3. flex-shrink (某个子项目的收缩比例占用的也是剩余空间;默认值是1,设置0是不收缩,所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小)
    4. flex-basis ( 分配剩余空间之前元素的默认大小,默认是auto,可以设置width;一般不用,设置了width就不够弹性布局了)
    5. flex ( flex-grow, flex-shrink, flex-basis的缩写)
    6. align-self (某个子项目的垂直对齐方式,可覆盖父级的align-item;默认是auto,继承父级的对齐方式)

在Flex布局中,子项设置float,clear以及vertical-align属性都是没有用的 . flex布局时沿着轴线进行布局的,可以说是'一维布局' ,如果你需要'二维布局'方案的话可以试试阮一峰Grid,以及Grid和Flex的区别

野生小园猿
励志做一只遨游在知识海洋里的小白鲨
查看“野生小园猿”的所有文章 →

发表评论

邮箱地址不会被公开。

相关推荐