重点：
⭐
🏻清除浮动：overflow：hidden/auto
末尾加clear：both属性的div
小图片居中对齐与文字一样的方法,图片大于文字利用vertical-align:middle;
🏻按钮禁用，this.disabled=true;
🏻禁止链接跳转< a href='javascript:;'>删除
🏻opacity：.5；半透明效果
🏻autocomplete="off"//阻止文本自动填充行为
css是层叠样式表，称为css样式表或级联样式表，作用是设置文本内容（大小，对齐），图片外形（宽高，边框），版面布局和外观显示。
css由两部分组成，选择器以及一条或多条声明，选择器分为基础选择器和复合选择器，基础选择器又分为标签选择器、类选择器、id选择器、通配符选择器
/标签选择器 标签名 { 属性1: 属性值1; }
/类选择器 .red {属性1: 属性值1 }
<div class='red'></div>
/类选择器-多类名
.red { 属性1: 属性值1｝
.font35 { 属性1: 属性值1; }
<div class='red font35'></div>
/id选择器,只能调用一次,类似于人的身份证号码
#red {属性1: 属性值1; }
<div id='red'></div>
/通配符选择器，把所有标签统一修改样式 * { 属性1: 属性值1; }
/顺序:
font:font-style(italic) font-weight (700 & 400) font-size/line-height font-family
/* 必须有size和family */
/text-align:left / right / center(水平对齐）
text-decoration:none / underline / overline / line-sthrough
text-indent:(首行缩进)正负像素值/2em; line-height:(文字行与行之间的间距)
css样式: 内部样式表<style>
</style>、
行内样式<p style="color:pink;" 外部样式表: 1.(1.css) <link rel="stylesheet" href="1.css">
/后代选择器 ol li a{}
/子选择器 (必须为亲儿子元素)
.nav > a{}
/并集选择器(多组标签) div,p,.nav li{}
/链接伪类选择器:lvha顺序
a:link(所有未被访问的链接，更改样式)
a:visited(所有已被访问的链接，更改）
a:hover(鼠标指针位于其上的链接)
a:active (活动链接(鼠标按下没弹起的链接))
/ :focus 伪类选择器(把获得光标的input表单元素选取出来)
应用:input:focus{}
html的元素分为块元素和行内元素
/常见块元素：
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>、<form>、<table>、<hr>、<dl>(宽度默认为父级的100%，其中,h和p不要放块级元素，主要放文字)
/常见行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>、
特殊(宽高设置无效，默认为本身内容宽度,a里可以放块级元素)
/常见行内块元素：< img /><input /><td>
转换为块级元素:
1.display:块级block/行内inline/行内块inline-block)
2.设置文字垂直居中,设置line-height
/背景属性：
background-color:transparent/color
background-image:url(1.jpg);
background-repeat:repeat|no-repeat |repeat-x |repeat-y
background-position: x y;(左侧和上侧)
/background:rgba(0, 0, 0, 0.5);
(logo和小图片，大图片背景应用背景图片可调节位置)
background-attchment:scoll(滚动，默认)/fixed(固定)
合并：
background: 颜色，图片，平铺，滚动，位置;
！！！css的三大特性：层叠性、继承性、优先级。
层叠性：是就近原则（相同的选择器） 继承性：子元素可以继承父元素的（text-，font-，line-以及color）行高的继承：font：12px/1.5(1.5是当前元素的1.5倍，是行高)
优先级：继承或*（0000）
元素选择器（0001）
类和伪类选择器（0010）
ID选择器（0100）
行内样式，style=“”（1000）
！impritant（无穷大）
1.继承的权重为0（重点）
2.a链接默认了一个样式蓝色，不会继承父级的颜色。
3.权重叠加：复合选择器会有权重叠加问题，叠加不会进位0001+0001=0002/0010+0001=0011
盒子模型：浮动和定位。
盒子包括border，padding，margin，content
border：width(像素) , style(solid/pushed) , color;
/边框合并：border-collapse：collapse；
1.padding:padding会影响实际盒子大小已有宽高的盒子加padding会撑大盒子，应用padding撑开只有高度的盒子，padding要减去撑大的宽度）
2.行内块元素：即有宽高又在同一行上。
3.如果盒子本身没有指定width/height，则padding不会撑大盒子
4.margin
（应用：1.块级盒子水平居中对齐的方式：指定宽度的盒子margin: 0 auto;）
行内元素和行内块元素方式：给父级添加text-align：center；
♥为了避免塌陷问题（父子元素都有上外边距margin-top时）
解决方法：1.给父元素加边框 2.给父元素加内边距padding：1px; 3.给父级加上overflow:hidden
行内元素尽量只设置左右内外边距，设置上下时先转换为块级/行内块。
圆角边框的设置：
border-radius:宽度/高度的一半
/盒子阴影：box-shadow:10px（左右移动）10px（上下）10px（模糊距离）10px（影子大小）rgba(0,0,0,0.3)；
/文字阴影:10px（左右移动）10px（上下）10px模糊距离, rgba(0,0,0,0.3)；
传统布局的三种方式：普通流、浮动、定位。
/浮动：块级元素横向排列找浮动（float：left/right） 浮动特性：1. 脱标 2. 不保留原先的位置 3.具有行内块特点
浮动的应用：先创建一个父级盒子，再在父级里创建两个子盒子加浮动。
图片：jpg保存较好，gif可以保存动画和透明背景，png最好，
/定位：让盒子自由的固定在屏幕中某个位置，并且压住其他盒子。(定位等于：定位模式＋边偏移){position:static/relative/absolute/fixed；}
relative： 以自己原来的位置移动（并且仍然保留原来位置）
absolute：相对于他的父元素位置移动（否则为文件位置）
（绝对定位不再保留原来位置）
♥子绝父相。
fixed：固定在屏幕中的某个位置，不随滚动而滚动{position:fixed;top:100px;right:100px;} (不占有原先位置)
小技巧： 让盒子固定在版心右侧位置，1.先left：50%；2.margin-left：版心宽度的一半
/sticky粘性定位：占有原先位置，且以可视窗口为参考点，必须添加top等一个值，相当于固定和相对结合，比较添加一个边移量 {z-index：1；} 数值越大 ，盒子越靠上
加了绝对定位盒子不能margin:auto
解决办法：1.left:50%，margin-left：宽度的一半；
2.top：50%；margin-top：高度的一半；
其他：
行内元素添加定位，可设置高度/宽度 2.块级元素加了定位，大小为内容大小 3.绝对（固定定位会压住原来的盒子包括文字）
/元素的显示与隐藏display:none/block
visibility:visible显示/ hidden隐藏(继续占有原来位置)
溢出隐藏：overflow：hidden / (滚动条)scroll/auto
有定位的元素最好不要用
精灵技术：主要针对背景图片使用，sprites(精灵图走不是盒子走) background-position：x往右是正，y往上为正；
字体图标：iconfont（本质是字体）
三角形的做法✓border
鼠标样式：cursor:default/pointer/move/text/not-allowed
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
