Css3之稳固根基

CSS选择器：（C3）
①id选择器 ②类选择器 ③标签选择器 ④通配符选择器
⑤伪类选择器:
（链接伪类a:link/visited/hover/active，结构伪类E:frist-child/E:last-child/E:nth-child(n)，目标伪类:target

⑥复合选择器
1、交集选择器[既标签又类名，连写]
2、并集选择器[逗号]
3、后代选择器[空格]
4、子元素选择器[＞]

⑦属性选择器
⑴E[attr] （attr是属性值）
⑵E[attr=val]（全等）
⑶E[attr^=val]（属性值以val开头）⑷E[attr$=val]（属性值以val结尾）⑸E[attr*=val]（任意位置包含val）

⑧伪元素选择器::
E::frist-letter，E::frist-line，E::selection，E::before，E::after。（前/后添加content）类选择、伪类选择器就是选取对象，而伪元素选择器本质是插入一个行内元素（盒子）审查不到标签却能显示盒模型，要伪元素不占位要用绝对定位。

CSS简写：
①background:url(images/x.png) no-repeat fixed center -25px,url(images/x.png) no-repeat scroll center -25px #000;颜色最后加，用逗号隔开不同图片。

②border:1px solid #000;

CSS美化Ⅰ：
①让有宽度的块级盒子水平居中margin:0 auto;文字水平居中text-align:center;

②圆角边框border-radius:10px、50%;
1、10px代表四个角都是10px；
2、10px 20px代表左上角与右下角为10px，右上角与左下角为20px；
3、10px 20px 30px代表左上角为10px，右下角为30px，右上角与左下角为20px；
4、10px 20px 30px 40px代表左上角为10px，右上角为20px，右下角为30px，左下角为40px（顺时针）

③内边距padding:10px 20px（上右下左，上=下，左=右）

④外边距margin:10px 20px（上右下左，上=下，左=右）

⑤缩放背景图片background-size:cover、contain、50%、100px;

⑥背景图片半透明：background:rgba(0,0,0,0.5);

⑦行高等于盒子高度实现垂直居中line-height:height;

⑧插入图片更改大小使用width和height，更改位置使用margin或padding；背景图片更改大小使用background-size，更改位置使用background-position。

⑨CSS滑动门能够让特殊形状背景自由拉伸滑动，以适应元素内部的文本内容。
a里面包含一个span标签，a，span转换为行内块元素、设置高度但绝不设置宽度，利用padding值挤出盒子，a设置左侧，span设置右侧。span需要position定位。

⑩背景渐变兼容问题非常严重必须加游览器私有前缀：渐变只能给背景添加
⑴background:-webkit-linear-gradient(top,red,green);起始位置，起始颜色，结束颜色。
⑵background:-moz-linear-gradient(left, red 0%,green 20%,skyblue 80%);起始位置，颜色 位置，颜色 位置。

CSS美化Ⅱ：
①取消下划线 text-decoration:none;

②取消列表默认样式圆点 list-style:none;

③合并细线表格 border-collapse:collapse

④文字阴影 text-shadow:1px -1px 1px rgba(0,0,0,0.5);

⑤盒子阴影 box-shadow:1px 1px 1px
1px （影子大小） rgba(0,0,0,.5) inset;

⑥清除内外边距 margin:0;padding:0;

⑦增加字间距 letter-spacing:1px;

CSS使用：
①行内元素只有左右外边距，没有上下外边距margin；内边距padding尽量只给左右，上下能起效果但很不明显很差。

②兄弟块级元素在垂直方向的外边距重叠会以最大的外边距进行合并（外边距塌陷）；父子块级元素儿子设置margin会造成父子一起掉落，给父亲设置1px solid边框、1px的padding、overflow:hidden可以解决父子外边距塌陷。

③padding会影响设置了宽度的块级盒子的宽度，需要手动减去。未设定宽度或宽度是继承父亲的元素中设置padding则不会影响实际宽度。

④优先使用 width>padding>margin。

⑤W3C验证工具：validator.w3.org/unicorn

