«

笔记-2-CSS基础

codeez 发布于 阅读：2193 笔记

CSS表示层叠样式表（Cascading Style Sheet）。
MDN中的解释：CSS不是真正的编程语言，也不是标记语言，它是一门样式表语言。
CSS提供了三种方法，可以将CSS样式应用到元素上：
内联样式（inline style）
内部样式表（internal style sheet）
外部样式表（external style sheet）

注释：/* 注释内容 */

内嵌式：在head标签对中通过在style标签里写样式。
外链式：将css存储为单独的css文件，通过link标签引入。ref=“stylesheet"
导入式：@import url(css/css.css)，导入式不会等待css文件加载完毕，而是会立即渲染html结构，所以页面会有几秒钟的“素面朝天”。
行内式：直接通过style属性写在标签上，没有批量设置能力。使用link链入外部样式，页面加载时，会同时加载页面，保证页面的内容和样式同时展现。
使用导入式，页面加载完后，才会加载样式，所以再打开页面时会先看到页面内容，才看到被渲染样式的内容。

css选择器：传统css2.1选择器：标签和id选择器、class选择器、复合选择器、伪类
css3新增选择器：元素关系选择器、序号选择器、属性选择器、css3新增伪类、伪元素

text-decoration 用于设置文字的装饰线。
text-transform 用于设置文字的大小写转换
text-indent 用于设置第一行内容的缩进，块级元素可用
text-align 定义行内内容（例如文字）如何相对它的块级父元素对齐
letter-spacing 设置字母之间的间隙
word-spacing 设置单词之间的间隙
解决图片下边缘间隙：
1.vertical-align设置成top/middle/bottom
2.将图片设置为block元素

ul { list-style:none } // 去掉无序列表的小圆点。
a { text-decoration:none } // 去掉超级连接的下划线。

id属性，只能由字母、数字、下划线、短横构成。数字不能开头

复合选择器：

| 后代选择器 | .box .spec | 选择类名为box的标签内部的类名为spec的标签 |
| 交集选择器 | li.spec | 选择既是li标签，又有spec类名的标签 |
| 并集选择器 | ul, ol | 选择所有ul和ol标签 |

伪类是指定要选择的元素的特殊状态。a标签有四个：

| a:link | 没有被访问的超链接 |
| a:visited | 被访问过的超链接 |
| a:hover | 正在被鼠标悬停的超链接 |
| a:active | 正在被激活的超链接（按下按键但还没有松开） |

链接伪类的顺序，a:hover必须置于a:link和a:visited之后，才有效，a:active必须在a：hover之后，才有效。
而link、visited两个伪类之间顺序无所谓，谁在前都可以。

| 子选择器 | div>p | div的子标签p |
| 相邻兄弟选择器 | img+p | 图片后面紧跟着的段落将被选中 |
| 通用兄弟选择器 | p⁓span | p元素之后的所有同层级span元素 |

序号选择器：

| :first-child | 第一个子元素 | IE7 |
| :last-child | 最后一个子元素 | IE9 |
| :nth-child(3) | 第三个子元素 | IE9 |
| :nth-of-type(3) | 第三个某类型子元素 | IE9 |
| :nth-last-child(3) | 倒数第三个子元素 | IE9 |
| :nth-last-of-type(3) | 倒数第三个某类型子元素 | IE9 |

nth-child()可以写成an+b的形式，表示从b开始每a个选一个。不能写成b+an2n+1等于odd，表示奇数。2n等价于even，表示偶数

属性选择器：

| img[alt] | 选择有alt属性的img元素 |
| img[alt="故宫"] | 选择alt属性是“故宫”的img元素 |
| img[alt^="北京"] | 选择alt属性以北京开头的img元素 |
| img[alt$="夜景"] | 选择alt属性是以“夜景”结尾的img元素 |
| img[alt*="美"] | 选择alt属性中含有“美”字的img标签 |
| img[alt⁓="手机拍摄"] | 选择alt属性中有空格隔开的“手机拍摄”字样的img标签 |
| img[alt|="参赛作品"] | 选择alt属性以“参赛作品-”开头的img标签 |

新增伪类：

