HTM、CSS学习总结
<h2 id="基础">基础</h2><h3 id="动作">动作</h3>
<p>link 正常<br>
visited 已阅<br>
hover 停留<br>
active 正点</p>
<h3 id="列表">列表</h3>
<p>列表：<br>
list-style-type 标号类型<br>
list-style-position 标号位置<br>
list-style-image 图标url("")</p>
<h3 id="表格">表格</h3>
<p>表格<br>
border-collaspse:collapse 合并</p>
<h3 id="选择器">选择器</h3>
<p>选择器<br>
tr:nth-child(odd奇|even偶)</p>
<p>div:nth-child(1);</p>
<h3 id="注意">注意</h3>
<p>margin垂直方向会合并</p>
<p>清除图片、a标签空隙<br>
font-size:0;</p>
<h3 id="块状行内">块状行内</h3>
<p>1、块状元素：<br>
独占一行<br>
div/p/h1/ol/ul/table/form<br>
2、行内元素inline：<br>
width、height不能设置<br>
span/a</p>
<p>3、行内块状元素inline-block：<br>
都可以设置<br>
img</p>
<p>clear:both; 左右都不会有浮动元素</p>
<h3 id="盒子">盒子</h3>
<p>盒子大小：</p>
<p>box-sizing: border-box;</p>
<h3 id="定位">定位</h3>
<p>position:<br>
static默认 z-index无效</p>
<pre><code>fixed 相对浏览器窗口
relative 保留原位置
相对直接父元素
absolute 不保留原位置
相对static定位以外的第一个父元素或者body
</code></pre>
<p>三层定位：relative、absolute、absolute<br>
两层定位：relative、absolute<br>
z-index:-999</p>
<h2 id="css3">css3</h2>
<h3 id="圆">圆</h3>
<p>border-top-left-radius:40px 20px; 左上角,<br>
border-radius:20px;</p>
<h3 id="阴影">阴影</h3>
<p>box-shadow:<br>
inset 水平偏移、垂直偏移、模糊距离、颜色<br>
insct 可选、内部阴影<br>
outset 默认值、外部阴影<br>
traf + ctrl + e<br>
chrome-webkit-<br>
firfox-moz-<br>
opera -o-<br>
ie -ms-</p>
<h2 id="2d">2D</h2>
<p>text-shadow:2px 2px 8px #ccc; 水平，垂直，阴影大小，颜色</p>
<h3 id="长单词url强行换行">长单词、URL强行换行</h3>
<p>word-wrap:break-word;normal;</p>
<h3 id="字体">字体</h3>
<p>@font-face{<br>
font-family:myname;<br>
src:url('fonts/myname.ttf'),<br>
url('fonts/myname.eot')<br>
}<br>
p{<br>
font-family:myname;<br>
}</p>
<h3 id="3d动作">3D动作</h3>
<ul>
<li>
<p>旋转</p>
<h1 id="rotatadiv">rotataDiv{</h1>
<p>tranform:rotate(30deg); //正30deg<br>
}</p>
</li>
<li>
<p>缩放<br>
tranform:scale(1, 0.5);</p>
</li>
<li>
<p>平移</p>
<p>transform:translateX(150px);</p>
</li>
<li>
<p>all</p>
<p>0%{<br>
transform:translateZ(0px) scale(1) rotateZ(0deg);<br>
}</p>
</li>
</ul>
<h3 id="过渡">过渡</h3>
<p>transition:属性名(all)，持续时间，过渡方法<br>
transition-property:all; 对哪个属性进行变换<br>
transitioin-duration 持续时间<br>
transition-timing-function 过度使用的方法(函数)<br>
linear匀速，ease慢快慢，ease-in</p>
<h3 id="animation动画">animation动画</h3>
<p>@keyframes mycolor{<br>
0% {background-color:red;}<br>
30% {background-color:bule}<br>
60% {background-color:yellow;}<br>
100%{background-color:green;}<br>
}<br>
div:hover{<br>
animation:mycolor 5s linear; //n或infinite无数次<br>
//animation-play-state:running|paused;可以设置鼠标悬停时播放和移除暂停<br>
}</p>
<h2 id="3d">3d</h2>
<p>transform-style:preserve-3d;</p>
<p>tranform:rotateY(60deg);<br>
x,y,z: z大拇指指向自己<br>
perspective:100px; //舞台,眼睛到舞台的距离，远近不同</p>
<style type="text/css">p { }</style>
<h3 id="方向">方向</h3>
<p>x向右，y向下，z向前</p><br><br>
来源：https://www.cnblogs.com/first-bloodlalala/p/12411901.html
頁:
[1]