CSS学习笔记

南忆發表於 2021-2-6 15:25:00

<h2>1. CSS</h2>
<ul>
<li>层叠样式表，又称级联样式表，简称样式表</li>
</ul>
<div class="para">
<ul>
<li>是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 </li>

</ul>

</div>
<ul>
<li>CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</li>

</ul>
 
<h2>2.使用方式</h2>
（1）内联方式：直接把CSS用style属性添加到标签中（行内样式）
<div class="cnblogs_code">
<pre><p style="color:red;">设置字体颜色为红色</p></pre>
</div>
 （2）内部样式表：添加到头部的style
<div class="cnblogs_code">
<pre><head>
<style>
p{
　　　　color:red;
　　}
</style>
</head></pre>
</div>
 （3）外部样式表：新建一个CSS文件，在其中写样式，在html文件中导入
<div class="cnblogs_code">
<pre><link rel="stylesheet" href=" " /></pre>
</div>
 （4）导入式（不推荐使用）
<div class="cnblogs_code">
<pre><head>
<style>
@import url(my.css);
</style>
</head></pre>
</div>
 
<ul>
<li>
<h3>link 和 import 的区别</h3>
<ul>
<li>link属于HTML标签，而@import是CSS提供的</li>
<li>ink在页面加载时同时加载，而@import引用的CSS会等到页面被加载完再加载</li>
<li>link是HTML标签，无兼容问题；import只在IE5以上才能识别</li>
<li>link方式的权重高于import的权重。</li>
<li>link可用js控制dom改变样式，import只能用来加载CSS</li>
</ul>
</li>
</ul>
<h2>3.CSS的注释</h2>
/*　　*/
 
<h2>4.选择器</h2>
（1）通用选择器（*）：优先级最低，适用范围最广
<div class="cnblogs_code">
<pre>*{
color:red;
}</pre>
</div>
 （2）元素选择器：p、div、a、img、body...
<div class="cnblogs_code">
<pre>p{
color:red;
}</pre>
</div>
  （3）类选择器：.类名
<div class="cnblogs_code">
<pre>.类名{
color:red;
}</pre>
</div>
 （4）ID选择器：#ID名
<div class="cnblogs_code">
<pre>#ID名{
color:red;
}</pre>
</div>
 
<h2>5.CSS特征</h2>
<ul>
<li>继承性：被包含在内部的标签可拥有外部标签的样式
<ul>
<li>可继承样式，如 text-* ， font-* ， line-*</li>
<li>不可继承样式，如 border ， padding ， margin</li>
</ul>
</li>
<li>层叠性：可定义多个样式</li>
<li>优先级：</li>
<ul>
<li>使用方式：行内 > 内部 > 外部 > 导入</li>
<li>选择器：ID选择器 > 类选择器 > 元素选择器 > 通用选择器</li>
</ul>
</ul>
 　　　　　　　　　外部ID选择器 > 内部类选择器
 
<h2>6.背景background</h2>
（1）background-color（背景色）: ①rgb()  ②#  ③默认为transparent透明　　/* #f00（红）    #0f0（绿）    #00f（蓝） */
（2）background-image（背景图片）: url() 　　/* 同时定义背景图和颜色时，图片会覆盖在颜色上；加载的图片默认在水平方向和垂直方向平铺 */
（3）background-repeat（图片重复）: ①repeat-X（水平平铺）  ②repeat-Y（垂直平铺）  ③no-repeat（只显示一张）
（4）background-attachment（是否随内容滚动）: ①scroll（默认，滚动）  ②fixed（内容滚动时，图片不动）
（5）background-position（图片位置）: ①方位名称：left，right，top，bottom，center
　　　　　　　　　　　　　　　　　　 ②精确数字：30px 10px （水平垂直）
　　　　　　　　　　　　　　　　　　 ③混搭：30px center
　　ps：只写一个参数时，第二个参数默认center
（6）background-size（图片大小）: ①50px 50px  ②100% 100%  ③cover（完全覆盖背景）  ④contain（按照图片比例扩大至最大尺寸，不一定会覆盖整个背景）
（7）背景简写时值的顺序
<ul>
<li>background：color，image，repeat，attachment，position，size</li>
</ul>
 
