CSS总结
基础部分还需参照 CSS MDN
上课内容
CSS: cascading style sheets
组成部分：
选择器selector、属性property、属性值value、声明declaration（属性和属性值组合）
在页面中使用css：
- 外链
- 嵌入
- 内联如
(不推荐)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVYsPOqJ-1661913174799)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e52b3dee79248f799f6284fa0b3acdc~tplv-k3u1fbpfcp-watermark.image?)]
选择器selector:找到页面中的元素，以便设置样式。
选择元素方法：
- 按照标签名、类名（.）、id（#）
- 按照属性
- 按照dom树中的位置
通配选择器*
属性选择器：
“:”+属性值
<label>用户名：</label>
<input value="zhao" disabled>
<label>密码</label>
<input value="123456" type="password"/>
<style>
:disabled{
background: #eee;
color: #999;
}
</style>
input[type=“password”]（属性+属性值）：
<label>用户名：</label>
<input value="zhao" disabled>
<label>密码</label>
<input value="123456" type="password"/>
<style>
input[type="password"]{
border-color: red;
color: red;
}
</style>
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
a[href^="#"]{
color: #f54767;
background: 0 center/1em url(https://assets.codepen.io/58477/arrowup.png) no-repeat;
padding-left: 1.1em;
}
a[href$=".jpg"]{
color: deepskyblue;
background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
padding-left: 1.2em;
}
</style>
以^=表示以#开头的进行匹配，以$=表示以=后元素为结果的进行匹配
伪类pseudo-classes：
- 不基于标签和属性定位元素
- 有状态伪类和结构性伪类
状态伪类：
a的不同状态显示不同颜色，focus input，外边框变格式为outline
<a href="http://example.com">example.com</a>
<label>
用户名：
<input type="text">
</label>
<style>
a:link{
color: black;
}
a:visited{
color: gray;
}
a:hover{
color: orange;
}
a:active{
color: red;
}
:focus{
outline: 2px solid blue;
}
</style>
结构伪类：
可以使用first/last-child、2n-child指定奇偶等
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>星球大战</li>
<li>复仇者联盟</li>
<li>侏罗纪世界</li>
</ol>
<style>
li{
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em;
}
li:first-child{
color: coral;
}
li:last-child{
border-bottom: none;
}
</style>
预览：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-09pt8KFD-1661913174801)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6d1d8ce1b3d4128a7e9022877d92478~tplv-k3u1fbpfcp-watermark.image?)]
组合方式：
<label for="">
用户输入姓名
<input class="error" value="aa">
</label>
<span class="error">
最少3个字符
</span>
<style>
.error{
color: red;
}
input.error{
border-color: red;
}
</style>
组合方式
| 名称 | 语法 | 说明 | 实例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input：focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B，如果它在A后且和A同级 | h2~p |
| 相邻选择器 | A+B | 选中B，如果它紧跟在A后 | h2+p |
<article>
<h1>国家公园</h1>
<p>国家公园是位于……</p>
<section>
<h2>气候</h2>
<p>因为国家公园……</p>
<p>高于这个高度……</p>
</section>
</article>
<style>
article p{
color: black;
}
article > p{
color: blue;
}
h2 + p{
color: red;
}
</style>
选择器组：
body, h1, h2, h3, ul, ol, li{
margin: 0;
padding: 0;
}
[type="checkbox"],[type="radio"]{
box-sizing: border-box;
padding: 0;
}
颜色rgb：0-255
颜色hsl：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0xox3zt-1661913174802)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce21ee0eae0d44f19a012384547d5164~tplv-k3u1fbpfcp-watermark.image?)]
颜色关键字：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C6Ir9I4C-1661913174803)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/472fd23b3df54102822a08fb242291d9~tplv-k3u1fbpfcp-watermark.image?)]
alpha透明度：在后面追加即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I8A6AWE1-1661913174804)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea5c8c46334049b3910747323f8d0e06~tplv-k3u1fbpfcp-watermark.image?)]
字体font-family：
h1{
font-family: Georgia, 'Times New Roman', Times, serif;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
设置多个是因为有的浏览器可能不存在该字体，serif和sans-serif表示衬线体，不是指特定字体，是一类字体
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QvyRGMVs-1661913174806)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85698fa9d3714e0c86883fc64b2cea77~tplv-k3u1fbpfcp-watermark.image?)]
web font：（下载字体后应用）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2y5jDZj-1661913174807)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4dde7f7d5394fe8a39d095f54a9eb07~tplv-k3u1fbpfcp-watermark.image?)]
font-size：
- 关键字：small、medium、large
- 长度：px、em
- 百分比（相对于父元素）
font-weight：字体粗细 （font-weight：100）
font设置：font:style(斜体等设置) weight size/height family
如font:bold 14px/1.7 Helvetica, sans-serif(斜体、粗细、大小/行高、字体族)
行高line-height（通常设置为1.6倍行高）：
对齐方式text-align：left、right、center、justify（两端对齐）、inherit（从父元素继承）
间距spacing：letter-spacing（字母间距）和word-spacing（单词间距）
首行距离左边边距text-indent：文本块中首行文本的缩进
装饰text-decoration：none、underline、line-through、overline
空白符white-space：
| 属性值 | 说明 |
|---|---|
| normal | 默认，空白会被浏览器忽略 |
| pre | 空白会被浏览器保留 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止 |
| pre-wrap | 保留空白符序列，但是正常地进行换行 |
| pre-line | 合并空白符序列，但是保留换行符 |
| inherit | 规定应该从父元素继承 white-space 属性的值 |
调试css：
- 右键点击页面，选择检查
- 使用快捷键：ctrl+shift+I(win) cmd+opt+i(mac)
选择器的特异度specificity：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5EnkWIfl-1661913174807)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09fbd43fb1f54d90af6b3a78f8290990~tplv-k3u1fbpfcp-watermark.image?)]
继承：某些属性会自动继承其父元素的计算值，但宽度等一般不能继承，若要其继承，则用inherit
*{
box-sizing: inherit;
}
html{
box-sizing: border-box;
}
.some-weight{
box-sizing: content-box;
}
每个属性都有初始值：注意background-color初始值为transparent，margin-left初始值为0；可以使用initial显式重置为初始值，如background-color：initial
css求值过程：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vJPiicra-1661913174808)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f6b48680c424148a46673977b551b6b~tplv-k3u1fbpfcp-watermark.image?)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqImPnXP-1661913174809)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e43580b799664c268f0d145430923585~tplv-k3u1fbpfcp-watermark.image?)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uLJ2D8KD-1661913174810)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cbba3b6ba3f4b7e8ec47c07059c987e~tplv-k3u1fbpfcp-watermark.image?)]
布局：确定内容大小和位置的算法，依据元素、容器、兄弟节点和内容等信息计算。
布局相关技术：常规流（块级、行级、表格布局、flexbox、grid布局）、浮动、绝对定位
- 盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RrYgQw6M-1661913174811)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c992a4792ab43f98205e67d4d432401~tplv-k3u1fbpfcp-watermark.image?)]
- width：
- 指定content box宽度
- 取值为长度、百分比（相对于content box宽度）、auto（由浏览器根据其他属性确定）
- height：
- 指定content box高度
- 取值为长度、百分比（相对于content box高度，前提：容器有指定高度）、auto（由内容计算得来）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u0BCpvTD-1661913174811)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc103dfc18954884b597fba6f7cadc69~tplv-k3u1fbpfcp-watermark.image?)]
3. padding：
- 指定元素四个方向的内边距（顺序：上右下左，两个数值表示上上右右）
- 百分数相对于容器宽度
- border：指定容器边框样式、粗细颜色
- 三种属性：border-width border-style border-color
- 四个方向：border-top border-right border-bottom border-left
border: 1px solid black;
border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: green blue;
border-top: 1px solid black;
border-top-width: 1px;
当四条边框颜色、宽度不同时，可以绘制正方形，直角三角形等
- margin：
margin:auto(水平居中)
- 指定元素四个方向的外边距
- 取值可以时长度、百分比（相对于容器宽度）、auto
margin collapse
<div class="a"></div>
<div class="b"></div>
<style>
.a {
background: lightblue;
height: 100px;
margin-bottom: 100px;
}
.b {
background: coral;
height: 100px;
margin-top: 100px;
}
</style>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zqoXOm4w-1661913174812)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/539e57ec53cb42508bbb9ccf8130fb88~tplv-k3u1fbpfcp-watermark.image?)]
.b {
box-sizing: border-box;
width: 100%;
padding: 1em;
border: 3px solid #ccc;
}
超出边框时可以设置：visible、hidden、scroll
- display：
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级
- none：排版时完全被忽略
常规流Normal Flow：
根元素、浮动和绝对定位的元素会脱离常规流，其他元素都在常规流内
常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文（Inline Formatting Context – IFC）
- 只包含行级盒子的容器会创建一个IFC
- IFC的排版规则：盒子在一行内水平摆放，一行放不下时换行。
text-align决定一行内盒子的水平对齐，vertical-align决定一个盒子在行内的垂直对齐，避开浮动float元素
<div>
this is a paragraph of text with long word Honksjdhuuhuiyeuiydeucnjdk.
Here is an image<img src="https://assets.codepen.io/59488/cat.png" alt="cat">
And <em>Inline Block</em>
</div>
<style>
div{
width: 10em;
background: #411;
}
em{
display: inline-block;
width: 3em;
background: #33c;
}
</style>
块级排版上下文（Block Formatting Context – BFC）
会创建BFC的情况：
- 根元素
- 浮动、绝对定位、online-block
- Flex子项和Grid子项
- overflow（内容溢出）值不是visible的块盒
- display：flow-root（新的布局方式，它在块级布局方式的基础上对子元素的浮动float属性进行了修正，避免塌陷）
BFC内的排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面合并
- BFC不会和浮动元素重叠
Flex Box：
- 一种新的排版上下文
- 可以控制子级盒子的：摆放的流向、摆放顺序、盒子的宽度和高度、水平和垂直方向的对齐、是否允许折行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apPnHq07-1661913174813)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0232b5f9c6d646c0ba6639fb8e1833a3~tplv-k3u1fbpfcp-watermark.image?)]
示例：
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
<style>
.container{
display: flex;
border: 2px solid #966;
}
.a, .b, .c{
text-align: center;
padding: 1em;
}
.a{
background: #fcc;
}
</style>
主轴与侧轴：（主轴水平方向，侧轴竖直方向）
主轴：
- flex-direction：决定主轴的方向
column-reverse | column | row | row-reverse;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ggAReR9e-1661913174813)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93066a0df0b04dc6a1b59509914780e2~tplv-k3u1fbpfcp-watermark.image?)]
- flex-wrap：如果一条轴线排不下，如何换行。
nowrap | wrap | wrap-reverse;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vMZhxldO-1661913174814)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf505e258cb2481ba498da5ca60503bd~tplv-k3u1fbpfcp-watermark.image?)]
- flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: ;
- justify-content:项目在主轴上的对齐方式
flex-start | flex-end | center | space-between | space-around | space-eventy;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cP1uLdx8-1661913174814)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ab385c75f914a8b906beeac2cce777b~tplv-k3u1fbpfcp-watermark.image?)]
侧轴：
- align-items:交叉轴上如何对齐
flex-start | flex-end | center | baseline | stretch;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L2HfNHVu-1661913174815)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bdf06411d404518bb7ab35eefa803b7~tplv-k3u1fbpfcp-watermark.image?)]
- align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B9NKR5xp-1661913174816)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8eab7209605b47b880146652b4e759a2~tplv-k3u1fbpfcp-watermark.image?)]
Flexibility:
- 可以设置子项的弹性，当容器有剩余空间时会伸展，不够时会收缩。
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
<style>
.container{
display: flex;
border: 2px solid #966;
}
.a, .b, .c{
width: 100px;
}
.a{
flex-grow: 2;
}
.b{
flex-grow: 1;
}
</style>
（剩余空间按照2：1分配给a和b）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BvyDll1D-1661913174816)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/192df84229684a93902d88b3e447a742~tplv-k3u1fbpfcp-watermark.image?)]
Grid布局：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TeuggMC2-1661913174817)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/972867be5272428ebb66f37c7471934d~tplv-k3u1fbpfcp-watermark.image?)]
display：grid
- display：grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占哪些行列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8FzH7uTV-1661913174817)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/538ffaed625049e1a228604266af9c32~tplv-k3u1fbpfcp-watermark.image?)]（columns划分列，rows划分行，fr表示1份，将剩余空间进行划分分完 ）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QpPxbT0F-1661913174818)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bde348408174356b4b268175de20fb6~tplv-k3u1fbpfcp-watermark.image?)]
<style>
.container{
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25% 25% 25% 25%;
}
.a{
background-color: pink;
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 4;
grid-column-end: 4;
}
.b{
background-color: pink;
grid-area: 1/1/3/3;
}
（可以利用浏览器调试工具查看网格）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1eqOrxg-1661913174824)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68934b64b4f04182b7947bce86d8868a~tplv-k3u1fbpfcp-watermark.image?)]
float浮动
position属性：
- static：默认值，非定位元素
- relative:相对自身原本位置偏移，不脱离文档流，在常规流里面布局，使用top、right、bottom、left设置偏移长度，流内其他元素当他没有偏移一样布局
- absolute：绝对定位，相对最近的非static祖先元素定位，脱离常规流，不会对流内元素布局造成影响
- fixed：相对于视口绝对定位