css学习总结
一、css简介
定义
CSS：层叠样式表（Cascading Style Sheets）用于渲染HTML元素标签的样式，美化网页的一门
作用
使用CSS设置样式，可以让展示数据的HTML代码和设置样式的CSS代码进行分离，可以增强网页的展示能力。
css规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
格式：选择器{属性：属性值；}
css三大特性
- CSS层叠性：是浏览器处理冲突的一个特性。
- CSS继承性：子元素可以继承父元素的样式。
- CSS优先级：！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
html里引入css的三种方式
（1）通过标签上的style属性为当前元素设置CSS样式。
例如：<div style="border:1px solid red;background:pink"></div>
（2）通过head标签内部的style标签，书写CSS代码来引入CSS样式。
例如：
（3）通过外部样式表 (link链接)，当CSS代码特别多的时候，可以将CSS代码统一写在一个独立的文件中，文件的后缀名为.css，在HTML文件中引入CSS文件即可。
例如：<link rel="stylesheet" href="css/demo.css"/>
二、css基础语法
css元素分类
块级元素特点：
每个块级元素都会独自占据一行
高度，行高、外边距以及内边距都可以控制。
宽度默认是容器的100%
可以容纳内联元素和其他块元素。
常见的块元素有
<h1>~<h6> 、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。行内元素特点：
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。（a特殊）
常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。行内块级元素特点：
和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制。三种元素显示模式转换：
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
元素之间的嵌套：
行内元素只能包含行内元素
块级元素可以包含所有的行内元素和部分块级元素。
p标签，h标签都不能包含块级元素元素的显示与隐藏
display：使段落生出行内框。格式：display：属性值；
display属性值 描述 none 此元素不会被显示。元素被隐藏之后，不占用原来的位置 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。table-row 此元素会作为一个表格行显示（类似 <tr>）。table-column 此元素会作为一个单元格列显示（类似 <col>）table-cell 此元素会作为一个表格单元格显示（类似 <td>和<th>）table-caption 此元素会作为一个表格标题显示（类似 <caption>）inherit 规定应该从父元素继承 display 属性的值。 visibility ：属性规定元素是否可见。格式：visibility：属性值；
visibility属性值 描述 visible 默认值。元素是可见的。 hidden 元素是不可见的。元素隐藏之后，占原来的位置 collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。 inherit 规定应该从父元素继承 visibility 属性的值。 overflow：设置溢出元素是否可见。格式：overflow：属性值；
overflow属性值 描述 hidden 溢出部分隐藏 visible 溢出可见——也就是默认不设置的状态 scroll 溢出部分隐藏，但是存在滑动条，滑动可见，无论是否溢出都有滑动条 auto 溢出部分隐藏，溢出才有滑动条 css选择器
通用选择器：*{CSS属性}
标签选择器：元素名称{CSS属性}
class类选择器：.class值{CSS属性}
ID选择器：#id值{CSS属性}
后代选择器：父选择器 后代元素选择器{CSS属性}
子元素选择器：父选择器>子选择器{CSS属性}
分组选择器：选择器1，选择器2,……选择器n{CSS属性}
属性选择器：选择器[属性条件]{CSS属性}
相邻兄弟选择器：大哥~小弟{CSS属性}
伪元素选择器：选择器:状态{CSS属性}
伪元素：在页面上不存在的元素，但可以通过css添加上去。每个元素都有自己的伪元素
例如： :after 在…之后，:before 在…之前。
CSS常用属性
（1）边框border属性及属性值描述
边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width:数值 ;
边框颜色 border-color: top值 right值 bottom值 left值;圆角边框 border-radius：数值；
边框间隙去掉 border-collapse: collapse;
简写 border: width style color;
（2）文本text属性及属性值描述
元素字母 text-transform: capitalize | uppercase | lowercase | none;
文本修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)none(默认值) 通常我们使用这个属性将a标签的默认下划线取消
文本排列 text-align: justify | left | right | center;
首行缩进 text-indent: 数值 | inherit;
文本阴影 text-shadow:数值;文本行高 line-height：数值；两行文本之间基线的距离就是做行高。
文字间距 letter-spacing:水平位置 垂直位置 模糊距离 阴影颜色;
单词间距 word-spacing:数值；
空格 white-space: pre(保留) | nowrap(不换行) | normal;
（3）字体font属性及属性值描述
颜色属性 color: 数值;
字号大小 font-size: 数值;
字体样式 font-family: “Courier New”；
字体风格 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
字体粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
字体变型 font-variant: small-caps;(小型大写字母) normal;(正常)（4）背景background属性及属性值描述
背景 background: transparent; /透视背景*/
背景颜色 background-color: 数值;
背景图片 background-image: url() | none;
重复背景 background-repeat: inherit该属性继承父元素| no-repeat不平铺 | repeat平铺 | repeat-x沿x轴平铺 | repeat-y沿y轴平铺;背景滚动 background-attachment: fixed背景固定 | scroll背景随内容滚动;
背景位置 background-position:数值 | top | bottom | left | right | center;背景透明 background: rgba(0,0,0,0.3);
背景渐变 background: linear-gradient(angle,color1,color2);angle为角度，color1为起点结点，color2为结束点结点。CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。使用 rgba() 函数来定义颜色结点。
简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;
（5）列表 list-style样式及属性值描述
列表类型 list-style-type: disc实心圆| circle空心圆 | square实心方框 | decimal阿拉伯数字 | lower-roman大写罗马数字 | upper-roman小写罗马数字 | lower-alpha小写英文 | upper-alpha大写英文 | none不编号;
列表位置 list-style-position: outside | inside;
列表图像 list-style-image: URL;
简写 list-style:目录样式类型 | 目录样式位置 | url;（6）链接a样式及属性值描述
a /所有超链接/
a:link /超链接文字格式/
a:visited /浏览过的链接文字格式/
a:active /按下链接的格式/
a:hover /鼠标转到链接/（7）光标属性及属性值描述
光标形状 cursor:hand链接手指 | crosshair十字体 | text文字型 | wait漏斗 | move 十字箭头, 朝右| help加一问号 | e-resize | nw-resize箭头朝左上 | w-resize箭头朝左 | s-resize | se-resize 箭头斜右下| sw-resize箭头斜左下;
（8）透明度设置
opacity:不透明度 opacity:0.5; 取值在0-1之间的小数。
三、css三大模块——盒子模型、浮动，定位
网页布局的本质
用css来摆放盒子，把盒子放置在对应的位置。
css中3种定位布局方式：标准流，浮动，定位
盒子模型
所谓盒子模型，在HTML里，所有页面元素都可以看成一个一个的框（盒子），这些元素与元素之间的距离，元素的边框，元素与元素之间的距离都会影响元素的位置和元素本身的宽和高。
- margin(外边距) - 盒子与盒子之间距离
- border(边框) - 围绕在内边距和内容外的边框。
- padding(内边距) - 盒子的内容与边框之间的距离。
- content(内容) - 盒子的内容，显示文本和图像。
标准流
标准流指元素排版布局，默认自动从左到右、从上往下的排列方式。
排列布局等级：块级元素（独占一行）、行内元素（可与其他元素并列）、行内块元素（不自动换行，可识别宽高）。注意：三者可通过display属性相互转换
浮动
浮动指设置了浮动属性float的元素会脱离标准流的控制。最早用来做文字环绕效果，给图片添加浮动。格式：float：属性值；注意：浮动脱离标准流的控制，不占有原来位置，只有左右浮动。
清除浮动主要是为了解决父元素在不设定高度的情况下，子元素因为浮动而引起的父元素内部高度为0的问题。格式：clear：属性值；
因浮动而造成父级边框塌陷问题解决方式：
法一：设置父元素边框
法二：浮动元素后加一个空的div
法三：设置overflow：hidden超出部分隐藏，注意：下拉框场景避免使用
法四：使用after伪元素清除浮动，:after 方式为空元素的升级版，好处是不用单独加标签了
定位
元素的定位属性主要包括定位模式和边偏移两个部分。
边偏移属性设置，语法格式：选择器{边偏移属性：数值；}
边偏移属性 描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧偏移量，定义元素相对于其父元素右边线的距离 定位模式设置，语法格式：选择器{position:属性值；}
position属性值 描述 static 自动定位（默认定位方式）不脱标 relative 相对定位，相对于其原文档流的位置进行定位，不脱标 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位，脱标 fixed 固定定位，相对于浏览器窗口进行定位，脱标 sticky 粘性定位，相对定位与固定定位结合体，不脱标 定位口诀：子绝父相
1、因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。
2、父盒子布局时，需要占有位置，因此父亲只能是 相对定位.
这就是子绝父相的由来。
定位叠放次序属性设置
格式：z-index：数值；
1、z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2、如果取值相同，则根据书写顺序，后来居上。
3、后面数字一定不能加单位。
4、只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。定位模式转换
跟浮动一样，元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，
四、css精灵图
精灵图本质
CSS 精灵图本质就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的"background-image",“background-repeat”,"background-position"的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。
精灵图优缺点
优点：
减少HTTP请求数，提高页面加载速度；
增加图片信息重复度，提高压缩比，减少图片大小；
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
缺点：
在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。
图片合并麻烦；
维护麻烦，修改一个图片可能需要从新布局整个图片，样式。
精灵图不能随意改变大小和颜色。
精灵图基本用法
1、工具：PS、HBuilder/VS Code
2、素材：任意一张精灵图都行。打开ps导入精灵图
3、测量字母的大小及坐标。（1）通过矩形选框工具，测量字母的大小，并将div的大小设置为字母的大小。
（2）打开窗口菜单栏中的信息，可以查询字母width、height、x轴和y轴的信息。
（3）将鼠标光标移动到字母的左上角位置，通过右侧的信息面板测出x和y的值。4、在css中编写style样式，通过background-position定位到字母所在的位置。
总结：雪碧图的使用步骤：
1、先确定好使用的图标
2、测量图标的大小
3、根据测量的结果，创建一个元素
4、将雪碧图设置为元素的背景
5、设置一个偏移量以显示正确的图片