<h2>7.字体font</h2>
（1）font-style（字体样式）: ①normal（默认）  ②italic（斜体）
（2）font-size（字体大小）: 如 18px
（3）font-family（字体）: 默认值根据浏览器不同而不同。值可设置，如 "宋体"
（4）font-weight（字体粗细）: ①normal（默认，值为400）  ②bold（粗体，值为700）  ③bolder（更粗）  ④lighter（更细）
（5）font-variant: ①normal（标准字体） 
　　　　　　　　②small-caps（小型的大写字母字体，所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。） 
　　　　　　　　③inherit（继承父元素的字体）
（6）字体简写时值的顺序
<ul>
<li>font: font-style，font-variant，font-weight，font-size，line-height，font-family</li>
<li>可以有一个值不写，但是顺序不可以乱</li>
<li>font-size 和 font-family 必须有</li>
</ul>
 
<h2>8.文字溢出</h2>
<ul>
<li>单行文字
<ul>
<li>white-space: nowrap　　// 一行内显示文本，默认值为normal</li>
<li>overflow: hidden　　　　// 超出文本隐藏</li>
<li>text-overflow: ellipsis　　// 溢出部分显示 ...</li>
</ul>
</li>
多行文字
<ul>
<li>overflow: hidden </li>
<li>text-overflow: ellipsis</li>
<li>display: -webkit-box　　// 设置为弹性伸缩盒子</li>
<li>-webkit-line-clamp: 2　　// 显示文本的行数</li>
<li>-webkit-box-orient: vertical　　//一行内显示文本，默认值为normal</li>
</ul>
</ul>
　　PS：千万不要给div设置高度，不然省略号后的文字会显示出来 
 
<h2>9.文本text</h2>
（1）text-align（水平对齐）: left | center | right
（2）text-decoratiom: underline（下划线） | overline（上划线） | line-through（删除线） | noe
（3）text-transform: capitalize（每个单词第一个字母大写） | uppercase（全部大写） | lowercase（全部小写） | none
（4）text-indent: 2em9（文本缩进，1em=16px=1汉字）
（5）word-wrap: normal | break-word（溢出时自动换行）
（6）vertical-align（内容相当于对象的垂直对齐方式）: auto | top | middle | bottom
（7）line-height（行高）: normal | number（数字，与当前字体大小相乘来设置行间距） | length（px，行高等于高时文字垂直居中）
 
<h2>9.列表list</h2>
（1）list-style-image: url()
（2）list-style-position（列表项标记如何根据文本排列）: outside（文本以外） | inside（文本以内）
（3）list-style-type（相当于type属性，设置了图片后若图片无法正常显示则显示type标记）: none | disc | circle | square
（4）列表简写时值的顺序
<ul>
<li>list-style: image，position，type</li>
</ul>
 
<h2>10.CSS选择器</h2>
（1）关系选择器
①后代选择器（E F）：所有被E元素包含的F元素，中间用空格隔开 
<div class="cnblogs_code">
<pre>.parent span{　　color:red;　　} 
<div class="parent">
　　<span>子元素span</span>
　　<div>
　　　　子元素
　　　　<span>孙子代</span>
　　</div>
</div>
</pre>
</div>
②子代选择器（E>F）：作为E元素的直接子元素F，孙子元素不起作用，用大于号表示 
<div class="cnblogs_code">
<pre>.parent>span{　　color:red;　　} 
</pre>
</div>
③相邻兄弟选择器（E+F）：紧贴在E元素之后的第一个F元素，相邻的第一个兄弟元素 
<div class="cnblogs_code">
<pre>p+span{　　color:red;　　} 
<p>span</p>
<span>第一个</span>
<span>第二个</span>
</pre>
</div>
④通用兄弟选择器（E~F）：E之后的所有连续的F元素 
<div class="cnblogs_code">
<pre>p~span{　　color:red;　　} 
<p>span</p>
<span>第一个</span>
<span>第二个</span>
<div>div</div>
<span>第三个</span>
</pre>
</div>
⑤并集选择器（E，F）：EF两种元素一起修改样式 
⑥交集选择器（EF）：所有元素相交部分
 
