文章目录

  • 1 CSS响应式布局
  • 1.1 `name="viewport"`
  • 1.2 媒体查询
  • 1.3 百分比布局
  • 1.4 rem布局
  • 1.5 使用视口单位
  • 1.6 图片响应式
  • 1.6.1 使用 max-width
  • 1.6.2 使用 background-image
  • 1.7 成型方案
  • 2 显示模式
  • 2.1 块级元素(block)
  • 2.2 行内元素(inline)
  • 2.3 行内块元素( inline-block)
  • 3.盒子模型
  • 3.1 box-sizing
  • 4 实现一个div溢出的元素用...表示
  • 5 实现水平垂直居中的方式
  • 6 消除`float`浮动带来的影响
  • 7 h5和css3新属性
  • 8 Flex布局


1 CSS响应式布局

1.1 name="viewport"

设置视图标签(viewport)来告诉浏览器,使用设备的宽度作为视图宽度禁止初始的缩放。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

1.2 媒体查询

媒体查询可以针对不同的媒体类型(screen print)定义不同的样式

媒体查询根据 条件判断 告诉浏览器如何针对不同的宽度渲染页面

/* 随着屏幕宽度增大或减小的时候,后面的样式会覆盖前面的样式 */
/* 移动端优先使用min-width */
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* PC端优先使用max-width */
/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}

1.3 百分比布局

  • border-radiustranslate 的百分比,是相对于自身
  • paddingmarigin 的百分比,相对于直接父元素的width
  • height, width; top, bottom; left, right,都是相对于直接父元素

缺点: 各属性使用百分比,相对父元素的属性并不是唯一的。导致百分比布局很复杂。

1.4 rem布局

  • em:相对于父级元素font-size大小。rem:指的是相对于HTML根元素font-size大小。 默认html字体大小为16px,即16px=1rem
  • 根元素的 font-size 提供了一个基准,其他元素以 rem 为固定单位定义大小。
  • 根据视图容器的大小,可以使用媒体查询或者JS动态修改根元素 font-size,其他元素也会发生响应式的变化。

1.添加resize事件监听,回调函数可以改变rem的大小

