CSS之常见布局|常用单位|水平垂直居中

时间:2023-12-24 17:15:31

常见布局:

  1. 流式布局:百分比布局,宽高、margin、pinding都是百分比

  2. 固定布局:盒子的宽高固定,如:margin、padding等

  3. 浮动布局:float

  4. 弹性布局:flex(Webkit内核的浏览器,必须加上-webkit前缀。)

  5. 响应式布局:媒体查询,如 &:hover

  6. 定位布局:position

  弹性布局:

    概念:用Flex布局的元素,称为Flex容器,他所有的子元素自动成为成员,成为Flex项目

    例举作用:

      · 可以通过设置项目(flex容器中的子元素)的 flex 值来实现自动伸缩

      · 可以通过设置 justify-content(主轴的排列方式) 或者 align-items(交叉轴的排列方式) 的为 center 来实现水平垂直居中

    容器的属性:  

   flex-direction:row | row-reverse | column | column-reverse;//决定主轴的方向(即项目的排列方向)。
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。 flex-wrap//默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。 flex-flow:<flex-direction> || <flex-wrap>;//是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 justify-content:flex-start | flex-end | center | space-between | space-around;//属性定义了项目在主轴上的对齐方式。
具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 align-items:flex-start | flex-end | center | baseline | stretch;//定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 align-content//定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

   项目属性:

// 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
order: <integer>
// 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-grow: <number>
// 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-shrink:<number>;
// 定义了在分配多余空间之前,项目占据的主轴空间(main size)。
// 浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex-basis:<length> | auto
//是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
// 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
// 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,
// 表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline |stretch;

实现水平垂直居中的方式

  未知盒子宽高

    1. 使用 inline-block 和 text-align 及 vertical-align

    2. 使用table-cell(模拟表格), inline-block实现 (主要设置 text-align / vertical-align 属性)

    3. 使用弹性布局实现水平垂直居中 (justify-content: center; align-items: center;)

    4. 使用transform实现垂直居中

  2. 使用绝对定位和边距的方式实现(已知盒子宽高)

常用单位及区别

  px:相对长度单位。相对于屏幕分辨率而言

  em:值不固定,继承 父级元素 的字体大小

  rem:值根据 根元素(html)的字体大小而言的

  移动端rem单位大小自适应自适应代码(直接设置 62.5% 会出现些一些小bug)

/*手机自适应*/
(function (doc,win) {
let docEl = doc.documentElement // 根元素html
//判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
let recalc = function () {
let clientWidth = docEl.clientWidth; if (!clientWidth) return;
// if(clientWidth>=560){
// clientWidth=560;
// 把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效 果。
// }
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
recalc();
//addEventListener事件方法接受三个参数:
//第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔
win.addEventListener(resizeEvt, recalc, false);
  //绑定浏览器缩放与加载时间
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

  

永远不要自以为是,在神面前你只是个愣头青