| :empty | 选择空标签 |
| :focus | 选择当前获得焦点的表单元素 |
| :enabled | 选择当前有效的表单元素 |
| :disabled | 选择当前无效的表单元素 |
| :checked | 选择当前已经勾选的单选按钮或者复选框 |
| :root | 选择根元素，即html标签 |

伪元素：伪元素用双冒号表示，IE8兼容单冒号。
::before 和 ::after 常用于清除浮动或者一些小图标
::selection文档中被高亮的部分（被圈住的）
::first-letter 会选中某元素中(必须是块级元素)第一行的第一个字母
::first-line 会选中第一行的全部文字。

层叠性：多个选择器可以同时作用于同一个标签，效果叠加。
权重：id权重>clss权重>标签权重
！important提升权重
可通过(id的个数，class的个数，标签的个数)组成三位数比大小。

img标签属于行内可替换元素，并不是inline-block。
不要在p元素中放div元素
行内元素内不要放块级元素
块级元素的默认width是auto并非100%
outline表示元素外轮廓，在border外边，不占空间。
行内元素设置margin-top/bottom无效，left/right有效
行内元素的padding上下会被撑开但不占空间。
line-height无法撑起行内非替换元素。

设置color时，rgba表示法兼容到IE9，不如16进制和rgb兼容好。

text-decoration:line-through 删除线
font-style:italic 字体倾斜
font-family 设置字体，英语字体放前面，汉语放后面。
@font-face 定义字体

line-height 行高 可以是px的数值，也可以是1.5这种代表字号的倍数。
也可以是百分数150%等于1.5，都是字号的1.5倍。
line-height继承：写具体数值比如30px就继承该值、如果是小数(比例)1.5或者2，就继承比例，最终行高是子元素的fontsize乘比例。
百分比的话就是继承百分比计算出来的值，200% x 父元素的fontsize 。
单行文本垂直居中设置行高等于盒子高。

font属性是合写属性：font-style、font-weight、font-size/line-height、font-family使用合写属性时必须设置font-size和font-family才能生效。

有继承性的：color、font-开头的、list-开头的、text-开头的、line-开头的继承的情况下有个就近原则，选择器权重计算会失效。（离目标越近的会生效）
盒模型：盒子默认的宽高是盒子内容的宽高，设置box-sizing:border-box;就是以边框为宽高
padding用三个数值的时候是上、左右、下。
box-sizing属性兼容到IE9

margin在竖直方向有塌陷现象，小的margin会塌陷到大的margin里，从而margin不叠加，只以大值为准。
margin传递问题，（子元素有margin-top父元素也被带下来了）如果底部和父元素重合并且父高度auto，会产生margin-bottom传递。
建议父子之间使用padding，兄弟之间使用margin
怎么解决：
1给父元素设置padding-top替代子元素的margin-top
2给父元素设置overflow:hidden
3父元素加上border
4子元素设置浮动
5父元素设置浮动
6子绝父相定位

块级元素：不并排显示、能设置宽高、width自动撑满
行内元素：并排显示、不能设置宽高、width自动收缩
行内块：并排显示、能设置宽高

display:none可以将元素隐藏，元素会放弃位置，跟没写一样,但在DOM中是存在的
visibility:hidden隐藏元素，不放弃位置

浮动的最本质功能就是来实现并排。要浮动都要浮动，父盒子要有足够的宽度，否则子元素会掉下去。

浮动的元素不在区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。

右浮动会倒叙显示。

BFC规范：块级格式化上下文，是页面上一个独立的容器，里面的元素不会影响外面的，外面的也不会影响里面的。
例子：如果一个盒子不设置height，当他的子元素都浮动时，无法撑起他自身。是因为这个盒子没有形成bfc

怎么形成BFC：
1让盒子浮动（float的值不是none）
2position的值不是static或relative（设置成flex固定定位或absolute绝对定位）
3display的值是inline-block、flex或者inline-flex
4overflow：hidden（溢出边框才会隐藏）
IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以用zoom:1属性“让盒子拥有layout”
BFC可以取消盒子margin塌陷、可以阻止元素被浮动元素覆盖。