（2）属性选择器
<ul>
<li>通过html的属性来选择元素，如class</li>
</ul>
①E[ att ]：具有att属性的E元素
<div class="cnblogs_code">
<pre>p[ class ]{　　coloe:red;　　} 
<p class="p1">x效果为红</p>
<p class="p2">效果为红</p></pre>
</div>
②E[ att = "val" ]：有att属性且值等于val的E元素
<div class="cnblogs_code">
<pre>p[ class="p1" ]{　　color:red;　　} 
<p class="p1">效果为红</p>
<p class="p2">效果为黑</p></pre>
</div>
③E[ att ~= "val" ]：有att且属性列表中有一个符合val元素
<div class="cnblogs_code">
<pre>p[ class~="p1" ]{　　color:red;　　}

<p class="p11 para p1">效果为红</p>
<p class="p1parap11">效果为黑</p>　　 </pre>
</div>
④E[ att ^= "val" ]：有att且以“val”开头
<div class="cnblogs_code">
<pre>p[ class^="p1" ]{　　color:red;　　}

<p class="p1parap11">效果为红</p>　　</pre>
</div>
 ⑤E[ att $= "val" ]：有att且以“val”结尾
<div class="cnblogs_code">
<pre>p[ class^="p1" ]{　　color:red;　　}

<p class="p1parap1">效果为红</p></pre>
</div>
 ⑥E[ att *= "val" ]：有att且包含val
<div class="cnblogs_code">
<pre>a[ href*="baidu" ]{　　color:red;　　}

<a href="http://www.baidu.com">baidu</a> </pre>
</div>
⑦E[ att |= "val" ]：有att，有链接符（-）隔开，以“val”开头（val链接符完整的前缀）
<div class="cnblogs_code">
<pre>div[ class|="sxt" ]{　　color:red;　　}

<div class="sxt-work">红</div>
<div class="work-sxt/sxtpen/sx-work">三种均不红</div> </pre>
</div>
 
（3）伪类选择器
<ul>
<li>通过冒号定义，定义元素的状态，如点击按下、点击完</li>
</ul>
①a:link（超链接a在未被访问之前的样式，特指a）
②a:visited（a已经被访问过的样式，特指a）
③E:hover（鼠标悬停在元素上时的样式，不限a，p、li也可用）
④E:active（鼠标按下时的样式，不限a）
　ps：超链接的lvha原则，必须按照上述顺序进行
⑤E:not(s选择器)：匹配不含有s选择器的元素
⑥E:first-child（父元素的第一个子元素）
⑦E:last-child（父元素的最后一个子元素）
⑧E:only-child（E是唯一的子元素）
⑨E:empty（没有任何子元素的E，也没有text文本，即为空）
⑩E:checked（处于选中状态，一般用于imput的type为radio与checkbox时）
⑪E:nth-child(n)：第n个子元素
　　如：.box:nth-child(2){　　}
　　属性：n（选中所有），3n（3，6，9...），...，1，2...，even（偶数），odd（单数）
　　特殊：最小值从1开始，没有0；但an+b表示的是周期的长度，n从0开始
⑫E:nth-of-type()：同⑪
⑬E:focus（选取获得光标的input表单元素）
 