⑥CSS压缩：tool.chinaz.com/Toold/CssFormat.aspx

CSS知识点：
①content-box，盒子大小为设置的width+padding+border;border-box，盒子大小为设置的width。

②标准流/文档流：块级元素从上到下，行内元素从左到右依次排列。

③input表单边框border设置为0能设置宽高，用父亲盒子样式做边框。

④隐藏元素不保留位置display:none;转换块级元素、显示元素display:block;
隐藏元素保留位置visibility:hidden;显示元素visibility:visible;

⑤overflow检索或设置当对象的内容超过其指定高度及宽度时如何管理内容：
⑴visible，不剪切内容也不添加滚动条
⑵auto超出自动显示滚动条
⑶hidden不显示超出内容，超出部分隐藏
⑷scroll不管是否超出总显示滚动条

⑥响应式就是随着游览器缩小能够随之改变宽高。

⑦游览器前缀：Chrome、Safari、Android
（-webkit-），Firefox（-moz-），Opera（-o-），Edge，IE（-ms-）。

CSS浮动（让多个块级元素一行显示）：
①float浮动是指设置了浮动属性的元素会脱离普通流的控制（飘在文档流上方，不占位置），移动到其父元素中指定位置的过程。浮动只有左右浮动。

②浮动必须先创建一个文档流的父盒子，再在里面添加各种浮动的块级元素。

③浮动的元素找离他最近的父元素对齐，但不会占用内边距与边框的范围。

④浮动元素排列位置与上一个元素有关。上一个元素浮动，则上一个元素与A元素顶部对齐，反之A顶部与上一个元素底部对齐。

⑤如果想实现块级元素一行对齐显示，则每个子盒子都必须设置浮动。

⑥块级元素添加浮动后，内容撑开未设置的宽高（行内块特性）；行内元素添加浮动，设置的宽高起作用（行内块特性）★

⑦布局时两列左宽右窄中间留缝隙，则左边设置左浮动，右边设置右浮动，且右边减去缝隙宽度。

⑧很多情况不给父级盒子设置高度，因为浮动孩子会改变大小；一个父亲不能被他浮动的孩子撑出高度。

⑨清除浮动带来的影响/闭合浮动：
⑴在浮动盒子后追加空盒子设置一个clear:both;margin失效。
⑵在浮动元素的父盒子添加一个overflow:hidden;触发BFC。无法显示需要溢出的元素。
⑶给父盒子设置伪元素，*代表IE6、7能识别的特殊符号，兼容性问题。zoom是独属IE6、7的清除浮动影响的方法。

.clearfix:after{conetent:".";display:block;height:0;visibility:hidden;clear:both;}
.clearfix{*zoom:1;}

⑷给父盒子设置双伪元素

.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

CSS定位：
①边偏移：top，bottom，left，right

②position:static、relative、absolute、fixed。分别是静态定位、相对定位、绝对定位、固定定位。

③边偏移不适用于静态定位static，静态定位一般用于清除其他定位。

④相对定位relative通过边偏移移动位置，但原来占用的位置继续占有；每次移动位置是以自己左上角为基点移动，相对自己移动位置。

⑤绝对定位absolute通过边偏移移动位置，但它完全脱标完全不占位置。
⑴父级盒子未加定位position，absolute的孩子盒子会以游览器左上角为基准移动
⑵父级盒子有定位，absolute的孩子会以父亲左上角为基准点进行边偏移，可以无视父亲的padding值。
⑶子绝父相，父亲加相对定位依旧占有位置便于合理布局。
⑷绝对定位盒子实现水平居中，首先相对父盒子left50%，然后走自己外边距负的一半值。
margin-left:-50px;

⑥固定定位fixed只认游览器不认父级盒子，完全脱标不占位置，不随滚动条而滚动。必须要设置宽高。

⑦调整盒子重叠次序z-index:1;取值越大，元素层叠越居上。取值相同，后来居上。

⑧元素添加绝对定位absolute和固定定位fixed后，元素模式会转换成行内块元素。