清除浮动的方法：
1让内部有浮动的父盒子形成BFC，他就能关住内部的浮动，此时最好的办法就是overflow:hidden
2给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除
（缺点，margin-top会失效，因为会往上踹一个没有高度的盒子）
3使用::after伪元素给盒子添加最后一个子元素，并且给after设置clear:both，注意要给after转为块级元素。

绝对定位不会影响其他元素，但是会对其他元素形成压盖。
脱离标准文档流的方法：浮动、绝对定位、固定定位绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子作为基准。
绝对定位脱离文档流后就不能用margin:0 auto的方式水平居中了
通过绝对定位让盒子垂直居中：

position:absolute;top:50%;margin-top:-自己高度的一半

border线形：solid实线、dashed虚线、dotted点状线
border-radius的值通常是px 代表圆的半径，百分号时代表从一条边的百分之多少的地方开始
border-radius有三个值得话，第一个值表示对左上角的设置，第二个值表示对右上角和左下角的设置，第三个值表示对右下角的设置。
border-radius有两个属性值的话，第一个值表示左上角和右下角，第二个值表示右上角和左下角。

盒子阴影：box-shadow：x偏移 y偏移 模糊量 【可选延展值(向四个方向扩散)】颜色内阴影：在x偏移前加inset即可。用逗号隔开就可以多阴影了。
在线测试阴影：https://html-css-js.com/css/generator/box-shadow/
text-shadow 文本阴影

背景与渐变：padding区域有背景颜色background-size用来设置背景图片的尺寸兼容到IE9，之前的bgc和bgr可以到IE6

background-size属性用来设置背景图片的尺寸，兼容到IE9

background-size:100px 200px
                宽度   高度

值也可以用百分数来设置，表示为盒子宽、高的百分之多少，需要等比例设置的值写auto

背景裁切：
background-clip属性用来设置元素的背景裁切到哪个盒子，兼容到IE9
默认值是border-box 背景延伸到边框。
padding-box 背景延伸至内边(padding)不会绘制到边框处，仅在dotted、dashed边框可察觉。
content-box 背景被裁剪到内容区

背景起源：background-origin
背景固定：background-attachment 它决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

| fixed | 自己滚动条不动，外部滚动条不动 |
| local | 自己滚动条动，外部滚动条动 |
| scroll | 自己滚动条不动，外部滚动条动（默认值） |

overflow:scroll超出部分有滚动条
background-position可以设置背景图片出现的位置。
合写属性：background:背景颜色 背景图片 背景重复 背景位置 线性渐变

background-image属性可以用linear-gradient()创建线性渐变背景

background-image:linear-gradient(to right, blue, red)
                                 渐变方向  开始颜色 结束颜色

也可以写成度数，比如将to right 替换成180deg
可以有多个颜色值，并用百分数来定义它们出现的位置

linear-gradient(to bottom, blue, yellow 20%, red) //在20%处变黄色

径向渐变：
radial-gradient(50% 50%, red,blue) 【圆心坐标】
2d与3d变形transform:rotate(45deg) 平面的盒子旋转45度，正值顺时针，负值逆时针
transform-origin:设置变换的原点，0 0 意思是左上角。
transform:scale(3)缩放属性，大于一放大、小于一缩小。
transform:skew(x斜切角度，y斜切角度)斜切变形
transform:translate(向右移动多少，向下移动多少) 位移，和相对定位类似，老家留坑形影分离相对定位兼容到ie6 这个兼容到ie9

不同浏览器的私有前缀，用来对实验性质的CSS属性加以标识

| Chrome | -webkit- |
| Firefox | -moz- |
| IE、Edge | -ms- |
| 欧朋 | -o- |

3D旋转
将transform属性的值设置为rotateX()或者rotateY()，即可实现绕横轴、纵轴旋转
perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离”单位是px
一定记住，空间移动要添加在3D旋转之后

transform:rotateX(30deg) translateX(30px) translateZ(100px)

CSS3新增transition，自动添加补间动画，从IE10开始兼容，内存开销小

transition:需要过渡的属性 动画时长 速度变化曲线 延迟时间

哪些属性可以参加过渡：
所有数值类型的属性都可以参加过渡，比如width、height、left、top、bofder-radius等
背景颜色和文字颜色都可以参加过渡
所有变形（2D、3D）