function refreshRem() {
    var docEl = document.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
window.addEventListener('resize', refreshRem);

2.利用媒体查询,以rem为单位设置不同尺寸设备下的字体大小

@media screen and (max-width: 1440px){
    html {
      font-size: 70% !important;
    }
  }
  @media screen  and (min-width: 1441px) and (max-width: 1680px){
    html {
      font-size: 75% !important;
    }
  }
  @media  screen and (min-width: 1681px){
    html {
      font-size: 80% !important;
    }
  }

1.5 使用视口单位

  • vw(viewWeight)相对于视窗的宽度1vw 等于视口宽度的1%,即视窗宽度是100vw
  • vh(viewHeight) 相对于视窗的高度,1vh 等于视口高度的1%,即视窗高度是100vh
  • vmin vw和vh中的较小值
  • vmax vw和vh中的较大值

1.6 图片响应式

1.6.1 使用 max-width

img {
    display: inline-block; // 元素相对于周围内容以内联形式呈现,但可以设置宽度和高度
    max-width: 100%;
    height: auto; // 保证图片进行等比缩放而不至于失真
}

max-width :保证图片最大宽度为其容器的100%。如果图片宽度超过了其容器,图片会缩放,占满最大可用空间。

不能用 width: 100% 。这条规则会导致他显示的跟容器始终一样宽。在容器比图片宽的多的情况下,图片被无限拉伸。

1.6.2 使用 background-image

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

1.7 成型方案

  • Flex弹性布局
  • Grid网格布局
  • Col栅格系统

2 显示模式

2.1 块级元素(block)

块级元素的特点:

  1. 元素独占一行,在未设置宽度时,其宽度随父容器的宽度
  2. 可设置widthheightmarginpadding属性
  3. 可以容纳内联元素和其他块元素

常见的块级元素有:

<h1~6>、<p>、<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>、<div>等。

用法:dispaly:block

2.2 行内元素(inline)

行内元素的特点:

  1. 元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. 元素设置width,height属性无效。
  3. 元素的marginpadding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;
  4. 但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

常见的行内元素:

<a>、<span>、<img>

用法:dispaly:inline

2.3 行内块元素( inline-block)

行内块元素的特点:

  1. 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
  2. 默认宽度就是它本身内容的宽度。
  3. 高度,行高、外边距以及内边距都可以控制。

用法:

display:inline-block

让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。

3.盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距,边框,内边距,和内容。

面试scss和less_前端

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

3.1 box-sizing

box-sizing 属性允许你以某种方式定义某些元素的盒模型

box-sizing: content-box|border-box|inherit:
  1. W3C 标准盒模型(浏览器默认):
    content-boxpaddingborder 不被包含在定义的widthheight之内。
  2. 面试scss和less_媒体查询_02

  3. IE 盒模型(开发常用):
    border-boxpaddingborder 被包含在定义的widthheight之内。
  4. 面试scss和less_媒体查询_03

4 实现一个div溢出的元素用…表示

方法一:overflow方式

.tree-text-over-style {
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 100%;
    cursor: pointer;
  }

css3:box布局

-webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;

方法二:lodash.truncate 截断字符串,如果字符串超出了限定的最大值。 被截断的字符串后面会以 omission 代替,omission 默认是 “...”。

import {truncate} from "lodash";

<Typography>{truncate(node.name, {length: 10, separator: "..."})}</Typography>

方法三:js方法

/* 切割字符串 */
  const truncateTitle = (source = '',length,truncate) => {
    if (source.length > length) {
      let pre = source.substring(0,length);
      return pre + truncate;
    } else {
      return source;
    }
  };

5 实现水平垂直居中的方式

1.弹性布局

.parent {
    display:flex;
    /* 定义项目在主轴上如何对齐 */
    justify-content:center;
    align-items: center;
}

2.绝对定位

.child{
    position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

3.CSS3 transform translate 转换平移

.child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 500px;
	height: 500px;
	background: #008000;
}

4.Grid布局

.parent{
 height: 100vh;
 display: grid;
 justify-content: center;
 align-content: center;
 }
.child{
 width: 500px;
 height: 500px;
 background: #008000;
 }

5.line-height=height + text-align

.parent{
 height: 100vh;
 line-height:100vh;
 text-align: center;
}
.child{
 display: inline-block;
 vertical-align: middle;
}

6 消除float浮动带来的影响

浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。

消除浮动:
1.设置after伪元素(公司常用),设置 clear:both属性

.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

2.触发BFChaslayout:设置父元素 overflow 或者display:table 属性

7 h5和css3新属性

1.H5

  • 语义化标签(nav、aside、dialog、header、footer等)
  • canvas
  • 拖放相关api
  • Audio、Video
  • 获取地理位置
  • 更好的input校验
  • web存储(localStorage、sessionStorage)
  • webWorkers(类似于多线程并发)
  • webSocket

2.CSS3

  • 选择器
  • 边框(border-image、border-radius、box-shadow)
  • 背景(background-clip、background-origin、background-size)
  • 渐变(linear-gradients、radial-gradents)
  • 字体(@font-face)
  • 转换、形变(transform)
  • 过度(transition)
  • 动画(animation)
  • 弹性盒模型(flex-box)
  • 媒体查询(@media)

8 Flex布局

justify-content

justify-content属性定义了子元素沿主轴方向的对齐方式,用来当子元素大小最大的时候,分配主轴上的剩余空间。也可以当子元素超出主轴的时候用来控制子元素的对齐方式。


align-content

align-content是当父元素所包含的行在交叉轴方向有空余部分时如何分配空间。与justify-content在主轴上如何对单个子元素对齐很相似。

align-items

align-items定义了子元素在交叉轴方向的对齐方向,这是在每个子元素仍然在其原来所在行的基础上所说的。可以看作是交叉轴上的justify-content属性;


flex-direction: row | row-reverse | column | column-reverse;   //flex-direction定义flex布局的主轴方向。


row: 行方向,flex-direction的默认值,在ltr(left to right, 从左到右)排版方式下从左到右排列,在rtl(right to left, 从右到左)排版方式下从右到左排列。
row-reverse: 行反方向,在ltr中从右向左,在rtl中从左到右。
column: 列方向,与row相似,只是从上到下。
column-reverse: 列反方向,与row-reverse相似,只是从下岛上。