文章目录
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-radius、translate的百分比，是相对于自身padding、marigin的百分比，相对于直接父元素的widthheight,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%，即视窗宽度是100vwvh（viewHeight） 相对于视窗的高度，1vh等于视口高度的1%，即视窗高度是100vhvminvw和vh中的较小值vmaxvw和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）
块级元素的特点：
- 元素独占一行，在未设置宽度时，其宽度随父容器的宽度
- 可设置
width，height，margin，padding属性 - 可以容纳内联元素和其他块元素
常见的块级元素有：
<h1~6>、<p>、<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>、<div>等。
用法：dispaly:block
2.2 行内元素（inline）
行内元素的特点：
- 元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- 元素设置
width,height属性无效。 - 元素的
margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果； - 但竖直方向的
padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。
常见的行内元素：
<a>、<span>、<img>
用法：dispaly:inline
2.3 行内块元素（ inline-block）
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
- 默认宽度就是它本身内容的宽度。
- 高度，行高、外边距以及内边距都可以控制。
用法：
display:inline-block
让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。
3.盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距，和内容。
Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。
3.1 box-sizing
box-sizing 属性允许你以某种方式定义某些元素的盒模型
box-sizing: content-box|border-box|inherit:
-
W3C 标准盒模型（浏览器默认）：
content-box：padding和border不被包含在定义的width和height之内。
-
IE 盒模型（开发常用）：
border-box：padding和border被包含在定义的width和height之内。
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.触发BFC或haslayout：设置父元素 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相似，只是从下岛上。
扫一扫
4751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