（4）伪对象选择器
<ul>
<li>伪对象也叫伪元素，一个或两个冒号表示，最好用两个</li>
<li>伪元素：用于创建一些不再文档书中的元素，为其添加样式</li>
<li>伪类：用于当已有元素处于某个状态时，为其添加应有的样式</li>
<li>常用伪元素</li>
</ul>
　　①E:before　　|　　E::before　　（在被选元素前插入内容）
<div class="cnblogs_code">
<pre>P::before{
content:"浙江";
color:red;
}

宁波

</pre>
</div>
　　②E:after　　|　　E::after　　（在被选元素后插入内容）
 
（5）优先级
<ul>
<li> 优先级：数值越大优先级越高</li>
<li>style=1000，ID=100，class=10，element=1</li>
<li>优先级相同时按照写在后面的显示</li>
</ul>
<div class="cnblogs_code">
<pre>#a #b{} /* 100+100=200 */
style="" /* 1000 */
div p{} /* 1+1=2 */ </pre>
</div>
 
<h2>11.盒子</h2>
<ul>
<li>包含：内容（content）　　内边距（padding）　　边框（border）　　外边距（margin）</li>
</ul>
（1）border三要素：宽度、样式、颜色
　　  合并设置：border :1px solid red;
　　  单独设置：border-width，border-style，border-color
　　  border-style属性：solid（实线）| dotted（点状）| double（双实线，>=3px）| dashed（虚线）| none（无边框）
（2）margin取值：%，auto，负值，正值
　　  单边设置：margin-top / right / left /bottom
　　  margin四种设置情况：
　　　　①margin:20px;　　// 4个方向的值
　　　　②margin:20px 30px　　// 上下为20px，左右为30px
　　　　③margin:20px 30px 40px　　// 上20px，左右30px，下40px
　　　　④margin:20px 30px 40px 50px　　// 顺序为：上右下左
（3）padding：值不能为负，其余同margin
（4）外边距合并：两个垂直外边距相遇时，形成一个外边距，合并后高度等于两个高度中的较大者
 
<h2>12.怪异盒子</h2>
<ul>
<li>设置：样式设置 box-sizing：border-box（怪异）;　　//默认值为content-box标准盒子</li>
<li>组成部分：margin，border，padding，content</li>
<li>实际宽度：width+margin（width=padding+border+content）</li>
</ul>
 
<h2>13.弹性盒模型flexbox</h2>
<ul>
<li>建议看：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</li>
<li>
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
</li>
<li>决定一个盒子在其他盒子中的分布。在浏览器窗口变化时，盒子相应改变大小</li>
<li>设置——display：flex</li>
<li>flexbox中float，clear，vertical-align不起作用</li>
<li>常见父项属性：
<ul>
<li>flex-direction（设置主轴方向）：row（默认，从左到右）|  row-reverse（从右到左）|  column（从上到下）|  column-reverse（从下到上）</li>
<li>justify-content（主轴上子元素排列方式）：flex-start（默认，从头开始）|  flex-end（从尾开始）|  center（居中对齐）|  space-around（平分剩余空间）|  space-between（先贴两边，再平分剩余空间）</li>
<li>flex-wrap（子元素是否换行）：nowrap（默认，不换行）|  wrap（换行）　　　　/*  不换行时如果子元素装不下，会缩小子元素的宽度塞进去  */</li>
<li>align-items（侧轴上子元素的排列方式，单行）：flex-start（默认）|  flex-end  |  center  |  stretch（拉伸，子元素不设置宽度或者高度）</li>
<li>align-content（侧轴上子元素排列方式，多行）：flex-start（默认）|  flex-end  |  center  |  stretch（子元素高度平分父元素高度）|  space-around  | space-between</li>
</ul>
</li>
<li> 常见子项属性：
<ul>
<li>flex：number（默认0）　　　　/*  子项分配剩余空间，占多少份数  */</li>
<li>align-self：（默认auto）　　　　/*  允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items；控制子项在侧轴上的排列方式；auto表示继承父元素的align-items，若无父元素，等同于stretch  */</li>
<li>order：number（默认0）　　　　/*  定义项目的排列顺序。数值越小，排列越前。与z-index相反  */</li>
</ul>
</li>
</ul>
  
