HTMLCSS垂直水平居中主要有3种方式定位、flex布局和grid栅格布局定位采⽤⼦绝⽗相定位⽅式(⽗亲也可以是绝对定位)通过边偏移top: 50%; 和left: 50%; 让⼦盒⼦往下和往右移动⽗盒⼦⾼度和宽度的⼀半再通过位移transform: translate(-50%, -50%); 让⼦盒⼦往上和往左移动⾃身⾼度和宽度的⼀半body,html{ height: 100%; width: 100%; } ⽗盒⼦ { position: relative; } ⼦盒⼦ { height: 100px width: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }flex布局兼容性不太好不兼容ie9及以下ie浏览器通过display: flex;把⽗盒⼦设置为flex容器给⽗盒⼦添加 justify-content: center; 让⼦元素沿主轴居中space-between 两端对⻬项⽬之间的间隔都相等。space-around 每个项⽬两侧的间隔相等。所以项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍给⽗盒⼦添加 align-items: center; 让⼦元素沿侧轴居中⽗盒⼦ { display: flex; justify-content: center; align-items: center; }flex布局中只需要给盒⼦添加 display: flex; 就可以把盒⼦设置为flex容器⽽他的直接⼦元素就成了flex项⽬然后通过给flex容器和flex项⽬添加flex系列样式进⾏布局。注:使⽤ Flex 布局以后⼦元素的 float 、 clear 和 vertical-align 属性将失效grid布局给⽗盒⼦添加display: grid; 采⽤栅格布局给⽗盒⼦添加 justify-items: center; 让⼦元素沿主轴居中给父盒子添加 align-items: center; 让⼦元素沿侧轴居中⽗盒⼦ { display: grid; justify-items: center; align-items: center; }Flex 是一维布局Grid 是二维布局注IE10以下不支持REMrem是一个相对单位1rem 根元素html的font-size的大小1em 父元素font-size的大小让页面上的元素采用rem作为单位只要改变html的根元素的font-size大小页面上的所有元素都可以变大变小清除浮动解决父元素因为子元素浮动而导致的高度塌陷从而避免后续页面布局错乱额外标签法给父元素设置高度父元素触发 BFC BFC:一个独立的布局容器内外互不影响 例给父元素添加 overflow: hidden 或 display: flexPS:如果内容过长被裁剪或产生滚动条可能会隐藏掉部分内容伪元素清除法推荐after 伪元素.clearfix:after { content: ; /_ 伪元素必须有的属性 _/ display: block; /_ 让伪元素成为块级元素 _/ clear: both; /_ 核心清除浮动 _/ height: 0; /_ 避免伪元素撑高父元素 _/ visibility: hidden; /_ 隐藏伪元素 _/ } .clearfix { _zoom: 1; /_ 兼容 IE6/7 的写法现代浏览器可以省略 \*/ }双伪元素写法.clearfix:before, .clearfix:after { content: ; display: table; /_ 创建 BFC防止外边距折叠 _/ } .clearfix:after { clear: both; /_ 清除浮动 _/ }H5C3新特性H5语义化标签多媒体标签视频video、音频audioCanvas 绘图本地存储localStorage、sessionStorage比 Cookie 更大、更安全Geolocation获取地理位置WebSocket全双工通信用于聊天室、实时数据navigator.geolocation.getCurrentPosition(function(pos) { console.log(纬度 pos.coords.latitude); });CSS颜色新增RGBA、HSLA模式rgba(红色, 绿色, 蓝色, 透明度) hsla(色相, 饱和度%, 亮度%, 透明度)文字阴影text-shadow边框圆角border-radius、边框阴影box-shadow盒子模型box-sizing背景渐变/* 线性渐变 */ .linear { background: linear-gradient(to right, red, blue); background: linear-gradient(45deg, red, yellow, green); } /* 径向渐变 */ .radial { background: radial-gradient(circle, red, blue); }过渡transition.box { width: 100px; transition: all 0.5s ease; /* 属性 时长 缓动函数 */ } .box:hover { width: 200px; /* 平滑过渡到 200px */ }动画animation/* 定义动画 */ keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } /* 使用动画 */ .box { animation: move 2s infinite; /* 动画名 时长 循环 */ /* animation: name duration timing-function delay iteration-count direction; */ }新增选择器属性选择器、伪类选择器、伪元素选择器2D/3D 转换/* 2D */ .box { transform: translate(50px, 100px); /* 移动 */ transform: rotate(45deg); /* 旋转 */ transform: scale(1.5); /* 缩放 */ transform: skew(10deg, 20deg); /* 倾斜 */ /* 组合使用 */ transform: translate(50px) rotate(45deg) scale(1.2); } /* 3D */ .box { transform: rotateX(45deg); /* 绕X轴旋转 */ transform: rotateY(45deg); /* 绕Y轴旋转 */ transform: rotateZ(45deg); /* 绕Z轴旋转 */ transform: translate3d(10px, 20px, 30px); transform-style: preserve-3d; /* 开启3D空间 */ perspective: 1000px; /* 视距 */ }SRC和HREFsrc用于替换当前标签的内容href用于建立与外部资源的联系srchref本质把资源拿进来变成自己的一部分指向资源建立联系对页面影响资源缺失则功能/内容缺失资源缺失可能样式不对但内容还在典型标签img、script、videoa、link下载方式串行暂停其他并行同时下载两种盒子模型标准盒子模型box-sizing: content-box;默认元素实际占用宽度 width padding-left padding-right border-left border-righ元素实际占用高度 height padding-top padding-bottom border-top border-bottomIE 盒子模型怪异盒子box-sizing: border-box;元素实际占用宽度 width已经包含了 padding 和 border内容宽度 width - padding-left - padding-right - border-left - border-rightCSS样式引入方法行内样式style标签内写css内嵌样式HTML标签内联样式(HTML 的head内会避免页面出现无样式内容闪烁让样式在内容渲染前就加载好)外部样式通过link标签引入导入样式使用 import 引入!-- link并行下载速度快 -- link relstylesheet hrefa.css link relstylesheet hrefb.css !-- import串行下载a.css 下载完才下 b.css -- style import a.css; import b.css; /style优先级行内样式 内嵌样式 外部样式 导入样式link和import区别link是 HTML 标签import是 CSS 语法link可以并行下载import串行下载link没有兼容性问题import低版本 IE 不支持link可以通过 JS 操作 DOM 动态加载import不行
前端知识点整理
HTMLCSS垂直水平居中主要有3种方式定位、flex布局和grid栅格布局定位采⽤⼦绝⽗相定位⽅式(⽗亲也可以是绝对定位)通过边偏移top: 50%; 和left: 50%; 让⼦盒⼦往下和往右移动⽗盒⼦⾼度和宽度的⼀半再通过位移transform: translate(-50%, -50%); 让⼦盒⼦往上和往左移动⾃身⾼度和宽度的⼀半body,html{ height: 100%; width: 100%; } ⽗盒⼦ { position: relative; } ⼦盒⼦ { height: 100px width: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }flex布局兼容性不太好不兼容ie9及以下ie浏览器通过display: flex;把⽗盒⼦设置为flex容器给⽗盒⼦添加 justify-content: center; 让⼦元素沿主轴居中space-between 两端对⻬项⽬之间的间隔都相等。space-around 每个项⽬两侧的间隔相等。所以项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍给⽗盒⼦添加 align-items: center; 让⼦元素沿侧轴居中⽗盒⼦ { display: flex; justify-content: center; align-items: center; }flex布局中只需要给盒⼦添加 display: flex; 就可以把盒⼦设置为flex容器⽽他的直接⼦元素就成了flex项⽬然后通过给flex容器和flex项⽬添加flex系列样式进⾏布局。注:使⽤ Flex 布局以后⼦元素的 float 、 clear 和 vertical-align 属性将失效grid布局给⽗盒⼦添加display: grid; 采⽤栅格布局给⽗盒⼦添加 justify-items: center; 让⼦元素沿主轴居中给父盒子添加 align-items: center; 让⼦元素沿侧轴居中⽗盒⼦ { display: grid; justify-items: center; align-items: center; }Flex 是一维布局Grid 是二维布局注IE10以下不支持REMrem是一个相对单位1rem 根元素html的font-size的大小1em 父元素font-size的大小让页面上的元素采用rem作为单位只要改变html的根元素的font-size大小页面上的所有元素都可以变大变小清除浮动解决父元素因为子元素浮动而导致的高度塌陷从而避免后续页面布局错乱额外标签法给父元素设置高度父元素触发 BFC BFC:一个独立的布局容器内外互不影响 例给父元素添加 overflow: hidden 或 display: flexPS:如果内容过长被裁剪或产生滚动条可能会隐藏掉部分内容伪元素清除法推荐after 伪元素.clearfix:after { content: ; /_ 伪元素必须有的属性 _/ display: block; /_ 让伪元素成为块级元素 _/ clear: both; /_ 核心清除浮动 _/ height: 0; /_ 避免伪元素撑高父元素 _/ visibility: hidden; /_ 隐藏伪元素 _/ } .clearfix { _zoom: 1; /_ 兼容 IE6/7 的写法现代浏览器可以省略 \*/ }双伪元素写法.clearfix:before, .clearfix:after { content: ; display: table; /_ 创建 BFC防止外边距折叠 _/ } .clearfix:after { clear: both; /_ 清除浮动 _/ }H5C3新特性H5语义化标签多媒体标签视频video、音频audioCanvas 绘图本地存储localStorage、sessionStorage比 Cookie 更大、更安全Geolocation获取地理位置WebSocket全双工通信用于聊天室、实时数据navigator.geolocation.getCurrentPosition(function(pos) { console.log(纬度 pos.coords.latitude); });CSS颜色新增RGBA、HSLA模式rgba(红色, 绿色, 蓝色, 透明度) hsla(色相, 饱和度%, 亮度%, 透明度)文字阴影text-shadow边框圆角border-radius、边框阴影box-shadow盒子模型box-sizing背景渐变/* 线性渐变 */ .linear { background: linear-gradient(to right, red, blue); background: linear-gradient(45deg, red, yellow, green); } /* 径向渐变 */ .radial { background: radial-gradient(circle, red, blue); }过渡transition.box { width: 100px; transition: all 0.5s ease; /* 属性 时长 缓动函数 */ } .box:hover { width: 200px; /* 平滑过渡到 200px */ }动画animation/* 定义动画 */ keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } /* 使用动画 */ .box { animation: move 2s infinite; /* 动画名 时长 循环 */ /* animation: name duration timing-function delay iteration-count direction; */ }新增选择器属性选择器、伪类选择器、伪元素选择器2D/3D 转换/* 2D */ .box { transform: translate(50px, 100px); /* 移动 */ transform: rotate(45deg); /* 旋转 */ transform: scale(1.5); /* 缩放 */ transform: skew(10deg, 20deg); /* 倾斜 */ /* 组合使用 */ transform: translate(50px) rotate(45deg) scale(1.2); } /* 3D */ .box { transform: rotateX(45deg); /* 绕X轴旋转 */ transform: rotateY(45deg); /* 绕Y轴旋转 */ transform: rotateZ(45deg); /* 绕Z轴旋转 */ transform: translate3d(10px, 20px, 30px); transform-style: preserve-3d; /* 开启3D空间 */ perspective: 1000px; /* 视距 */ }SRC和HREFsrc用于替换当前标签的内容href用于建立与外部资源的联系srchref本质把资源拿进来变成自己的一部分指向资源建立联系对页面影响资源缺失则功能/内容缺失资源缺失可能样式不对但内容还在典型标签img、script、videoa、link下载方式串行暂停其他并行同时下载两种盒子模型标准盒子模型box-sizing: content-box;默认元素实际占用宽度 width padding-left padding-right border-left border-righ元素实际占用高度 height padding-top padding-bottom border-top border-bottomIE 盒子模型怪异盒子box-sizing: border-box;元素实际占用宽度 width已经包含了 padding 和 border内容宽度 width - padding-left - padding-right - border-left - border-rightCSS样式引入方法行内样式style标签内写css内嵌样式HTML标签内联样式(HTML 的head内会避免页面出现无样式内容闪烁让样式在内容渲染前就加载好)外部样式通过link标签引入导入样式使用 import 引入!-- link并行下载速度快 -- link relstylesheet hrefa.css link relstylesheet hrefb.css !-- import串行下载a.css 下载完才下 b.css -- style import a.css; import b.css; /style优先级行内样式 内嵌样式 外部样式 导入样式link和import区别link是 HTML 标签import是 CSS 语法link可以并行下载import串行下载link没有兼容性问题import低版本 IE 不支持link可以通过 JS 操作 DOM 动态加载import不行
