什么是盒模型?
在HTML页面中,每一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。
1.2.盒子模型有哪两种
标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异模式下: 一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)(IE浏览器)
1.3. 标准和怪异模型的转换
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。
怎么获取和设置box的内容宽高
IE: dom.currentStyle.width/height
非IE: window.getComputedStyle(dom).width/height
##2.1
什么是BFC?概念:BFC就是“块级格式化上下文
”的意思,BFC是一块独立的布局环境,保护其中内部元素不收外部影响,也不影响外部。本身BFC是一种css的布局方式,只是我们可以利用它来解决外边距折叠的问题,BFC并不是专门用来解决这个问题而创的;
如何触发BFC?
在box属性值为这些的情况下,都会让所属的box产生BFC。
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法:
overflow的值不是visible;
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex
BFC的原理?
BFC的应用?
1. 可以用来自适应布局
利用BFC的这一个原理就可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。
给right加overflow:hidden;使其变成BFC,消除外部left因浮动对他的影响
2. 可以清除浮动:
父元素加overflow:hidden/auto
,变BFC
1.2 清除浮动的方法(最常用的4种)
一、 额外标签法: 给谁清除浮动,就在其后额外添加一个空白标签 。
优点: 通俗易懂,书写方便。(不推荐使用
)
缺点: 添加许多无意义的标签,结构化比较差。
给元素small清除浮动(在small后添加一个空白标签clear(类名可以随意),设置clear:both;即可)
二、 父级添加overflow方法: 可以通过触发BFC的方式,实现清楚浮动效果。必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点: 简单、代码少、浏览器支持好
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。
注意: 别加错位置,是给父亲加(并不是所有的浮动都需要清除,谁影响布局,才清除谁。)
三、使用after伪元素清除浮动: :after方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after
优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易等等)
四、使用before和after双伪元素清除浮动:(较常用推荐
)
优点: 代码更简洁
1、position: static
static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。
2、position: relative
relative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响。
3、position: absolute
absolute(绝对定位)是指给元素设置绝对的定位,相对定位的对象可以分为两种情况:
1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。
4、position: fixed
可以简单说fixed是特殊版的absolute,fixed元素总是相对于body定位的。
5、inherit
继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。
6、sticky (吸顶效果)
position属性中最有意思的就是sticky了,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。
方法一:父相自绝后,子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%))最常用方法
方法二:父元素设置成弹性盒,子元素横向居中,纵向居中
方法三:父向子绝,子元素所有定位为0,margin设置auto自适应。
两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满,
实现思路也非常的简单:
使用 float 左浮左边栏
右边模块使用 margin-left 撑出内容块做内容展示
为父级元素添加BFC,防止下方元素飞到上方内容
还有一种更为简单的使用则是采取:flex弹性布局
左侧盒子设固定宽度,右侧设flex :1
三栏布局按照左中右的顺序进行排列,通常中间列最宽,左右两列次之
实现三栏布局中间自适应的布局方式有:
两边使用 float,中间使用 margin
两边固定宽度,中间宽度自适应。 利用中间元素的margin值控制两边的间距 宽度小于左右部分宽度之和时,右侧部分会被挤下去
两边使用 absolute,中间使用 margin
实现流程: - 左右两边使用绝对定位,固定在两侧。 - 中间占满一行,但通过 margin和左右两边留出10px的间隔
flex实现
左右两侧的盒子给一个固定宽高,中间盒子flex :1
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性
1.1以下6个属性设置在容器上
row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。
它可能取三个值。 (1)nowrap(默认):不换行。 (2)wrap:换行,第一行在上方。 (3)wrap-reverse:换行,第一行在下方。
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。 flex-flow: <flex-direction> || <flex-wrap>;
它可能取5个值, flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
flex-start:与交叉轴的起点对齐。 flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。
CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。
行内元素有:span a b i img input select strong
块级元素有:div p h1-h6 ul table form ul ol li dl dt dd…
空元素(没有内容): <br> <hr> <img> <input> <link> <meta>
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式:
属性Hack、选择符Hack、条件注释Hack, Hack主要针对IE浏览器
1、条件Hack
条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
2、属性Hack
属性级Hack:
比如IE6能识别下划线“”和星号“”,
IE7能识别星号“”,但不能识别下划线” ”,而firefox两个都不能认识。
background-color:red9; 9所有的ie浏览器可识别;
background-color:yellow0; 0 是留给ie8的,
3、选择符Hack
比如IE6能识别 *html .class{}
,IE7能识别*+html .class{}
FF<IE7<IE6,CSS hack
href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;
在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
link属于html标签。@import在css中使用表示导入外部样式表;
页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别,而link是HTML标签,无兼容问题;
link方式的样式的权重 高于@import的权重;
link 支持使用javascript改变样式 (document.styleSheets),后者不可
css3新特性
选择器
( 基本选择器 层级选择器 内容选择器 过滤选择器 属性过滤选择器 子元素过滤选择器 表单属性过滤选择器 )
背景和边框 ( background-size, border-radius,box-shadow )
文本效果
2D/3D 转换 — 变形(transform)、过渡(transtion)、动画(animation)
h5新增特性:
语义化标签:header、footer、section(赛可婶)、nav、aside、article(阿特污)
增强型表单:input 的多个 type (email date color search)
新增表单属性:placehoder、required、min 和 max
音频视频:audio、video
本地存储:
延伸 :
vue :
localStorage 生命周期是永久,这意味着除非用户显示在浏览器提供的UI 上清除 localStorage 信息,否则这些信息将永远存在。存放数据大小为一般为5MB,不参与和服务器的通信。sessionStorage 仅在当前会话下有效,关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 localStorage。cookie 具有极高的扩展性和可用性,是用来和服务器通讯,而不是本地存储,他只是被‘借用’到本地存储。存储大小最大4KB每次http请求,header都携带cookie
微信小程序:
存储:通过wx.setStorage/wx.setStorageSync写数据到缓存
接收:通过wx.getStorage/wx.getStorageSync读取本地缓存,
uni-app:
存储:uni.setStorage
接收:uni.getStorage
1. css3新属性,加浏览器前缀兼容早期浏览器
2. 块属性标签float后,又有横行的margin情况下,IE 浏览器margin加倍的问题
3. 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
4. 行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
5. IE浏览器div最小宽度和高度的问题
6. 超链接访问过后hover样式就不出现的问题
7. 图片默认有间距
1. 事件绑定
2.阻止事件冒泡传播
3. 阻止事件默认行为
4.ajax兼容问题