<h2>14.浮动float</h2>
<ul>
<li>定位：
<ul>
<li>将元素排除在普通流之外</li>
<li>元素将不再页面中占据空间</li>
<li>在包含框的左边或者右边</li>
<li>浮动元素依旧在包含框之内</li>
<li>写法  float：none  |  left  |  right</li>
</ul>
</li>
<li>浮动高度塌陷：父元素在没有设置高度的情况下，其子元素浮动后，脱离文档流，则父元素处于塌陷状态；因为子元素浮动后是不占据父元素的位置空间的。</li>
<li>清除浮动：
<ul>
<li>clear清除浮动(添加空div方法)，在浮动元素下方添加空div，并给该元素写css样式(clear:both;height:0;overflow:hidden;)</li>
<li>after伪元素清除浮动</li>
<li>利用br标签的clear属性</li>
<li>给浮动元素父元素添加高度</li>
<li>给父元素添加overflow:hidden清除浮动</li>
<li>父级元素同时浮动</li>
<li>父级设置inline-block，其margin:0 auto失效</li>
</ul>
</li>
<li>display属性：
<ul>
<li>每个元素都默认有一个display值，确定该元素的类型</li>
<li>块元素与行元素是可以转换的</li>
<li>常见属性：
<ul>
<li>none：隐藏对象                         //  隐藏后不占空间。opacity:0 设置隐藏但是占空间，可触发事件；visibility：hidden 设置隐藏但是占空间，不可绑定事件</li>
<li>inline：内联元素                         //  行内元素，不可设置宽高</li>
<li>block：块元素</li>
<li>inline-block：内联元素               //  在同一行显示，可设置宽高，margin和padding可设置四周（主义代码之间的空白）</li>
<li>table-cell：表格单元格</li>
<li>flex：弹性盒</li>
</ul>
</li>
</ul>
</li>
<li> position定位：
<ul>
<li>制定一个元素（静态，相对，绝对，固定），格式  position：absolute  |  fixed  |  relative  |  static</li>
<li>absolute：绝对定位，相对于整个浏览器左上角，偏移后不继续占原来的位置</li>
<li>fixed：固定定位，如右下角的广告位置一直不变。不占原来的位置，相对于浏览器窗口</li>
<li>relative：相对定位（自恋型），相对于自己原来的位置偏移（原来的左上角基点），还要继续占原来的位置</li>
<li>static：静态，对偏移量不起左右。一般用于去除定位，即没有定位</li>
<li>inherit：从父元素中继承position属性值</li>
</ul>
</li>
</ul>
 
<h2>15.浏览器内核及其前缀</h2>
PS：有些属性必须加上内核浏览器才支持
<ul>
<li>Firefox：内核  =>  Gecko，    前缀  =>  -moz-</li>
<li>IE：内核  =>  Trident，    前缀  =>  -ms-</li>
<li>Chrome：内核  =>  Webkit，    前缀  =>  -webkit-</li>
<li>Safari：内核  =>  Webkit，    前缀  =>  -webkit-</li>
<li>Opera：内核  =>  Presto，    前缀  =>  -o-</li>
</ul>
<h3>轮播图案例</h3>
<div class="cnblogs_code">
<pre>.lunbotu{
　　...
　　-weblit-animation:lunbo 5s;
}
@-webkit-keyframes lunbo{
　　0%{
　　　　backgroung:url();
　　}
　　50%{
　　　　backgroung:url();
　　}
　　100%{
　　　　backgroung:url();
　　}
}</pre>
</div>
  
<h2>16. z-index堆叠顺序</h2>
（1）修改了定位，元素可能会堆叠
（2）使用z-index控制重叠顺序
（3）仅能在定位的元素上生效z-index
（4）z-index属性：数值。  数值越大顺序越高，离用户越近；可设置负值，一般不要设置
 