CSS高级技巧(用户界面样式)：
①鼠标样式cursor:default、pointer、move、text。小白，小手，移动，文本。

②表单轮廓线outline:1px solid red;一般清除就行outline:0;

③防止拖拽文本域resize:none;

④垂直居中vertical-align:middle;对于块级元素无效。baseline top middle bottom
通常用于行内块元素与行内元素，控制图片或表单与文字的对齐。

⑤图片或表单元素与父盒子基线对齐，底边侧会有空白缝隙，解决方法一给img添加display:block;方法二给img添加vertical-align:middle、top;

⑥溢出文字隐藏：
⑴自动换行word-break:normal、break-all、keep-all;用于英文单词。
⑵white-space:normal、nowrap(强制一行显示);可以用于中文。
⑶文字溢出text-overflow:clip(直接裁剪不显示其他内容)、ellipsis(超出内容显示省略号)，必须搭配white-space:nowrap;和overflow:hidden;

⑦CSS sprite是处理网页★背景图片★的方式。将一个页面涉及的所有零星背景图像集中到一张大图中，用户访问界面只需向服务器发送一次请求，利用background-size;background-position;
background-repeat;实现精准定位。

⑧制作精灵图sprite，背景必须要透明色。需要保存一份psd格式，然后png。

⑨字体图标可以做透明旋转，可以改变大小，颜色，阴影等等。用法一：直接把图标放在html结构中然后在css中定义font-family:“iconfont”;，用法二：伪元素
:before{content:"\e9eb"}

⑩svg生成字体包网站：icomoon.io，iconfont.cn，fontello.com，fortawesome.github.io/Font-Awesome，glyphicons.com/icons8.com。

CSS过渡效果(transition)：
①transition:要过渡的属性(-property) 花费时间(-duration) 运动曲线(-timing-function) 开始时间(-delay);
transition:width 0.5s ease-in 0s;

②运动曲线默认ease。linear(匀速)，ease(逐渐慢下来)，ease-in(加速)，ease-out(减速)，ease-in-out(先加后减速)

③transition写在div而不是hover里；transform通常放在hover里。

④所有属性都变化用all。

⑤谁做动画谁加过渡。

CSS变形效果(transform)：
①移动：transform:translate(50px,50px);
x轴移动：transform:translateX(50px);
y轴移动：transform:translateY(50px);

②translate如果用百分比，移动距离是以自己的宽度为准，与父亲无关；让定位盒子居中对齐transform:translateY(-50%);

③缩放transform:scale(1.5,0.5);
如果只写一个参数则宽高都缩放。

④旋转transform:rotate(90deg);正顺负逆
转换变形原点transform-origin:top left;
origin放在div里而不是hover。

⑤倾斜transform:skew(30deg,0deg);正左负右，正上负下。以上全2D。

⑥3D：x左负右正，y上负下正，z里负外正
3D里才有transform:rotateX(90deg);横向翻转，transform:rotateY(90deg);竖线旋转，transform:rotateZ(90deg);类似2D普通顺逆旋转。

⑦透视perspective:500px;给父元素设置
视距越大效果越不明显，近大远小。透视用于旋转可以实现立体感。

⑧3D移动：
⑴transform:translateZ(100px);
是物体到屏幕的距离，用来控制物体近大远小的具体情况；而透视是眼睛到屏幕的距离，只是一种展现形势，具有3D效果。
translateZ越大，物体离眼睛越大，物体越大。
⑵transform:translate3d(100px,100px,100px);xy可用px和百分比，z只能px。

⑨定义当前元素不面向屏幕时是否可见backface-visibility:hidden;

⑩transform-style:preserve-3d;让父盒子中的子盒子以3d效果显示。

CSS动画效果：😏
①animation:动画名称(-name) 一次播放花费时间(-duration) 速度曲线(-timing-function) 开始时间(-delay) 播放次数(-iteration-count（infinite无限循环）) 逆向播放与否(-direction（alternate左右摇摆）) 动画是否运行或暂停(-play-state（paused暂停）) 动画时间之外状态(-fill-mode)

