margin(外边距)- 清除边框外的区域,外边距是透明的。
border(边框)- 围绕在内边距和内容外的边框。
padding(内边距)- 清除内容周围的区域,内边距是透明的。
content(内容)- 盒子的内容,显示文本和图像。W3C的标准盒模型:在标准的盒子模型中,width指content部分的宽度
IE的盒模型:在IE盒子模型中,width表示content+padding+border这三个部分的宽度
- 如何开启不同盒子模型
- box-sizing:content-box; 标准盒子模型
- box-sizing:border-box; IE盒子模型
- id选择器(#box),选择id为box的元素
- 类选择器(.one),选择类名为one的所有元素
- 标签选择器(div),选择标签为div的所有元素
- 后代选择器(#box div),选择id为box元素内部所有的div元素
- 子选择器(.one>one_1),选择父元素为.one的所有.one_1的元素
- 相邻同胞选择器(.one+.two),选择紧接在.one之后的所有.two元素
- 群组选择器(div,p),选择div、p的所有元素
- 伪类选择器
- 属性选择器
!important > 行内样式(比重1000)> ID 选择器(比重100) > 类选择器(比重10) > 标签(比重1) > 通配符 > 继承 > 浏览器默认属性
- 字体系列属性
- font-family:字体系列
- font-weight:字体粗细
- font-size:字体大小
- font-style:字体风格
- 文本系列属性
- text-indent:文本缩进
- text-align:文本水平对齐
- line-height:行高
- color:文字颜色
- 元素可见性:visibility
- 列表布局属性:list-style
- 光标属性:cursor
- 将显示方式设置为表格,
display:table-cell
,同时设置vertial-align:middle
- 使用
flex
布局,设置为align-item:center
- 绝对定位中设置
bottom:0,top:0
,并设置margin:auto
- 绝对定位中固定高度时设置
top:50%,margin-top
值为高度一半的负值- 文本垂直居中设置
line-height
为height
值
- link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
- 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
- import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题
- Rgba即可以指定元素颜色也可以指定透明度,opacity只能控制元素透明度不能设置颜色
- Rgba透明度是基于实际颜色而opacity是针对元素本身透明度设置,在使用rgba是可以实现元素不同部位透明度不同,而opacity使元素透明度一致
- 支持rgba的浏览器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity
block
: 会独占一行,多个元素会另起一行,可以设置width、height、margin和padding属性;
inline
: 元素不会独占一行,设置width、height属性无效。但可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin;
inline-block
: 将对象设置为inline对象,但对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。
display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。
relative:相对定位,相对于自己本身在正常文档流中的位置进行定位。
absolute:生成绝对定位,相对于最近一级定位不为static的父元素进行定位。最终找到body
fixed: (老版本IE不支持)生成绝对定位,相对于浏览器窗口或者frame进行定位。
static:默认值,没有定位,元素出现在正常的文档流中。
sticky:生成粘性定位的元素,容器的位置根据正常文档流计算得出。
display: none: 渲染树不会包含该染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。
visibility: hidden: 元素在页面中仍占据空间,但是不会响应绑定的监听事件
opacity: 0: 将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件
position: absolute: 通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏
z-index: 负值: 来使其他元素遍盖住该元素,以此来实现隐藏
transform: scale(0,0): 将元索缩放为 0,来实现元素的隐藏。
- 触发方式不同:
transition
通过 CSS 属性值的变化来触发动画效果,而animation
则需要通过设置关键帧(keyframes)来指定动画序列。- 控制方式不同:
transition
只能控制开始和结束状态之间的过渡动画,而animation
可以指定多个关键帧,控制元素动画的每一个阶段,包括动画开始、中间和结束的时刻、变换状态以及持续时间等。- 耗费资源不同:相对来说,
animation
消耗的浏览器资源更多,因为它需要计算多个关键帧之间的动画效果,而transition
只需在两种状态之间进行简单的计算即可。- 兼容性不同:
transition
相对来说更加兼容不同的浏览器,而animation
在某些旧版浏览器上可能无法正常工作。
伪元素:是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式,例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
伪类:是基于元素的特征而不是他们的id、class、属性或者内容。一般来说,元素的特征是不可以从DOM树上推断得到的,而且其是动态的,当用户和DOM进行交互的时候,元素可以获得或者失去一个伪类。(这里有一个例外,就是:first-child和:lang是可以从DOM树中推断出来的。)
两者的异同
相同:
- 伪类和伪元素都不出现在源文件和文档树中。也就是说在html源文件中是看不到伪类和伪元素的。
差异:
- 伪类其实就是基于普通DOM元素而产生的不同状态,他是DOM元素的某一特征。伪元素能够创建在DOM树中不存在的抽象对象,而且这些抽象对象是能够访问到的。
HTML5 提供一个专门用于请求动画的API
语法:
- window.requestAnimationFrame(callback); 其中,callback是下一次重绘之前更新动画顿所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数,它表示requestAnimationFrame()开始去执行回调函数的时刻。该方法属于宏任务,所以会在执行完微任务之后再去执行。
取消动画:
- 使用cancelAnimationFrame()来取消执行动画,该方法接收-个参数–requestAnimationFrame默认返回的id,只需要传入这个id就可以取消动画了。
优势:
- CPU节能
- 函数节流
- 减少DOM操作
浏览器会把inline内联元素间的空白字符(空格、换行、Tab等) 染成一个空格。为了美观,通常是一个li放在一行,这导致li换行后产生换行字符,它变成一个空格,占用了一个字符的宽度。
解决:
1.为 <li>设置float:left。不足: 有些容器是不能设置浮动,如左右切换的焦点图等.
2.将所有 <li> 写在同一行。不足: 代码不美观。
3.将<u1>内的字符尺寸直接设为0,即font-size:0。不足: <ul>中的其他字符尺寸也被设为0,需要额外重新设定其他字符尺寸,且在Safari浏览器依然会出现空白间隔。
4.消除<ul>的字符间隔letter-spacing:-8px,不足: 这也设置了<li>内的字符间隔,因此需要将<li>内的字符间隔设为默认letter-spacing:normal。
- 新增各种css选择器(:not(.input):所有class不是’input’的节点):属性选择器,伪类选择器,伪元素选择器,基本选择器
- 三个边框属性
- border-radius:创建圆角边框
- border-shadow:为元素添加阴影
- border-image:使用图片来绘制边框
- 背景
- background-clip:确定背景画区
- background-origin:设置是从border-box,padding-box,content-box那个盒子的左上角开始对其
- background-size:调整背景图片大小
- background-break:元素可以被分成几个独立的盒子
- 文字
- word-wrap:normal|break-word 使用浏览器默认的换行|允许在单词内换行
- text-overflow:设置或检索当前行超过指定容器的边界如何显示,属性由两个值
- clip:修剪文本
- ellipsis:显示省略符号来代表被修剪的文本
- text-shadow:可向文本应用阴影。能够规定水平阴影,垂直阴影,模糊距离,以及阴影颜色
- text-decoration:CSS3里面开始支持对文字的更深层次的渲染,具体有三个属性可以提供
- text-fill-color:设置文字内部填充颜色
- text-stroke-color:设置文字边界填充颜色
- text-stroke-width:设置文字边界宽度
- 颜色(新增颜色表示方式rgba与hsla)
- rgba分为两部分,rgb为颜色值,a为透明度
- hsla分为四部分,h为色相,s为饱和度,l为亮度,a为透明度
- transition过渡,transform转换,animation动画
- flex弹性布局,Grid栅格布局
- 媒体查询
- BMP:是无损的、既支持索引色也支持直接色的点阵图
- GIF:是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码
- JPEG:是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色,得益于更丰富的色彩
- PNG-8:是无损的、使用索引色的点阵图。
- PNG-24:是无损的、使用直接色的点阵图。
- SVG:是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成
- WebP:是谷歌开发的一种新图片格式,WebP是同时支持有损和无损压缩的、使用直接色的点阵图。
考查的是css3的transform
height: 1px;
transform: scale(0.5);
- @support 主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补。
- calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算;
- @media 查询,你可以针对不同的媒体类型定义不同的样式。
px:绝对长度单位,像素px是相对于显示器屏幕分辨率来说的
em:相对长度单位,相对于当前对象内文本的font-size,em的值并不是固定的,em会继承父级元素的font-size(参考物是父元素的font-size)
rem:相对于html根元素的font-size
- rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。- em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size- vw/vh
全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于 屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的 话 vh 单位更好。- px
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素- vmin/vmax: 取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。
- 如果窗口高度1080,宽度1920那么。
1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px
。
这属于简单的css考查,平时在用组件库的同时,也别忘了原生的css
.a {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/
}
- 利用定位+margin:auto
- 利用定位+margin:负值
- 利用定位+transform
- table布局
- flex布局
- grid布局
- 什么是响应式: 一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸,屏幕定向等)进行相应的响应和调整
- 基本原理: 通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport.
- 实现方式
- 媒体查询
- 百分比布局
- vw/vh
- rem
static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
CSSSprites(精灵图),将一个页面涉及到的所有图片都包含到一张大图中去,然后利用CSS的 background-image,background-repeat,background-position属性的组合进行背景定位。
优点:
- 减少HTTP请求,极大提高页面加载速度
- 增加图片信息重复度,提高压缩比,减少图片大小
- 更换风格方便,只需要在一张或几张图片上修改颜色或样式即可
缺点:
- 图片合并麻烦
- 维护麻烦
设备像素
:又称为物理像素, 指设备能控制显示的最小物理单位,不一定是一个小正方形区块,也没有标准的宽高,只是用于显示丰富色彩的一个“点”而已
css像素
: 适用于web编程,在 CSS 中以 px 为后缀,是一个长度单位 。css中长度分为两类:绝对单位和相对单位,px属于相对单位
设备独立像素
: 与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念 。我们常说的分辨率,不严谨来讲是指的设备独立像素。在javascript中我们可以通过 window.screen.width/ window.screen.height 来查看
dpr
:设备像素比, 代表设备独立像素到设备像素的转换关系
ppi
:像素密度, 表示每英寸所包含的像素点数目
需要在border外侧添加空白,且空白处不需要背景 (色)时,使用 margin;
需要在border内测添加空白,且空白处需要背景(色) 时,使用 padding。
概念:
- line-height 属性设置行间的距离(行高),说的直白一点,就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。
原理:
- 我们可以理解为将div分为三份,分别为上边距,内容,下边距。举例:div高度100px,字体为16px,那么上下边距计算为(100px-16px)/2
赋值方式:
- 带单位:
px
是固定值,而em
会参考父元素font-size
值计算自身的行高- 纯数字:会把比例传递给后代。例如,父级行高为
1.5
,子元素字体为18px
,则子元素行高为1.5 * 18 = 27px
- 百分比:将计算后的值传递给后代
概念: BFC即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则。BFC目的是形成一个相对于外界完全独立的空间,
让内部的子元素不会影响到外部的元素
触发条件:
- 根元素,即HTML元素
- 浮动元素:float值为left、right
- overflow值不为 visible,为 auto、scroll、hidden
- display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- position的值为absolute或fixed
应用场景:
- 防止margin重叠
- 清楚内部浮动
- 自适应多栏布局
两栏布局
:
- 使用float左浮动左边栏,右边使用margin-left撑出左边栏宽度大小,为父元素添加BFC通过overflow:hidden开启。
- flex布局
三栏布局
:
- 下面三个方法原理与两栏布局第一个方法相同
- 两边使用 float,中间使用 margin
- 两边使用 absolute,中间使用 margin
- 两边使用 float 和负 margin
- flex布局
- display: table 实现
- 通过 display: table设置为表格,设置 table-layout: fixed`表示列宽自身宽度决定,而不是自动计算。
- 内层的左中右通过 display: table-cell设置为表格单元。
- 左右设置固定宽度,中间设置 width: 100% 填充剩下的宽度
- grid网格布局
理解:flex布局意为“弹性布局”,可以 简便、完整、响应式地实现各种页面布局 。 容器中默认存在两条轴,主轴和交叉轴,呈90度关系。项目默认沿主轴排列,通过
flex-direction
来决定主轴的方向属性:
- flex-direction 决定主轴的方向
- flex-wrap 决定容器内项目是否可换行
- wrap,换行
- justify-content 项目在主轴上的对齐方式
- flex-start(默认值):左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐,项目之间的间隔都相等
- space-around:两个项目两侧间隔相等
- align-items 项目在交叉轴上如何对齐
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
垂直居中
- baseline: 项目的第一行文字的基线对齐
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
- align-content
理解:
Grid
布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列容器属性:
- display:grid该容器是一个块级元素/inline-grid该容器是一个行内元素
- grid-template-columns 属性,grid-template-rows 属性:
- 设置列宽,行高几行几列。如果重复宽高可通过repeat(3,200px)表示3行列,200px宽高
- grid-row-gap 属性, grid-column-gap 属性, grid-gap 属性
- 设置行列间距,grid-gap是两者简写
- grid-template-areas 属性:用于定义区域
- grid-auto-flow 属性: 划分网格以后,容器的子元素会按照顺序 , 顺序就是由grid-auto-flow决定
项目属性:
- grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性: 指定网格项目所在的四个边框,分别定位在哪根网格线,从而指定项目的位置
- grid-area 属性: 属性指定项目放在哪一个区域 。由grid-template-areas 属性划分区域
- justify-self 属性、align-self 属性以及 place-self 属性
transition 实现渐变动画 transition动画详解
transform 转变动画 transform属性详解
animation 实现自定义动画 animation详解
- 回流:布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
- 重绘:当计算好盒模型的位置、大小及其他属性后,浏览器根据每个盒子特性进行绘制
触发条件:
- 回流:
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)
- 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代
- 页面一开始渲染的时候(这避免不了)
- 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)
- 重绘------
触发回流一定会触发重绘
- 颜色的修改
- 文本方向的修改
- 阴影的修改
- 内联首屏关键CSS
- 避免使用css表达式
- 异步加载CSS
- 资源压缩
- 合理使用选择器
- 减少使用昂贵的属性 如
box-shadow
/border-radius
/filter
/透明度/:nth-child
等- 不要使用@import
单行文本溢出
- white-space:设置文字在一行显示,不能换行
- overflow:文字长度超出限定宽度,则隐藏超出的内容
- text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本
- clip:当对象内文本溢出部分裁切掉
- ellipsis:当对象内文本溢出时显示省略标记(…)
text-overflow
只有在设置了overflow:hidden
和white-space:nowrap
才能够生效的多行文本溢出省略
- 基于高度截断 – 伪元素 + 定位
- position: relative:为伪元素绝对定位
- overflow: hidden:文本溢出限定的宽度就隐藏内容)
- line-height: 20px:结合元素高度,高度固定的情况下,设定行高, 控制显示行数
- height: 40px:设定当前元素高度
- ::after {} :设置省略号样式 – 设置伪元素
- position: absolute:给省略号绝对定位
- content:“…”
- 基于行数截断 – 纯css
- -webkit-line-clamp: 2:用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的WebKit属性)
- display: -webkit-box:和-webkit-line-clamp结合使用,将对象作为弹性伸缩盒子模型显示
- -webkit-box-orient: vertical:和-webkit-line-clamp结合使用 ,设置或检索伸缩盒对象的子元素的排列方式
- overflow: hidden:文本溢出限定的宽度就隐藏内容
- text-overflow: ellipsis:多行文本的情况下,用省略号“…”隐藏溢出范围的文本
Chrome 中文版浏览器会默认设定页面的最小字号是12px,英文版没有限制 。
解决方案:
- zoom : “变焦”,可以改变页面上元素的尺寸,属于真实尺寸
- -webkit-transform:scale(): 针对
chrome
浏览器,加webkit
前缀,用transform:scale()
这个属性进行放缩- -webkit-text-size-adjust:none: 该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小
区别:
Zoom
非标属性,有兼容问题,缩放会改变了元素占据的空间大小,触发重排-webkit-transform:scale()
大部分现代浏览器支持,并且对英文、数字、中文也能够生效,缩放不会改变了元素占据的空间大小,页面布局不会发生变化-webkit-text-size-adjust
对谷歌浏览器有版本要求,在27之后,就取消了该属性的支持,并且只对英文、数字生效
理解: 扩充了
Css
语言,增加了诸如变量、混合(mixin)、函数等功能,让Css
更易维护、方便 。 本质上,预处理是Css
的超集 。 包含一套自定义的语法及一个解析器,根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的Css
文件有哪些:
sass
,less
,stylus
比较less和sass:
- 相同点:
- 首先sass和less都是css的预编译处理语言,它们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用
- 区别:
- less是基于JavaScript的在客户端处理 所以安装的时候用npm
- sass是基于ruby所以在服务器处理
- less优缺点
- 优点: less 简单,易上手;属于css的基础拓展;less更适合静态界面写样式时
- 缺点: JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器
- sass优缺点
- 优点: 功能强大,更加丰富的拓展sass适合游戏或者其他做效果时需要逻辑来更换不同样式
- 缺点: 复杂对于新手比较不友好
FOUC: 即无样式内容闪烁,也可以称为文档样式短暂失效,主要就是指HTML已加载而样式表并未加载,此后样式表再加载而产生的闪烁现象。
如何避免:
- 样式表前置 : 根据浏览器渲染的顺序,将CSS在中引入或者嵌入
- 尽量使用link避免使用@import、
额外标签法: 给谁清除浮动,就在其后额外添加一个空白标签
- 优点: 通俗易懂,书写方便。(不推荐使用)
- 缺点: 添加许多无意义的标签,结构化比较差。
父级添加overflow方法: 可以通过触发BFC的方式,实现清楚浮动效果。
优点: 简单、代码少、浏览器支持好
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。
使用after伪元素清除浮动: :after方式为空元素的升级版,好处是不用单独加标签了。
- 优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
- 缺点: 由于IE6-7不支持
- 偶数字号相对更容易和 web 设计的其他部分构成比例关系
- 多数显示器默认频率是
60Hz
,即1
秒刷新60
次,所以理论上最小间隔为1/60*1000ms = 16.7ms
- 优点可以加密,减少了
HTTTP
请求- 缺点是需要消耗
CPU
进行编解码
圣杯布局和双飞翼布局的区别:
- 相同点
- 两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,并且中间部分在HTML代码中要写在前边,这样它就会被优先加载渲染。
- 不同点
- 主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容,在给这个中间的div设置margin-left和margin-right 。
PostCSS是一个使用JS插件转换CSS的工具。这些插件可以支持变量和混合、transpile未来CSS语法、内联图像等。
作用:
- 支持未来的css: 使用cssnext书写未来的css(postcss-cssnext plugin)
- 编译速度大大提升。PostCSS 声称比预处理器快 3-30 倍。
- 丰富的插件系统,解放你的双手。
- css模块化,将作用域限制于组件内,避免了全局作用域的问题,再也不用担心样式名重复了
Postcss属于css后处理器,动态编译css,也就是说,在运行的时候进行编译。
css的
content
属性专门应用在before/after
伪元素上,用于来插入生成内容。最常见的应用是利用伪类清除浮动。
- 元素为行内元素,设置父元素
text-align:center
- 如果元素宽度固定,可以设置左右
margin
为auto
;- 绝对定位和移动:
absolute + transform
- 使用
flex-box
布局,指定justify-content
属性为centerdisplay
设置为tabel-ceil
animation
- css3的
animation
是css3新增的动画属性,这个css3动画的每一帧是通过@keyframes
来声明的,keyframes
声明了动画的名称,通过from
、to
或者是百分比来定义动画过程- 每一帧动画元素的状态,通过
animation-name
来引用这个动画,同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式,- 这些相关的动画子属性有:
animation-name
定义动画名animation-duration
定义动画播放的时长animation-delay
定义动画延迟播放的时间animation-direction
定义 动画的播放方向animation-iteration-count
定义播放次数animation-fill-mode
定义动画播放之后的状态animation-play-state
定义播放状态,如暂停运行等animation-timing-function
定义播放的方式,如恒速播放、减速播放等。transition
- transition-property :规定设置过渡效果的css属性名称
- transition-duration :规定完成过渡效果需要多少秒或毫秒
- transition-timing-function :指定过渡函数,规定速度效果的速度曲线
- transition-delay :指定开始出现的延迟时间
描述:是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的。
常见hack:
- 属性级Hack:比如IE6能识别下划线“”和星号“*”,IE7能识别星号“*”,但不能识别下划线””,而firefox两个都不能认识。
- 选择符级Hack:比如IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
- IE条件注释Hack:IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。
- 浏览器解析 CSS 选择器的方式是从右到左
- CSS可以拆分成2部分:公共CSS 和 业务CSS:
- 网站的配色,字体,交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
- 对于业务CSS,需要有统一的命名,使用公用的前缀。可以参考面向对象的CSS
不是
无论是竖向还是横向的百分比设定都是相对于容器的
宽度
。我们可以通过margin和padding来进行验证
- 原理类似图片轮播原理,超出隐藏部分,滚动时显示
- 可能用到的CSS属性:
overflow:hidden; transform:translate(100%, 100%); display:none;
设置元素浮动后,该元素的
display
值自动变成block
- 相邻的
inline-block
元素之间有换行或空格分隔的情况下会产生间距- 非
inline-block
水平元素设置为inline-block
也会有水平间距- 可以借助
vertical-align:top;
消除垂直间隙- 可以在父级加
font-size:0;
在子元素里设置需要的字体大小,消除垂直间隙- 把
li
标签写到同一行可以消除垂直间隙,但代码可读性差
pageX/Y: 对于整个页面来说,包括了被卷去的body部分的长度
clientX/Y: 点击位置距离当前body可视区域的x,y坐标
screenX/Y: 点击位置距离当前电脑屏幕的x,y坐标
offsetX/Y: 相对于带有定位的父盒子的x,y坐标
使用工具切换IE版本,然后在IE浏览器运行测试
在开发中我们经常通过正方形设置border- radius:50%来实现圆
border-radius参数选择:
- border-radius:10px;将创建四个大小一样的圆角
- border-radius:10px 15px 10px 15px; 四个值分别表示左上角、右上角、右下角、左下角
- border-radius:10px 15px; 第一个值表示左上角、右下角;第二个值表示右上角、左下角
- border-radius:10px 15px 5px; 第一个值表示左上角;第二个值表示右上角、左下角;第三个值表示右下角。
-webkit-font-smoothing: antialiased;
CSS3 定义了两种类型的渐变(gradients):
- 线性渐变 - 向下/向上/向左/向右/对角方向
- 径向渐变 -(Radial Gradients)- 由它们的中心定义
线性渐变:
- 语法:background-image:
linear-gradient
direction,color-stop1,color-stop2,……);
- direction:渐变方向/角度,可选(45deg,to bottom,to top,to right,to left,to left top…)
- color-stop:选择颜色rgba可以设置透明度,也可以
设置色标点区域
例:rgba(255,255,255,0.3) 20%径向渐变:
- 语法:background-image:
radial-gradient
(shape size at position, start-color, …, last-color);
- shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
- size:主要用来确定径向渐变的结束形状大小。如果省略了,其默认值为“farthest-corner”
- at position起点:中心点的位置,可以是关键字(水平方向–left,center,right, 垂直方向–top,center,bottom),具体数值或百分比。
- 响应式布局是指通过CSS媒体查询,根据不同设备或视口宽度设置不同的样式来适应不同屏幕大小,实现页面的自动调整和优化。响应式布局可以使网站在桌面、平板电脑和手机等多种设备上都能够以最佳的显示效果呈现。
- 自适应布局是指根据屏幕尺寸选择合适的布局方式,使页面在不同设备上看起来更加美观和可读性更好。自适应布局相对来说更加固定一些,它的页面布局通常是由几个固定的布局组成,在不同的屏幕尺寸下选择不同的布局组合来进行展示,而不是像响应式布局那样直接改变样式。
- position属性未设置或值为static:如果要使用z-index属性,您需要首先将元素的position属性设置为relative、absolute或fixed。否则,即使设置了z-index,也无法使其生效。
- 父元素的z-index值高于子元素:当一个父元素和它的子元素都设置了z-index时,子元素的z-index可能会失效。
- 浮动元素的z-index失效:当使用浮动元素时,z-index属性可能不起作用。这是因为浮动本身就具有一定的层叠性质,并且浮动元素之间的堆叠顺序由它们在文档流中的先后顺序决定。
block
<a name="go">来我这里a>
......
<a href="#go">我来了a>
可以使用id属性来替代name属性 , 使用id来定义锚点,可以定位针对任何标签来定位。name属性只能针对a标签来定位。
- 利用 css 的 伪元素::after + transfrom 进行缩放
- 优点:全机型兼容,实现了真正的1px,而且可以圆角。适用于老项目。
- 缺点:暂用了after 伪元素,可能影响清除浮动。
- 设置viewport的scale值
- 优点:全机型兼容,直接写1px不能再方便。
- 缺点:适用于新的项目,老项目可能改动大。
- 使用组件库vant/ant-design-mobile
html{
touch-action:none;
}
//此时上下左右都不可滑动
--------改动
html{
touch-action:none;
touch-action:pan-y;
}
性能方面:transform性能远高于position
通过translate移动,元素依然会占据其原始空间。如果通过position移动则会改变位置触发重绘
margin-left:auto
右对齐
margin-right:auto
左对齐
margin:auto
居中
overflow-y;overflow-x;scroll-snap-type;scroll-snap-align;
必要属性
<ul> <li>1li> <li>2li> <li>3li> ul>