<h2>17.居中总结</h2>
（1）内容水平居中 —— text-align:center
（2）一行文字垂直居中 —— 设置line-height=height
（3）盒子水平居中 —— 设置宽高，再margin: 0 auto
（4）子元素在父元素中居中
<ul>
<li>display:table-cell;   vertical-align:center;           —— table-cell让标签元素以表格单元格的形式呈现，使元素类似于td标签</li>
<li>父元素relative，子元素absolute，设置子元素的 top:50%, left:50%，是以左上角为原点，故不处于中心位置。再设置子元素 translate(-50%,-50%) 即往上、往左移动自身长度的50%</li>
<li>display:flex;  justify-content:center;  align-items:center;          —— 弹性布局</li>
</ul>
 
<h2>18.圆角border-radius</h2>
<ul>
<li>border-radius: value; 　　　　　　//  设置四个角</li>
</ul>
                       　　   value  value；　　  //  左上和右下  右上和左下
　　　　　　　　　 value  value  value  value；　　  //  四个角
<ul>
<li>value值可以用 px，%，em</li>
</ul>
 
<h2>19.盒子阴影box-shadow</h2>
<ul>
<li>box-shadow: h-shadow（水平阴影位置，可负值）</li>
</ul>
　　　　　　　　　v-shadow（垂直阴影位置，可负值）
　　　　　　　　　blur（模糊程度，px）
　　　　　　　　　spread（阴影尺寸）
　　　　　　　　　color（阴影颜色）
　　　　　　　　　inset  [将外部阴影（outset）改为内部阴影]
<ul>
<li>文字阴影：text-shadow（值同上）</li>
</ul>
 
<h2>20.CSS3渐变</h2>
（1）线性渐变（Linear Gradients）—— 向下、上、左、右、对角
　　background: linear-gradient(direction, color-stop1, color-stop2, ...) 　　//  括号中可以写很多个颜色
　　direction默认从上往下，还可设置从左往右（left 或 right）；从左上到右下（left top 或 to right bottom）
（2）径向渐变（Radial Gradients）—— 由他们的中心定义
　　background: radial-gradient(center, shape，size，start-color，... ，last-color) 
 　　默认渐变中心为 center（中心点），渐变形状为 ellipse（椭圆）
　　shape还可为circle（圆形），中心（at center center 或 at x,y，从左上角为参考）
　　size：closest-slide（最近边）、farthest-side（最远边）、closest-corner（最近角）、farthest-corner（默认，最远角）
例：
<div class="cnblogs_code">
<pre>-webkit-repeating-linear-gradient(
red,
yellow 10%,
green 20%
)</pre>
</div>
 
<h2>21.transition过渡</h2>
（1）过渡属性
<ul>
<li>transition-property：none  |  all  |  property</li>
<li>property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。如颜色、转变、渐变、阴影</li>
<li>
<div class="cnblogs_code">
<pre>transition-property:width 1s</pre>
</div>
</li>
</ul>
（2）过渡时间
<ul>
<li>transition-duration：ns  |  nms</li>
</ul>
（3）过渡函数
<ul>
<li>transition-timing-function：ease  |  linear  |  ease-in  |  ease-out  |  ease-in-out</li>
<li>ease（默认值）：慢速开始，然后变快，再慢速结束（相对于匀速，中间快，两头慢）</li>
<li>linear：匀速</li>
<li>ease-in：慢速开始，加速效果</li>
<li>ease-out：慢速结束，减速效果</li>
<li>ease-in-out：慢速开始慢速结束，即先加速后减速（相对于匀速，开始和结束都慢，两头慢）</li>
</ul>
　　PS：个人理解ease-in-out中间有一段是匀速，两头慢，而ease一直是变速运动
（4）过渡延迟（多久后开始变）
<ul>
<li>transition-dely：ns  |  nms</li>
</ul>
（5）多个属性都变化，直接写all  ——  transition:all 0.5s;
 