网站https://cubic-bezier.com 可以生成贝塞尔曲线，自定义动画缓动参数

动画的定义：
可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

@keyframes r { // 动画的名字
    from{ // 初始状态
        transform:rotate(0)
    }
    to{ // 结束状态
        transform:rotate(360deg)
    }
}
/* 调用动画 */
animation:r 1s linear 0s 可选次数; // 如果希望永远执行填写infinite

如果需要动画偶数次自动逆向执行，加上alternate参数即可。

animation:movelr 2s linear 0s infinite alternate;

如果需要动画停在最后结束状态，加forwards

animation:movelr 2s linear 0s forwards;

offsetWidth = 内容宽度+内边距+边框
当设置了box-sizing:border-box时 设置的width就等于offsetWidth(一个元素的总宽度)

margin负值：
margin-top和margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，元素自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

圣杯布局和双飞翼布局的目的：
三栏布局，中间一栏最先加载和渲染，两侧内容固定，中间内容随宽度自适应，一般用于PC网页

// 圣杯
.container 父元素，设置padding-left是left的宽度、padding-right是right的宽度 设置最小宽度两个padding和一个盒子的
center  宽度100%
left 宽度固定px margin-left:-100% 这里是父元素的宽度哦，这样它就移动到和center同样的位置了。然后再设置position:relative right:left的宽度
right 宽度固定px margin-right:-自身宽度 相当于它没有宽度了
全部float:left
// 双飞翼
center with100% 【它里面有个wrap无float，左右margin是下面两个的宽】
left 固定宽 margin-left:-100%
right 固定宽 margin-left:-自身宽度
所有float：left

clearfix清除浮动，写在有浮动的父元素中，用来封住浮动

.clearfix::after{
    content:'';
    display:table;
    clear:both;
}
.clearfix{
    *zoom:1; 兼容IE低版本
}

一些题目：

FC - Formatting Context，元素在标准流里面都是属于一个FC的
块级元素都是在BFC中布局的。行内元素在IFC。
BFC可以看作是一个独立的容器，其中的元素布局和渲染遵循特定的规则，与外部的元素相互独立。
MDN上整理出在哪些具体的情况下会创建BFC：

BFC的作用：
在BFC中，box会在垂直方向上一个挨着一个的排布
垂直方向的间距由margin属性决定
在同一个BFC中，相邻两个box之间的margin会折叠
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘

1.解决margin折叠问题，让两个box所属于不同的BFC即可。
2.解决浮动高度塌陷（但不能解决绝对定位元素的高度塌陷），事实上要使用BFC解决高度塌陷需要满足两个条件：

CSS3并不是一个单一的规范，而是一系列独立模块的集合，这些模块扩展了CSS的功能。
选择器：属性选择器、结构性伪类（nth-child、nth-last-child、first-of-type）
背景和边框：边框图片（border-image 允许使用图片创建边框）、多重背景（在单个元素上使用多个背景图片）
文本效果：文本阴影（text-shadow）、文本溢出（text-overflow）
转换和动画：2D/3D转换（transform）、CSS动画（animation）

通常会采取哪些措施来确保网站或者应用在不同浏览器上的兼容性？
在现代工程化的开发架构下，大多数的浏览器兼容性问题是通过工程化中的配置项来解决的。
比如browserslist可以配置目标的浏览器或者node环境，然后在不同的工具中起作用。比如autoprefixer/babel/postcss-preset-env等，在进行正确配置后，打包时会自动根据目标环境添加css前缀、babel代码转换等。
如果我们想要额外的适配，通常在项目中还会引入normalize.css和polyfills来添加特定的CSS、JS适配问题
还有一些针对移动端的比如移动端点击300毫秒延迟、移动端1px边框问题，都可以在特定的环境或需求下解决。
多查询caniuse网站
使用比如BrowserStack来测试

当我们浮动多个盒子时，为了让盒子有间距通常margin-right，但因为最右侧的盒子也有外边距，就导致一行放不下，此时我们可以在所有盒子外面包一层并设置margin-right负值即可。

z-index生效的条件需要元素的position属性设置为absolute、fixed或relative

前端

请先 登录 再评论