摘要:或表示红色,表示绿色,表示蓝色,也可取其他数值来指定颜色。针对多字节文字,中文句子也是单词允许在单词内换行。
一、HTML基础 html常见元素和理解
html常见元素分类
head区元素:(不会在页面上留下直接内容)
meta
title
style
link
script
base
body区:
div/selection/article/aside/header/footer
p
span/em/strong
table/thead/tbody/tr/td
ul/ol/li/dl/dt/dd
a
form/input/select/textarea/button
// 指定一个基础路径,所有的路径都是以这个为基准 //viewport表示视图的大小 //适配移动端第一步,viewport
HTML重要属性
a[href,target]
target:打开窗口。也可以设置框架中在哪个框架打开
img[src,alt]
alt:图片不可用时候,文字显示出来
table td[colspan,rowspan]
form[target,method,enctype](有表单的地方都建议放上form)
target:表单提交到哪儿
enctype:指定编码,如果上传文件指定要用form-data
input[type,value]
button[type]
select>option[value]
label[for]
label与input进行关联
如何理解html
HTML“文档”
描述文档的结构
有区块和大纲
"大纲"作用
更好的让机器、搜索引擎、蜘蛛很好的理解结构
html的语义化
html版本
HTML4/4.01(SGML)浏览器做很多的容错和修正工作
XHTML(XML)要求非常严格,严格要求编码习惯
HTML5(基于HTML4)
html5新增内容
新增区块标签
section
article
nav
aside //一般不出现在大纲中,表示不重要的广告类
表单增强
日期、时间、搜索
表单验证
placehold自动聚焦
html5新增语意
header/footer头尾
section/article区域
nav导航
aside不重要内容
em/strong强调
i //icon
元素分类按默认样式分
块级block
行内inline
inline-block
HTML分类法
嵌套关系默认样式和reset
块级元素可以包含行内元素
块级元素不一定能包含块级元素(p标签不能包含div)
行内元素一般不能包含块级元素(a>div 合法,html5中a是transparent元素)
HTML标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉,这就是css reset。
Normalize.css
面试题 doctype的意义是什么?让浏览器以标准模式渲染
让浏览器知道元素的合法性
HTML、XHTML、HTML5的关系HTML属于SGML
XHTML属于XML,是HTML进行XML严格化的结果
HTML5不属于SGML或者XML,比XHTML宽松
HTML5有什么变化新的语义化标签
表单增强(新的元素,表单验证)
新的API(离线、音视频、图形、实时通信、本地存储、设备能力)
Canvas+WEBGL等技术,实现无插件的动画以及图像、图形处理能力;
本地存储,可实现offline应用;
websocket,一改http的纯pull模型,实现数据推送的梦想;
MathML,SVG等,支持更加丰富的render;
em和i有什么区别em是语义化的标签,表强调
i是纯样式的标签,表斜体
HTML5中i不推荐使用,一般用作图标
语义化的意义是什么开发者容易理解
机器容易理解结构(搜索、读屏软件)
有助于SEO
semantic microdata
哪些元素可以自闭合表单元素input
图片img
br hr
meta link
HTML和DOM的关系HTML是‘死’的(字符串,没有结构)
DOM由HTML解析而来,是活的(是树,有结构)
JS可以维护DOM
property和attribute的区别attribute是‘死’的(属性,写在HTML中)
property是‘活’的(特性,DOM对象中)
attribute不会影响property,property也不会影响attribute
form作用直接提交表单
使用submit/reset按钮
便于浏览器保存表单
第三方库可以整体提取值
第三方库可以进行表单验证
二、css基础cascading style sheet层叠样式表选择器
选择器简介
用于匹配HTML元素
分类和权重
解析方式和性能
浏览器的解析方式是从右往左反着,然后再往前验证,主要出于性能的考虑,更快速的匹配到指定元素(左边范围太广了,比如 值得关注的选择器 元素选择器 a{}
伪元素选择器 ::before{} //真实存在的容器 类选择器 .link{}
属性选择器 [type=radio]{}
伪类选择器 :hover{} //元素的状态
ID选择器 #id{}
组合选择器 [type=checkbox] + label{}
否定选择器 :not(.link){}
通用选择器 *{}
ID选择器器 +100 类 属性 伪类器 +10 元素 伪元素器 +1 其它选择器器 +0 #id .link a[href] 计算:
#id +100
.link +10
a +1
[href] +0 结果:111 只要有id选择器,就是最大,类选择器再多也不会进位,只能在自己位上 百位 十位 个位
!important优先级最高 元素属性优先级高 //元素的属性 > 外部样式表 (style标签,外部样式表)
相同权重后写的生效
字体、字重、颜色、大小、行高
背景、边框
滚动、换行
粗体、斜体、下划线
serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体,例如代码)
cursive(方正静蕾体) fantasy 指定多个字体,如果找不到会按照顺序使用其他字体,或者用同类字体 英文字体用Monaco,但是Monaco没有中文字体,所以如果碰到中文会使用PingFangSC,一个字体一个字体的找 字体族不需要引号,因为不是具体的字体 指定在mac系统上用PingFang SC,windows上用Microsoft Yahei,把单个平台独有的字体写到前面 自定义字体 网络字体:注意跨域
先把只有一个平台才有的写到最前面 引用远程字体有问题的话,要注意跨域问题 阿里巴巴的图标库,自选 iconfont.cn
行高由line-box决定
line-hight会撑起inline-box的高度,并不会影响本身布局的高度,但是会影响外部元素(line-box)
inline-box组成line-box,line-box高度是由inline-box决定 一般做垂直居中用line-height做就行了 默认情况是按照base-line对齐,如果要居中对齐就用vertical-align:middle
底线、顶线和文字的顶和文字的底是不一样的 原理:按照inline排版,如果按照inline排版的话,默认按照基线排版(base-line) 基线和底线之间有距离的,如果12px字体那么缝隙可能就是3px
解决方案:按照底线对齐,vertical-align:bottom 或者display:block
HSL H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360 S:Saturation(饱和度)。取值为:0.0% - 100.0% L:Lightness(亮度)。取值为:0.0% - 100.0% RGB(A) 背景图 background: webkit-linear-gradient( left, red, green); //老式写法 background: linear-gradient(to right,red, green) ; background: linear-gradient (45deg, red, green); background: linear-gradient( 135deg, red 0, green 50%, blue 100%) background: linear-gradient ( 135deg, transparent 0, transparent 49.5%,green 50%) background实现各种渐变背景,可以通过叠加实现,放射渐变
优点: 减少加载网页图片时对服务器的请求次数 提高页面的加载速度
缺点: 单个图片大小,考虑网络环境比较差的情况 内存使用问题。大量空白你就会最终使用大量的无用的空白。 维护比较麻烦, 一种文本格式,显示的是一串文本,而这串文本就是图片本身
优点 传输性能,减少http请求
缺点:
增大了体积的开销 图片本身提交增大1/3 增大css体积 增加了解码的开销 适用:小图标,例如:loading图 用法:一般用在构建中转,打包 线型 大小 颜色 原理:利用边框衔接过程是斜切
visible:内容直接显示,撑出容器
hidden:超出容器部分隐藏
scroll:超出容器滚动,始终显示滚动条
auto:超出容器滚动,当内容比较短不需要滚动条的时候不显示滚动条 在mac系统上收系统设置影响 字重(粗体) font-weight
斜体font-style:itatic
下划线text-decoration
指针cursor
Hack看起来不合法但生效的写法 主要用于区分不同的浏览器,只在特定的浏览器生效
缺点 难理解 难维护 易失效
替代方案 特性检测 针对性加class
使用注意 标准属性写到前面,hack写到后面
作用 浏览器兼容性
典型案例 checkbox tabs
早期以table为主(简单) 解析并不是流式的,以前可能等待时间长,现在已经可以流式布局 后来以技巧性布局为主(难) 现在有flexbox/grid(偏简单) 响应式布局是(必备知识) table表格布局 float浮动+margin inline-block布局 flexbox布局 display:table display:table-row #### display/position block inline inline-block:有宽高有可以与其他元素排在同一行
static:静态布局,按照文档流布局
relative:相对于元素本身的偏移,relative偏移时,元素所占据的文档空间不会产生偏移
absolute:从文档流脱离,相对于最近的父级absolute或者relative,如果父级不是的话,会一直网上到body
fixed:相对于屏幕/可视区域 定位于relatvie、absolute、fixed都可以设置z-index,数值越大附带 弹性盒子 盒子本来就是并列的 指定宽度即可 低版本IE不支持 出过三个版本,市面上各个浏览器都有对应的解析,会导致一些兼容性问题 移动浏览器基本兼容,react Native和微信小程序可以直接用来布局 弹性布局用法详解 元素“浮动” 脱离文档流 但不脱离文本流 形成“块”(BFC),inline元素也可以设置宽高(BFC背后的神奇原理) 位置尽量靠上 位置尽量靠左(右) float本意就是要做文字环绕、图文混排等内容的 上面贴着非float元素 旁边贴float元素 不影响其他块级元素位置 影响其他块级元素内部文本 从父级元素上“消失” 高度“塌陷”
让父元素形成BFC来接管自己的高度 overflow:auto/hidden 当里面的元素超出的时候自动滚动 用其他元素撑起来 兼容性好
两栏布局:
float:left(左)
margin-left:左元素的宽度(右)
三栏布局:记住“尽量往左靠,尽量往右靠”
float:left(左)
float:right(右)
中间元素写在最后,否则右边的float元素不会对其 margin-left:左元素的宽度 margin-right:右元素的宽度 像文本一样排block元素 没有清除浮动等问题 需要处理间隙 间隙来源:html中的空白
处理办法: 直接把两块html写在一起; 两块中间加一个注释;
父字体设置font-size:0;子块重新加上字体font-sizi:14px;
在不同的设备上正常使用 一般主要处理屏幕大小的问题
主要方法: 隐藏+折行+自适应空间 rem/viewport/media query 适配的第一部永远是加上viewport
viewport`可视区大小=屏幕大小`,有些设备默认屏幕宽度980px
如果固定使用width,可以使不同页面等比放大 也可以根据window.innerWidth动态计算页面的宽度 float布局:兼容性好 表格布局 display:table
float+margin布局(清理浮动)
inline-block布局(处理间隙)
flexbox布局(兼容性不是特别好) 前者相对于最近的absolute/relative
后者相对屏幕(viewport) 如果要兼容老的设备,fixed兼容性不是很好 原因:空白字符 解决:消灭字符(标签写到一起不要加空白,或者中间写上注释)或者消灭间距 清除浮动原理
让盒子负责自己的布局 overflow:hidden(auto)
::after{clear:both}(也可以用多带带的元素) 首先适配viewport(页面宽度和移动端适配)
rem/viewport/media query(大小方面的适配) 设计上:隐藏折行自适应 box-shadow text-shadow border-radius background clip-path 营造层次感(立体感) 充当没有宽度的边框 特殊效果 一个div画xx系列,可以用box-shadow,其他图形可以通过点,确定是可能有性能问题 立体感 印刷的品质感 圆角矩形 圆形(圆角足够大 border-radius:50%) 半圆/扇形 一些奇怪的角角 效果 纹理、图案 渐变 雪碧图动画 背景图尺寸适应方案 对容器进行裁剪 常见几何图形 自定义路径 clip-path支持动画且不改变容器大小 clip-path: inset(100px 50px); clip-path: circle(50px at 100px 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); 支持svg transform translate(translateZ 3D立体) scale skew(斜切) rotate 缺点:性能不是很好 复杂场景下出现渲染不一样问题 box-shadow outline border-radius:50% clip-path:(svg)
border-radius组合: 有无边框 边框粗细 圆角半径 视觉暂留作用 画面逐渐变化 愉悦感 引起注意 操作进行反馈 掩饰(程序在后台加载)
transition补间动画(中间的过程浏览器脑补起来)
keyframe关键帧动画(也是补间动画,但是有很多关键帧) 逐帧动画(特殊的逐帧动画,无法使用补间动画) 位置-平移(left/right/margin/transform) 方位-旋转(transform) 大小-缩放(transform) 透明度(opacity) 其他-线性变换(transform) [深入了解transition动画](https://www.cnblogs.com/xiaoh... transition: [动画类型] [动画时间] transition-delay //延迟多长时间执行 transition-delay:width 1s,background 3s; //多个效果叠加 transition-timing-function timing(easing):定义动画进度和时间的关系 linear ease-in-out 自定义贝塞尔曲线 相当于多个补间动画 与元素状态的变化无关 定义更加灵活 animation:run 1s linear;
animation-direction //reverse:反向
animation-fill-mode:forword //forwards,backwards决定动画最终停留在哪里
animation-iteration-count //infinite:循环次数
animation-play-state:pause //js控制它的停和动 每帧都是关键帧,中间没有补间过程 依然使用关键帧动画 属于关键帧动画中的一种特殊情况 适用于无法补间计算的动画 资源较大(适合时间短、资源小的动画,一定要控制好大小的时长) 使用steps()
例如:图片合成的动画 指定时间和动画进度关系 中间不要加东西,每个区间就只有一个状态,静止
step是指定每个区间帧数 transition keyframes(animation) 过度动画需要有状态变化,关键帧动画不需要有状态变化 关键帧动画能控制更精细 使用关键帧动画 去掉补间(steps) 性能不差 部分情况下优于JS 但JS可以做到更好 部分高危属性,box-shadow等 基于CSS的另一种语言 通过工具编译成CSS 添加了很多CSS不具备的特性(变量) 能提升CSS文件的组织方式
less 基于node
优点:用JS写的,编译速度比较快,有个浏览器中可以直接使用的版本,不需要预先编译,入门简单 缺点:在一些复杂特性上比较繁琐
sass(scss)
ruby写的比较慢,但是有解决方案,可以使用它的移植版本node-sass
嵌套 反映层级和约束 变量和计算 减少重复代码
Extend和Mixin 代码片段 循环 适用于复杂有规律的样式
import CSS 文件模块化 sass的输出有多重格式 使用这条命令时候,我们编译的路径,不能有中文名,否则会报错,之后只要我们更改scss文件,保存后,就会自动修改编译后的css文件 变量为了可以参与运算,提供了各种运算的函数,包括颜色
less:@fontSize
sass:$fontSize
less的理念:尽量的接近css的语法
sass的理念:尽量避免产生混淆 CSS中并没有提供复用CSS的方法,而是通过HTML复用 不加括号也可以,不加括号.block{}不会被编译出来,加了会被编译出来 区别在于需要显示的声明和调用,而且不能既做class又做mixin 场景:mixin清除浮动 减少重复代码 不会复制重复代码 选择器提取出来,公共的样式写到一起 引用: 生成效果: 引用: 生成效果: 生成效果: mixin方式: sass是支持循环的,不需要递归 使得CSS变得更像一门变成语言 预处理器的变量跨文件 预处理器的模块化,提供了按需使用他人代码的可能 SASS-Compass Less-Lesshat/EST(国内) 提供现成mixin
提供JS类库,封装常用功能 有兼容性问题的封装成mixin统一处理
Less(Node.js)
Sass(Ruby,有Node版本) 帮助更好地组织CSS代码 提高代码复用率 提升可维护性 嵌套 反应层级和约束 变量和计算 减少重复代码
Extend和Mixin 代码片段 循环 适用于复杂有规律的样式
import CSS文件模块化 优点:提高代码复用率和可维护性 缺点:需要引入编译过程 有学习成本 前端工程化发展起来了,预处理器的热度有所下降 一个CSS框架
twitter出品 提供通用基础样式 兼容IE10+(bootstrap3兼容到IE9) 使用flexbox布局 抛弃Nomalize.css
提供布局和reboot版本 基础样式 常用组件 JS插件 现在用sass编写
用于组件交互
dropdown(下拉)
modal( 弹窗)
基于jQuery 依赖Popper.js
bootstrap.js
使用方式 基于data-属性 基于JS-API
不同的分辨率下面又不同的分配 使用CSS同名类覆盖 修改源码重新构建 //修改彻底,但是需要了解整个框架 使用SCSS源文件,修改变量 //对结构的要求更高 把bootstrap当初一个预处理文件来使用,十一个更干净的使用方式 优点:CSS代码结构合理,现成的样式可以直接使用 缺点:定制较为繁琐,体积大 原理:通过media query设置不同分辨率的class
使用:为不同分辨率选择不同的网格class
使用CSS同名覆盖 修改源码重新构建 引用SCSS源文件,修改变量 组织 优化 构建 维护
PostCSS本身只有解析能力 各种神奇的特性全靠插件
目前至少有200多个插件
import模块合并
autoprefixier自动加前缀
cssnano压缩代码
cssnext使用css新特性
precss 变量 条件 循环
MIxin Extend
import 属性值引用
Webpack postcss-loader
Gulp gulp-postcss
Grunt grunt-postcss
Rollup rollup-postcss
css-loader将css文件变成js文件
style-loader将变成js的css文件注入到页面中 直接将class名全部换掉,确保组件样式不冲突 var styles = require("component.css"); style.green ...
css-loader 将 CSS变成JS
style-loader 将JS样式插入head
ExtractTextPlugin 将CSS从JS中提取出来
css modules 解决css命名冲突的问题(映射表)
less-loader sass-loader各类预处理器
postcss-loader PostCSS处理
less sass 等CSS预处理器
PostCSS插件(postCSS-import/precss等)
webpack处理CSS(css-loader+style-loader)
autoperfixer cssnext precss等,兼容性处理
import模块合并
css语法检查、兼容性检查 压缩文件 解决类名冲突的问题 使用PostCSS或者webpack等构建工具进行编译 在HTML模板中使用编译过程产生的类名
JS作为入口,管理资源有天然优势 将组件的结构、样式、行为封装到一起,增强内聚 可以做更多处理(webpack)
Angular.js(1.x) 没有样式集成能力
Angular(2+) typeScript 提供了样式封装能力 与组件深度集成 逻辑上是一个DOM
结构上存在子集集合 shadowDOM介绍 限定了范围的CSS
无法影响外部元素 外部样式一般不影响内部 可以通过/deep/或>>>穿透 兼容性还存在问题 方案一:随机选择器(不支持)
方案二:随机属性 div[abcdefg]{} 模拟Scoped CSS 方案一:随机选择器 CSS modules
方案二:随机属性 vue同时支持了这两种方案 官方没有集成方案 社区方案众多 css modules (babel)react-css-modules styled components styled jsx 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/53376.html 摘要:一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。
工欲善其事必先利其器-前端实习简历篇 - 掘金
有幸认识很多在大厂工作的学长,在春招正式开始前为我提供很多内部推荐的机会,非常感谢他们对我的帮助。现在就要去北京了,对第一份正式的实习工作也充满期待,也希望把自己遇到的一些问题和... 摘要:也就正式开始了我的前端之路。在这期间,我还购买并配置了自己的云服务器,自己的博客系统,自己的还学会了的基本操作。不必说的是高级程序设计豆瓣链接这本书,也就是大家常说的高程,基本上每个合格的前端程序员都要熟读很多很多次,每次读都会有新发现。
原创 西安前端交流会: 卡农 ovenzeze@qq.com 本文章同步发表在wdShare西安前端交流会网站、我的个人博客以及segmentF... 摘要:也就正式开始了我的前端之路。在这期间,我还购买并配置了自己的云服务器,自己的博客系统,自己的还学会了的基本操作。不必说的是高级程序设计豆瓣链接这本书,也就是大家常说的高程,基本上每个合格的前端程序员都要熟读很多很多次,每次读都会有新发现。
原创 西安前端交流会: 卡农 ovenzeze@qq.com 本文章同步发表在wdShare西安前端交流会网站、我的个人博客以及segmentF... 摘要:在标签中添加属性,本质上是跟在标签里面写属性时一样的,所以属性值最终都会编译为字符串类型。这个节点包括很多,比如,以及一些方法等方法。一个对象有很多,该集合名字为,里面有其他以及,里面有很多。
一、变量类型和计算
JS中使用typeof能得到哪些类型
变量类型
值类型:变量本身就是含有赋予给它的数值的,它的变量本身及保存的数据都存储在栈的内存块当中
引用类型:引用类型当然是分配到... 摘要:或表示红色,表示绿色,表示蓝色,也可取其他数值来指定颜色。针对多字节文字,中文句子也是单词允许在单词内换行。
一、HTML基础
html常见元素和理解
html常见元素分类
head区元素:(不会在页面上留下直接内容)
meta
title
style
link
script
base
body区:
div/selection/article/aside/header/f... 阅读 580·2023-04-25 18:37 阅读 2738·2021-10-12 10:12 阅读 8138·2021-09-22 15:07 阅读 529·2019-08-30 15:55 阅读 3144·2019-08-30 15:44 阅读 2163·2019-08-30 15:44 阅读 1594·2019-08-30 13:03 阅读 1527·2019-08-30 12:55选择器分类
选择器权重
计算一个不进位的数字
#id .link.active
#id +100
.link +10
.active +10
结果:120
不进位
其他选择器权重
非布局样式
字体族
多字体fallback机制
font-family:Monaco PingFangSC
font-family:"Microsoft Yahei",serif
.chinese{
font-family:"PingFang SC","Microsoft Yahei",monospace
}
网络字体、自定义字体
@font-face{
font-family:"IF";
src:url("./IndieFlower.ttf");
}
.custom-font{
font-family:IF;
}
iconfont
字体机制
行高的构成
行高的相关现象
经典图片空隙问题
背景颜色
background:hsl(0,100%,50%)
渐变色背景
多背景叠加
background: linear-gradient( 135deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),linear-gradient( 45deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%)
background-size:30px 30px
背景图片和属性(雪碧图)
由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。
单张的 GIF 只有相关的一个色表,而多带带分割的每一张 GIF
都有自己的一个色表,这就增加了总体的大小。
因此,多带带的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小
一个例子是来自于WHIT TV的网站。
注意这是一个1299×15,000像素的PNG图片。
它也被压缩的很好——实际下载大小只有大概26K —
但是浏览器并不会渲染压缩后的图片数据。当这个图片被下载并被解压缩之后
base64和性能优化
多分辨率适配
边框
边框的属性
边框背景图
border-img("./border.img") 30 round;
//repeat:可能会导致不完整
//round:整数个拼,可能会有一些空间上的压缩
边框衔接(三角形)
width:0px;
border-bottom:30px solid red;
border-left:20px solid transparent;
border-right:20px solid transparent;
滚动
滚动行为和滚动条
overflow-wrap(word-wrap)通用换行控制
- 兼容性不太好,经常还用word-wrap
- 是否保留单词
- `normal` 只在允许的断字点换行(浏览器保持默认处理)。
- `break-word` 在长单词或 URL 地址内部进行换行。
word-break
- 针对多字节文字,中文句子也是单词
- `break-all` 允许在单词内换行。
- `keep-all` 只能在半角空格或连字符处换行,中文句子也不换行,兼容性还有点问题
white-space
- 空白处是否断行
- 不换行的话 `white-space: nowrap`
overflow-wrap: break-word ;
word-break: keep-all;
white-space: normal ;
装饰性属性(粗体、斜体、下划线)
CSS布局
常用布局方式
布局方式(表格)
盒模型
宽度和高度是只对内容区生效
占据的空间是content + padding + border
display确定元素的显示类型:
position确定元素的位置:
float
float对自身的影响:
对兄弟的影响
对父级元素的影响
解决“高度塌陷”的方案
container2::after{
content:"";
clear:"both"; //保证这个元素左右都是"干净"的,没有浮动元素
display:block;
height:0; //不占高度
visibility:hidden //不用显示
}
//比较经典的清除浮动布局的方式
float布局
float和margin实现两栏布局和三栏布局
处理间隙
响应式设计和布局
viewport:
media query:
@media(max-width:640px){
.left{
display:none;
}
}
rem:
html{
font-size:16px; // 默认16个像素,为了好记一般设置10px,20px
}
@media (maxwidth: 375px){
html{
font-size :24px ;
}
}
@media (max-width: 320px){
html{
fonts ize: 20px;
}
}
@media (max-width: 640px){
intro{
margin: .3rem auto ;
display: block;
}
}
//精确性要求高的地方不要使用`rem`布局
主流网站使用的布局方式
浮动元素不会占据父元素空间,因此父元素不会管浮动元素,很可能超出父元素,对其他元素产生影响。作为父元素一定要清除浮动,保证对外没有影响
效果属性
百分比是宽高的百分比
多背景叠加(颜色、图片、渐变)
.i{
width: 20px ;
height :20px ;
background: url(./background.png) no repeat;
background-size: 20px 40px;
transition: background-position .4s ;
}
.i:hover{
background-position: 0 20px;
}
clip-path: url(#clipPath);
background-size: cover;
transition:clip-path .4s;
变换transform(2D)
transform:translateX(100px) translateY(100px) rotate(25deg)
transform:rotate(25deg) translateX(100px) translateY(100px)
//有顺序
box-shadow无限投影
::before
::after
如何产生不占空间的边框
background-position
background-repeat
background-size(cover/contain)
如何平移放大一个元素
transform:translateX(100px)
transform:scale(2)
如何实现3D效果
perspective:500px; //指定透视的角度
transform-style:preserve-3d; //保留3D效果
transform:translate rotate;
css动画
动画的原理:
动画的作用
动画类型
)animation-timing-function:steps(1)
介绍
less和sass的区别
CSS预处理器
less
加上 &:并不是父子关系而是同级
CSS中并不允许这么嵌套写,less和sass允许,结构关系清晰body{
padding:0px;
margin: 0px;
}
.wrapper{
background: white;
.nav{
font-size: 12px;
}
&:hover{ //伪类
background: red
}
}
打包指令
lessc a.less > a.css
sass
npm install node-sass
node-sass a.scss>a.css --output-style expanded
less
.block(@fontSize){
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
.block(@fontsize+2px);
sass
@mixin block($fontSize) {
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
@include block(font-size+2px);
作用
less
写法:
.block{
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
.nav:extend(.block){
font-size: @fontSize;
}
.content{
font-size: @fontSize + 2px;
&:extend(.block);
}
.block,
.wrapper .nav,
.wrapper .content {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
sass
写法:
.block {
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
@extend .block;
.block, .wrapper {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
loop
less
less中实际上没有循环的语法,通过递归来实现相应的效果
引用方法:
.gen-col(@n) when (@n > 0 ){
.gen-col(@n - 1);
.col-@{n}{
width: 1000px/12*@n;
}
}
.gen-col(12);
.col-1 {
width: 83.33333333px;
}
.col-2 {
width: 166.66666667px;
}
.col-3 {
width: 250px;
}
.col-4 {
width: 333.33333333px;
}
.col-5 {
width: 416.66666667px;
}
.col-6 {
width: 500px;
}
.col-7 {
width: 583.33333333px;
}
.col-8 {
width: 666.66666667px;
}
.col-9 {
width: 750px;
}
.col-10 {
width: 833.33333333px;
}
.col-11 {
width: 916.66666667px;
}
.col-12 {
width: 1000px;
}
应用场景:表格、特效等
sass
@mixin gen-col($n) {
@if $n>0 {
@include gen-col($n - 1);
.col-#{$n} {
width: 1000px/12*$n;
}
}
}
@include gen-col(12);
@for $i from 1 through 12 {
.col-#{$i} {
width: 1000/12*$i;
}
}
@import "logo";
@import "nav";
@import "content";
预处理器框架
介绍
Bootstrap4
功能
CSS工程化介绍
postCSS支持的构建工具
取决于插件可以做什么
Angular各版本
shadowDOM
Scoped CSS
模拟Scoped CSS
内置CSS解决方案
React的处理
相关文章
前端开发-从入门到Offer - 收藏集 - 掘金
一个普通本科在校生的前端学习之路
一个普通本科在校生的前端学习之路
前端面试之路二(javaScript基础整理)
前端面试之路一(HTML+CSS面试整理)
发表评论
0条评论
hqman
男|高级讲师
TA的文章
阅读更多
tensorflow
SCADA系统资料整理-概论
主机号和主机数是什么-主机号怎么填写?
三种方法实现CSS三栏布局
前端面试每日3+1——第119天
浏览器工作原理整理
CSS 居中完全指南
CSS:元素高度与宽度的讨论 系列文章(四)