<h2>22.transform 2D　转换2D属性</h2>
格式  ——  transform: 函数 ( x, y );
函数：
（1）translate()：平移；沿X和Y轴，可只写一个值
（2）rotate()：旋转；顺时针选准，负值逆时针，单位deg（角度）；如 rotate (45deg)
（3）scale()：缩放；值0~1缩小，>1放大
（4）skew()：翻转；2个值：第一个水平角度，第二个垂直角度；1个值水平轴角度；单位deg
* 除了rotate只要一个值外，其余可以一个可以两个
*可以同时写多个函数，空格隔开
 
<h2>23.transform 3D　转换3D属性</h2>
<ul>
<li>呈现3D效果，写到被观察元素的父元素上 —— perspective: 400px;　　// 一般400px够用，也可作函数样式 —— transform: perspective(400px) scale3d(0.8, 0.8, 0.8);</li>
<li>慢慢变化　transition: all 3s;</li>
</ul>
　函数：
　（1）translate3d(x, y, z)　　scale3d(x, y, z)　　rotate3d(x, y, z, angle)
　（2）translateX(x, y, z)　　scaleX(x, y, z)　　rotateX(x, y, z, angle)
　（3）translateY(x, y, z)　　scaleY(x, y, z)　　rotateY(x, y, z, angle)
　（4）translateZ(x, y, z)　　scaleZ(x, y, z)　　rotateZ(x, y, z, angle)
<ul>
<li>transform-style: flat  |  preserve-3d;　　// 不开启3d立体空间，默认(不开启)  |  开启</li>
<li>子元素是否开启三维立体环境。写在父级，但是影响的是子元素。</li>
</ul>
 
<h2>24.animation动画（加内核）</h2>
<ul>
<li>过渡只能模拟动画，animation可以制作类似flash动画</li>
<li>通过关键帧控制每一步</li>
</ul>
（1）@keyframes
<div class="cnblogs_code">
<pre>@keyframes name{
　　from|0%{ CSS样式 }
　　percent{ CSS样式 }　　//可以写多个百分比
　　to|100%{ CSS样式 }
}</pre>
</div>
 （2）animation 控制动画
　　animation：name（keyframes中自定义名）  duration（transition里所需时间）  timing-function（速度变化类型）  delay（延迟）  iteration-count（次数）  direction（播放方向）;
<ul>
<li>iteration-count：数值  | infinite;　　//  infinite表示无限次</li>
<li>direction：normal  | alternate;　　//  alternate轮流播放，奇数次正常，偶数次倒放</li>
<li>fill-mode：forwards;　　　　　　//  动画停在最后一帧，默认none</li>
<li>play-state：paused  |  running;　　// 运行或暂停，默认running</li>
</ul>
（3）PS
<ul>
<li>手动写动画最小时间间隔16.7ms；</li>
<li>显示器默认频率60Hz，即每秒刷新60次，t=1/60*1000ms=16.7ms;</li>
<li>多个动画写用逗号隔开：animation: ...... , animation: ...... ;</li>
</ul>
 
<h2>25.鼠标样式</h2>
　　cursor: default  |  pointer  |  move  |  text  |  not-allowed　　//  默认小白  |  小手  |  移动  |  文本  |  禁止
<ul>
<li>取消表单选中时的轮廓：textarea, input { outlinr: 0;  或  outline: none; }</li>
<li>防止拖拽文本域：textarea{ resize:none; }</li>
</ul>
 
<h2>26.绘制图形（三角、梯形、圆形）</h2>
（1）以CSS绘制三角形
<ul>
<li>首先需要一个元素作为容器：<div></div></li>
<li>使用border属性，内容宽高值为0</li>
</ul>
<div class="cnblogs_code">
<pre>div{
width: 0;
height: 0;
border-top: 20px solid red;
border-bottom: 20px solid green;
border-left: 20px solid blue;
border-right: 20px solid orange;
}</pre>
</div>
 　　结果图：
