CSS基础
css历史
李爵士的同事赖先生提出CSS
css层叠样式表
样式层叠 选择器层叠 文件层叠
小贴士
目前世界上最广泛使用的CSS是CSS2.1版本
语法样式
语法一
选择器 {属性名: 属性值;/*注释*/}
注意事项
- 所有符号都是英文符号，如果写错了，浏览器会警告
- 区分大小写，a 和 A 是不同的东西
- 没有 // 注释
- 最后一个分号可以省略，但建议不要省略
- 任何地方写错了，都不会报错，浏览器会直接忽略
语法二 at语法
@charset "UTF-8";@import url(2.css);@media (min-width: 100px) and (max-width: 200px) {语法一}
注意事项
border调试法
在每一行代码中添加boder属性去查看代码是否有错 outline这个标签不占里面的像素
文档流（元素流动的方向）
解释：”文档流”或”流式布局”是在对布局进行任何更改之前，在页面上显示”块”和”内联”元素的方式。 这个”流”本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。 一旦某部分脱离了”流”，它就会独立地工作。
inline 内联元素
用做链接的 元素、 、 以及
从左到右排列 到达最右边换行 它不能设置高宽 他的高宽与内部元素的宽度加起来 和line-height 的高度有关。
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味
- 盒子会和父容器一样宽
- 每个盒子都会换行
- width 和 height 属性可以发挥作用
- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
block 块级元素
标题(等)和段落()默认情况下都是块级的盒子。
默认宽度是auto 可以设置高宽 永远不要写宽度100%。
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味
- 盒子会和父容器一样宽
- 每个盒子都会换行
- width 和 height 属性可以发挥作用
- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
inline-block 行内块元素
既有inline元素的特点 也有 block元素的特点 但是不会把元素分为2部分换行。
小贴士
不能在内联元素里面用块级元素
<style>.btn {border: 1px solid red;}.he {border: 1px solid green;/* <!-- 实际高度没有撑开 --> */padding: 20px 10px;/* span 最终高度是100px 实际高度和字体有关 */line-height: 100px;}</style><div class="btn"><span class="he">你好</span></div>
定位可以脱离文档流
内容超过元素高度可以用：overflow来操作。
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
|---|---|
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
<style>.div01 {border: 2px solid red;height: 200px;overflow: auto;}</style><div class="div01"><!-- 把屏幕缩小 里面的文字只会显示在第一屏 -->这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字<div style="border: 1px solid blue; width: 1000px;">你好</div><span style="border: 1px solid pink;">123</span></div>
脱离文档流
<!-- /* 这是显示脱离文档的第一个方法 */--><style>.div01 {border: 1px solid red;}.div02 {border: 1px solid green;}span {position: absolute;/*第二种脱离文档流 让他浮动*/float:left;}</style><div class="div01"><div class="div02"><span>你好</span></div></div>
盒模型
CSS盒模型是将所有元素表示为一个个矩形的盒子。由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。
SS盒模型有2种
一种是：content-box 标准模型
content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border。
一种是：border-box
border-box 的宽度 width 表示内容区 + padding + border 的总和。
这两种都没有将margin算入盒子大小内 。
如果算上margin就是在算盒子位置的大小。
<style>.content-box {margin: 25px;border: 5px solid red;padding: 15px;box-sizing: content-box;width: 100px;}.boder-box {margin: 25px;border: 5px solid red;padding: 15px;box-sizing: border-box;width: 100px;}</style><body><div class="content-box">content-box</div><div class="boder-box">boder-box</div></body>
margin合并（外边距重叠）
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
注意：注意有设定float和position=absolute的元素不会产生外边距重叠行为。
只存在上下合并 有三种情况会形成外边距重叠：
第一种情况：
同一层相邻元素之间。
<style>p:nth-child(1){margin-bottom: 13px;}p:nth-child(2){margin-top: 87px;}</style><p>下边界范围会...</p><p>...会跟这个元素的上边界范围重叠。</p>
相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix清除浮动。
clear-fix清除浮动也就是下面代码：
#container::after {content: "";display: block;clear: both;}
没有内容将父元素和后代元素分开：
<style>.div03 {background-color: antiquewhite;/* 外边距合并 复合子和子盒子的外边距会合并 那个高留那个的外边距 *//* 方法一 加 边框 border *//* 方法二 加 padding *//* 方法三 加 overflow: hidden; */margin: 50px;}.div04 {border: 2px solid green;margin: 30px 0;}.div05 {border: 2px solid yellow;/* 外边距合并2 兄弟合并 一个盒子的底外边距 和 相邻盒子的上外边距会合并那个margin值大留那个的外边距 *//* 兄弟合并 用 width: 100%; display: inline-block; */margin-top: 50px;}</style><div class="div03"><div class="div04">盒子01</div><div class="div05">盒子02</div><div class="div05">盒子02</div></div>
空的块级元素:
当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height 、内容设定为inline或是加上clear-fix的时候。
<style>* {margin: 0;padding: 0;box-sizing: border-box;}p {margin-bottom: 13px;background-color: rgb(255, 164, 164);}div {margin-top: 13px;margin-bottom: 87px;background-color: rgb(104, 182, 255);}</style></head><body><p>下边界范围是 87 ...</p><div></div><p>... 上边界范围是 87</p></body>
基本单位
长度单位
- px 像素
- em 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小
- 百分数
- 整数
- rem：等你把 em 滚瓜烂熟了再问 rem
- vw 和 vh （ 视窗宽度的1%/视窗高度的1%）
- 其他长度单位都用得很少，不用了解
颜色
opacity默认是继承父元素opacity属性，所以子元素会继承父元素的opacity属性值，从而产生相同的效果。也就整体变色。
例子：
<div class="opacity" style="opacity: 0; width: 200px; height: 50px; background-color: black;"><p style="opacity: 1; color: aliceblue;">pd的opacity是1</p></div>
rgba只会对元素本身产生影响，因为无法继承，所以不会对子元素产生影响。
<div style=" width: 200px; height: 50px; background-color: rgba(0, 0,0, 0.5);"><p>pd的opacity是1</p></div>
CSS布局
float布局(更多看 05float布局.html)
最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。
小贴士
留一些空间或者最后一个不设置width。或者只设置max-width。
float布局做不了响应式
IE 6/7存在双倍 margin bug
方法一：针对IE 6/7把margin减半方法二 ：加一个display: inline-block
图片与背景图有差距 用 vertical-align : middle;
float 二栏布局
<style>* {margin: 0;padding: 0;box-sizing: border-box;}body {width: 90%;max-width: 900px;margin: 0 auto;text-align: center;}div:nth-of-type(1) {width: 48%;float: left;}div:nth-of-type(2) {width: 48%;float: right;}</style></head><body><h1>2栏布局</h1><div><h2>First column</h2><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sitamet.</p></div><div><h2>Second column</h2><p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor,sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus.</p></div>
float 三栏布局
float 四栏布局
loat 平均布局
float平均布局 的时候 如果 里面的盒子的超出了父盒子的大小 就可以在他们的上层在添加一个盒子 用负的margin来让他们在一行平均分配。
还可直接用最原始的办法 直接用nth-chlid 清除想去掉的边距。看清楚是外边距 还是内边距
.image:nth-child(1) {margin-left: 0;}
负margin案例如下：
<style>.images {outline: 1px solid red;width: 800px;margin-left: auto;margin-right: auto;}.images .image {height: 200px;width: 191px;background-color: bisque;float: left;margin-right: 12px;}.x {margin-right: -12px;}/* 或者直接用nth-chlid 清除最后一行孩子的右边距*/</style><body><div class="images clearfix"><div class="x"><div class="image"></div><div class="image"></div><div class="image"></div><div class="image"></div></div></div></body>
清楚浮动是方法
方法一 结尾处加空div标签 clear:both
<style>.box {background: blue;}.left {background: red;float: left;height: 100px;width: 200px;}.right {background: pink;float: right;height: 100px;width: 200px;}.clear {clear: both;}</style><body><div class="box"><div class="left">Left</div><div class="right">Right</div><div class="clear"></div></body>
方法二 父级div定义 伪类:after (常用这个)
.clear{zoom:1;}/*为解决ie6,ie7浮动问题*/.clear:after{display:block;clear:both;content:"";}
方法三 父级div定义 overflow:hidden/auto
原理：
- 必须定义width或zoom:1,同时不能定义height，使用overflow:hidden/auto时，浏览器会自动检查浮动区域的高度.
缺点：
- overflow:hidden:不能和position一起用，因为超出的尺寸的会被隐藏。
- overflow:auto:内部宽高超过父级div时，会出现滚动条。
<style>.box {background: red;overflow: hidden;}.left {background: blue;float: left;height: 100px;width: 40%;}.right {background: pink;float: right;height: 100px;width: 50%;}</style><body><div class="box"><div class="left">Left</div><div class="right">Right</div></div>123</body>
flex布局
详细知识推荐 阮一峰 的 Flex 布局教程：语法篇 博客 （侵权删除）
container样式
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
主轴 flex-direction 主轴一旦定义 另一各轴就是交叉轴
flex-direction 控制item的流动方向
row 从左往右
row-reverse 从右往左
column 从上往下
column-reverse 从下往上
justify-content 主轴对齐方向
- flex-start 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
- flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
- center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
- space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
- space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
align-items 次轴对齐方向
align-content 有多行的时候对齐方向
- flex-start 元素向侧轴起点对齐。
- flex-end 元素向侧轴终点对齐。
- center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
flex-wrap 换行
nowrap 不换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方
<style>.container {display: flex;/* display: inline-flex; */border: 1px solid red;/* 列表示 */flex-direction: row;/*flex-direction 控制item的流动方向row 从左往右row-reverse 从右往左column 从上往下column-reverse 从下往上*//* flex-wrap 是否换行wrap-revers 翻折*/flex-wrap: nowrap;/* justify-content 主轴对齐方向 */justify-content: flex-start;/* align-items 次轴对齐方向 */align-items: flex-start;/* align-content 有多行的时候 */align-content: flex-start;}.item {width: 50px;border: 1px solid blueviolet;}.item-a {height: 30px;}.item-b {height: 60px;}.item-c {height: 50px;}</style></head><body><div class="container"><div class="item item-a"></div><div class="item item-b"></div><div class="item item-c"></div></div></body>
让item盒子垂直居中
display: flex;justify-content: center;align-items: center;
item 样式
详细知识推荐 阮一峰 的 Flex 布局教程：语法篇 博客 （侵权删除）
6个属性设置item上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
以下引用：
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 ；可以为正数或负数。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小.
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
小贴士：完成青蛙小游戏对flex布局更加的深刻
<style>.container {display: flex;border: 1px solid red;}.item {border: 1px solid blue;width: 150px;height: 50px;margin: 0 5px;}/* order 从小到大排列 *//* 用来分配多余的空间 flex-grow: 0; 可以不写 *//* flex-shrink 空间不够指定某个盒子变瘦0 不变瘦1一起变瘦大于1 当缩小到小于item盒子的总宽时 将自己的空间分给别人 *//* align-self 给加了这个属性的特立独行 */.item:first-child {order: 100;flex-shrink: 1;}.item:nth-child(2) {order: 1;flex-shrink: 5;}.item:last-child {order: 2;flex-shrink: 1;align-self: flex-end;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body>
grid布局
详解见链接 引用阮一峰的一篇博客（侵权删除）
display: grid
grid-template-columns 定义每一列的列宽
grid-template-rows 属性定义每一行的行高
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为”片段”）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。同时还可以和像素 一起使用
grid-row-gap 属性设置行与行的间隔
grid-column-gap 属性设置列与列的间隔
grid-gap 属性是grid-column-gap和grid-row-gap的合并简写形式
grid-template-areas 属性 用于定义区域 在子元素上grid-area 连用 。
小贴士
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
<style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {min-height: 100vh;display: grid;grid-row-gap: 10px;grid-column-gap: 10px;grid-template-columns: 60px auto 60px;grid-template-rows: 100px auto 100px;grid-template-areas:"header header header""aside main ad""footer footer footer";}.container>* {border: 1px solid red;}.container>header {grid-area: header;}.container>aside {grid-area: aside;}.container>main {grid-area: main;}.container>.ad {grid-area: ad;}.container>footer {grid-area: footer;}</style></head><body><div class="container"><header>header</header><aside>aside</aside><main>main</main><div class="ad">sd</div><footer>footer</footer></div></body>
CSS定位
详细知识： 阮一峰 的 CSS 定位详解 博客 （侵权删除）
position的属性
小贴士
不要写 z-index:9999;
absolute 相对于祖先元素中最近的一个定位元素决定的 除了 static。
不要再移动端使用 fixed。
static默认值，待在文档流里
relative相对定位，升起来，但不脱离文档流
absolute绝对定位，定位基准是祖先里的非static
fixed固定定位，定位基准是viewport (有诈)
sticky粘滞定位，适用于导航
层叠上下文
相关知识链接：点击这里那些属性能创建上下层叠。z-index / flex / opacity / transform 会创建层叠上下文
div的分层
<style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {border: 1px solid red;height: 200px;position: relative;}.a {position: relative;z-index: 0;border: 1px solid red;}.a2 {position: relative;z-index: 10;height: 200px;width: 200px;background-color: aquamarine;}.b2 {position: relative;top: -20px;z-index: 5;height: 200px;width: 200px;background-color: pink;}</style></head><body><!-- z-index:auto 不创建层叠上下文z-index:1/2/3/-1/-2/-3 创建层叠上下文 --><!--如果 a b 没有设置 z-index 也就是没有创建层叠上下文.而 a2 b2 设置了z-index 就会在 container里面的世界相比层级 .如果a b 设置了z-index 也就是创建层叠上下文.就会在container 小世界里面对比 a b 的层级a2 b2 不参与container小世界的层级对比--><!-- container是一个小世界 --><div class="container"><!-- a是一个小世界 --><div class="a"><div class="a2">相对于a的层级是10</div></div><!-- b是一个小世界 --><div class="b"><div class="b2">相对于a的层级是5</div></div></div></body>
CSS动画
详细知识了解 ： 点击这里
动画是由许多静止的画面组成的（帧）
动画原理
<style>.demo {width: 100px;height: 100px;border: 1px solid red;position: relative;left: 0;}</style></head><body><div class="demo"></div></body><script>// 动画原理var n = 1;var demo = document.querySelector('.demo');var id = setInterval(function() {if (n <= 200) {demo.style.left = n + 'px';n += 1;} else {clearInterval(id);}}, 1000 / 60)</script>
浏览器渲染步骤
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Composite合成(根据层叠关系展示画面)
三种更新方式
transform属性
详细知识：点击这里
位移translate
<style>.demo {width: 100px;height: 100px;border: 1px solid red;transition: all 1s linear;}.demo:hover {/* transform: translateX(200px); *//* transform: translateY(50px); *//* transform: translateZ(-200px);*//* transform: translate(20px, 50px); */transform: translateX(50%);/* 向右位移自生的50% */}.w {perspective: 1000px;/* 视点 距离中心 1000px*/border: 1px solid red;}</style></head><body><div class="w"><div class="demo"></div></div>
居中小贴士
{ left: 50%;top: 50%;transform: translate(-50%, -50%);}
缩放scale
<style>#demo {width: 100px;height: 100px;border: 1px solid red;margin: 50px;transition: all 1s linear;}#demo:hover {/* transform: scaleX(1.5); *//* transform: scaleY(1.5); */transform: scale(1.5, 0.5);}</style></head><body><div class="wrapper"><div id="demo"></div></div></body>
旋转rotate
<style>#demo {width: 100px;height: 200px;border: 1px solid red;margin: 50px;transition: all 1s linear;}#demo:hover {transform: rotateZ(45deg);/* transform: rotate3d(1, 1, 1, 45deg);*/}.wrapper {perspective: 1000px;}</style></head><body><div class="wrapper"><div id="demo"></div></div></body>
倾斜skew
<head><meta charset="utf-8"><title>JS Bin</title><style>#demo {width: 100px;height: 200px;border: 1px solid red;margin: 50px;transition: all 1s linear;}#demo:hover {transform: skewX(15deg);}.wrapper {perspective: 1000px;}</style></head><body><div class="wrapper"><div id="demo"></div></div></body>
transition过渡
transition:属性名 时长 过渡方式 延迟
transition: left 200ms linear
可以用逗号分隔两个不同属性
transition: left 200ms, top 400ms
可以用all代表所有属性
transition: all 200ms
<style>#demo {width: 100px;height: 100px;border: 1px solid red;margin: 50px;transition: transform 1s linear;}#demo.b {transform: translateX(200px);}#demo.c {transform: translateX(200px) translateY(100px);}</style></head><body><div class="wrapper"><div id="demo"></div><button id=button>开始</button></div></body><script>button.onclick = () => {demo.classList.add('b')setTimeout(() => {demo.classList.remove('b')demo.classList.add('c')}, 1000)}</script>
CSS动画优化
详细知识：点击这里
- 降低选择器的复杂性；使用以类为中心的方法，例如 BEM。
- 减少必须计算其样式的元素数量。
- 尽可能避免布局操作
- 避免强制同步布局和布局抖动；先读取样式值，然后进行样式更改
- 降低绘制的复杂性
- 减少绘制区域
- 提升移动或淡出的元素
- 坚持使用 transform 和 opacity 属性更改来实现动画。
- 使用 will-change 或 translateZ 提升移动的元素。
- 避免过度使用提升规则；各层都需要内存和管理开销。
- 坚持使用 transform 和 opacity 属性更改来实现动画。
- 使用 will-change 或 translateZ 提升移动的元素。
- 避免过度使用提升规则；各层都需要内存和管理开销。
资料来源：饥人谷、阮一峰
本文为贰贰的原创文章，著作权归本人和饥人谷所有，转载务必注明来源
若有收获，就点个赞吧
0 人点赞
