css部分基础知识回顾（一）

css盒子模型 css和模型有两种，第一种是标准盒子模型（content-box），另一种是怪异盒子模型（IE,border-box）。标准盒子模型的盒子宽度width = contentWidth + paddingLeft + paddingRight + borderLeft + borderRgitht + marginLeft + marginRight，height = contentHeight + paddingTop + paddingBottom + borderTop + borderBottom + marginTop + marginBottom；怪异盒子模型的盒子宽度width = contentWdith + marginLeft + marginRight，height = contentHeight + marginTop + marginBottom，而其中contentWidth包含了内容宽度 + padding + border。 link标签和@import标签的区别 link：是html中的标签，跟随html的加载而加载； @import：是css中提供的一种引入css的一种方式，最后加载，一般会等待页面加载完成后再加载； link和@import优先级，主要看引入的位置，后边覆盖前边的。 垂直居中的方法 垂直居中的方法很多，这里例举三种常用的。 /* flex布局模式： */ .parent { display: flex; flex-flow: row nowrap; justify-content: center; /* 主轴居中显示 */ align-items: center; /* 交叉轴居中显示 */ } /* position + transform */ .parent { width: 1000px; height: 1000px; position: relative; } .child { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* position + margin */ .parent { width: 1000px; height: 1000px; position: relative; } .child { position: absolute; width: 100px; height: 100px; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } opacity=0，visibility=hidden，display:none的区别 opacity=0：在界面上不显示，但是会占住自己所在的位置，如果有点击事件，当点击该区域时也会触发事件。 visibility=hidden：在界面上不显示，但是会占住自己所在的位置，不会触发点击事件。 display:none：在界面上不显示，而且不会占位，也不会触发事件。 清除浮动 因为在使用float属性的时候，父元素不会被撑开，很容易造成样式错乱，所以很多时候都需要清除浮动，清除浮动的方法主要介绍两种常用的。 css伪类和伪元素 伪类：顾名思义，是一个类，就像.parent .child一样（只是写法不一样），为其设置样式，那么该元素就会显示特定的样式。如a:hover表示鼠标移动上a标签的时候需要显示的样式，类似的还有:active :visited :last-child :nth-child(n)等。 伪元素：顾名思义，是一个元素，只是该元素不在文档树种。如：::before ::after等。div::after { content: 'abc'; }会在div后边生成abc字符串，但是并不在文档树中，此方法还可以用来清除浮动。 inline block inline-block 的区别 inline：inline元素不会独占一行，设置width height无效，垂直方向margin padding无效。 block：block元素会独占一行，默认自动铺满父元素宽度，就算设置宽度，也是独占一行，设置margin padding生效。 inline-block：拥有可以设置的block属性，同时拥有inline的不会独占一行属性。

本文章由javascript技术分享原创和收集