　　　　　　<img src="https://img2020.cnblogs.com/blog/1554641/202102/1554641-20210206143735159-434412285.png">
PS：若只需上方的三角形时，注释掉border-bottom一行，再将左右两边的颜色改为透明（transparent）。其余同理
（2）梯形
　　在三角形的基础上，如果是左右方向的梯形就给div加height，上下方向的梯形则加width
<div class="cnblogs_code">
<pre>div{
width: 10px;
height: 0;
border-top: 20px solid red;
border-bottom: 20px solid green;
border-left: 20px solid blue;
border-right: 20px solid orange;
}</pre>
</div>
 　　结果图：
　　　　　　<img src="https://img2020.cnblogs.com/blog/1554641/202102/1554641-20210206144330535-153317329.png">
  
<h2>27.媒体查询——响应式布局</h2>
　　针对不同的屏幕尺寸设置不同的样式
<div class="cnblogs_code">
<pre>/* 正常情况 */
body{
background-color: grey;
}
/* PC端，屏幕宽度大于992px */
@media screen and (min-width: 992px) {
body{
background-color: #000;
}
}
/* 移动端，屏幕宽度小于786px */
@media screen and (max-width: 768px) {
body{
background-color: #ff0000;
}
}
/* ipad端，768px~992px之间 */
@media screen and (min-width: 768px) and (max-width: 992px) {
body{
background-color: #fff;
}
}</pre>
</div>
 PS：
<ul>
<li>and前后都有空格</li>
<li>若想阻止浏览器自动调整大小，在title中加入以下代码</li>
</ul>
<div class="cnblogs_code">
<pre><meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></pre>
</div>
代码对应意思：
<ul>
<li>width：页面宽度 = 设备宽度（device-width）</li>
<li>initial-scale：初始化缩放比，1.0为不缩放，2.0为页面放大2倍</li>
<li>minimum-scale：最小缩放比</li>
<li>maximum-scale：最大缩放比</li>
<li>user-scalable：用户是否可缩放，yes  |  no（ 1  |  0 ）</li>
</ul>
 
<h2>28.multi-column 多列（瀑布流）</h2>
　　属性：
　　　　column-count: 3;　　// 分3列
　　　　column-gap: 30px;　　//列间距
　　　　column-rule: 2px solid red;　　// 分割线样式
 
<h2>29.字体图标</h2>
（1）阿里巴巴矢量图标库下载
<ul>
<li>网址：https://www.iconfont.cn</li>
<li>直接饮用矢量库中的字体图标，就不用再把图片放到本地文件夹导入了</li>
</ul>
　　PS：在学校学习的时候没有用过，当时学习也直接略过了，后来实习的时候第一天就要用这个东西，所以我觉得大家可以提前学会使用。
（2）CSS Sprite（CSS精灵、CSS雪碧图）
<ul>
<li>把所有零星图片都放到一张大图中</li>
<li>当访问该页面时，从多次请求变为一次请求</li>
</ul>
（3）滑动门
<ul>
<li>使各种特殊形状的背景能够自适应元素中文本内容的多少</li>
<li>使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容</li>
<li>导航栏的使用</li>
<li>千万不能设置宽！！！</li>
</ul>
<div class="cnblogs_code">
<pre><a href="#">首页</a>

a{
display: inline-block;
height: 33px;
line-height: 33px;
background: url('图片1地址');
padding-left: 15px; /* 截取左半边圆弧 */
}
a span{
display: inline-block;
height: 33px;
background: url('图片1地址') no-repeat right;
padding-right: 15px;
}</pre>
</div>
  
来源：https://www.cnblogs.com/xiyouyouyouzi/p/WEB-CSS.html

頁: [1]

琼殿技术论坛's Archiver

CSS学习笔记