②定义动画@keyframes 动画名称{
from {transform:translateX(0); }
to{ transform:translateX(600px);}
}
在div中引用，在标签外定义。

③定义一个名为go的动画：
可随意定义go动画中的百分比个数。

@keyframes go{
0%{transform:translate3d(0,0,0);}起始位
25%{transform:translate3d(8px,0,0);}
50%{transform:translate3d(8px,40px,0);}
75%{transform:translate3d(0,40px,0);}
100%{transform:translate3d(0,0,0);} }

④若有多组变形平移或旋转等都属于transform用空格隔开，不用另起一行。

CSS伸缩布局：
①给父级盒子添加display:flex;给孩子添加份数，flex:1;加一个min-width:280px;
max-width:1280px;设置最大最小宽高，不能无限变大变小。与分辨率无关。

②如果三个盒子中有一个盒子固定宽度，其他盒子设置flex，则从剩余宽度划分，不牵扯到已经固定的宽度。

③flex-direction:row;横向分割/排列
flex-direction:column;纵向分割/排列
给父盒子添加。

④伸缩布局可以让块级元素横向排列，且自适应屏幕大小。width:100%;

⑤调整主轴（x轴）对齐：justify-content:flex-start、flex-end、center、space-between、space-around;
分别是子从父开头排序、子贴父后面排序但顺序不变、子从父中间排序、左右子盒子贴着父盒子而且两个盒子之间留有空白、每个盒子左右都留有空白缝隙。

⑥盒子垂直y轴对齐（单行）：
align-items:flex-start、flex-end、center、stretch;stretch让子元素的高度拉伸适用父盒子（前提不给子元素高度）

⑦控制是否换行：
flex-warp:nowrap、warp、warp-reverse;
分别是强制一行显示不换行但每个盒子宽度会收缩、自动换行、翻转换行。

⑧垂直y轴对齐（多行）：
align-content:stretch、center、flex-start、flex-end、space-between、space-around。必须先在父盒子设置display:flex;和flex-wrap:row wrap;

⑨控制盒子的排列顺序order:1;越大越在后面。z-index越大越在前面。

BFC：
①是独立的渲染区域，只有块级元素参与，它规定内部的块级元素如何布局，并且与这个区域外毫不相干，就是父盒子。

②display:block、list-item、table;都有产生BFC的资质，diplay:inline;会产生IFC。

③给上述元素添加如下属性可以触发BFC
⑴float属性不为none；
⑵position为absolute或fixed；
⑶display为inline-block，table-cell，table-caption，flex，inline-flex。
⑷overflow不为visible。

④BFC元素具有的特性：
⑴在BFC中，盒子从顶端开始垂直地一个接一个排列。
⑵盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠。不是同一个BFC就不会重叠。
⑶在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）（对于从右到左的格式来说，则触碰到右边缘）
⑷BFC的区域不会与浮动的盒子产生交集，而是紧贴浮动边缘。不会被压住。
⑸计算BFC的高度时，自然也会检测浮动的盒子高度。而标准盒子不会计算浮动孩子，这就是清除浮动的应用。

• 正式模拟项目：

①导入normalize.css与base.css，用bitbug.net网站制作ico图标，导入favicon.ico。

②SEO搜索引擎优化，title，description，keywords提高公司产品的曝光度。

③测量高度，确定使用ul还是dl还是position还是float，然后编写相应css。

④相似的导航栏用ul，底部相关用dl。

⑤善用宽高度剩余法，文字靠左上对齐，设置高度则不用调整padding或margin值。给父亲设置宽度可以跟其他的盒子分隔距离。

⑥存在链接背景变色的ul时，只能用padding不能用margin。

⑦多个li需要一行显示可以适度改ul宽度，然后给父盒子添加overflow:hidden;

⑧动画效果只改宽度渐变只能通过给过渡的盒子设置固定高度，hover高度也固定。

⑨做界面时先分析结构，然后布局大盒子，然后看大盒子中分几块，使用ul还是div。