综述

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

Web标准的内容：主要包括行为、结构和表现三个方面。

盒子要点

外边距合并：当上下相邻两个块元素（兄弟）相遇时，上有下边距，下有上边距，取他们的最大值。（子元素浮动不会有合并问题）

嵌套块元素坍塌：对于两个嵌套关系（父子）的块元素时，父元素有上边距同时子也有上边距时，父元素会坍塌较大的上边距值。

​解决：父元素设置上边框，父元素设置上内边距，父元素设置overflow：hidden；或者浮动，固定，绝对定位。

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

boeder-radius：length;在角上画一个半径为length的圆

box-shadow : h-shadow(水平) v-shadow(垂直) blur(模糊距离/虚实) spread(阴影尺寸) color inset/outset(内部或是外部，默认为outset，不能写) ，不占用空间

text-shadow : h-shadow(水平) v-shadow(垂直) blur(模糊距离/虚实) color,不占用空间

浮动：给任何元素添加了浮动会具有行内块元素特性，行内元素浮动则不需要转换为块或行内块，只需设置宽高块级盒子添加浮动后，大小按照内容决定。

浮动的盒子会影响浮动盒子后面的标准流，不会影响前面的标准流

浮动父元素高度坍塌：①在最后一个子元素后添加一个空元素（必须为块元素或者换行）设置clear:both；②父元素使用overflow：hidden；③伪元素:after（ie6、7需父元素单独设置zoom:1）,④父元素双伪元素:before和:after

参考：（https://blog.csdn.net/qq_43692768/article/details/109547020）

overflow的神奇用法

第一种用法：解决margin-top的传递问题

margin-top的传递问题:子元素的margin-top会把父元素一起带下来，给父元素加overflow:hidden即可解决

第二种用法：清除浮动带来的影响 ——父元素高度塌陷

css一般书写顺序：布局定位，自身属性，文本属性，其他属性（css3）

导航栏直接用a，搜索引擎容易辨别为有堆砌关键字的嫌疑。

相对定位：想到对于自身原本位置移动，且不脱标；

绝对定位：相对于最近一级带有相对定位的祖先元素移动，脱离文档流；

粘性定位：相对和固定的结合，不脱标，必须添加top，left，bottom，right其中一个才有效，position:sticky;兼容性差

行内元素添加绝对或者固定之后，不需要强制转换或者浮动就能设置高度宽度；块级元素添加绝对或者固定之后，不设置高宽默认大小和内容一样（由于脱离标准流）；

脱离标准流不会出现外边距合并；

浮动元素与绝对以及固定不同，浮动元素压住标准流不会压住其中的文字和图片，而其余两种会完全压住，因为浮动的最初目的是为了文字环绕效果。

若一个盒子有left和right属性，执行left，top和bottom执行top；

display隐藏不占有原位置；

visibility:inherit(继承上一个父对象的可见性)/visible/hidden/collapse(主要用来隐藏表格的行和列) ------>占有原位置；

overflow:hidden(隐藏溢出的部分)/visible/auto(为body和textarea的默认值)/scroll；有定位的1盒子慎用超出隐藏

outline:0/none取消input边框线，resize：none取消textarea自由更改大小；

vertical-align针对于行内元素或行内块元素的垂直对齐；

图片底部空白缝隙是由于图片默认为基线对齐；①vertical-align②转换为块级元素

行内块可用text-align以及相互之间有个小距离；

选择器

①属性选择器：input[value]，选择有value属性的input；

​ input[type=text]，选择有text属性且值为text的input;

​ div[class^=icon]，选择有class属性且值以icon开头的div;

​ div[class$=icon]，选择有class属性且值以icon结尾的div;

​ div[class*=icon]，选择有class属性且值含有icon的div;

属性选择器的权重为10

结构伪类选择器nth-child

box-sizing:content-box（width+padding+border）/border-box（盒子大小为width）

图像模糊处理fitter:blur(5px)

过渡

transition:要过渡的属性 花费时间 运动曲线(默认为ease逐渐慢，linear匀速，ease-in加速，ease-out减速，ease-in-out先加速后减速) 何时开始;

favicon图标，首先需要png，然后通过第三方网站转换为ico图标（bitbug.net）

​<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

SEO:搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式（对网站进行深度优化，从而帮助网站获取免费的流量）①title网站标题（网站名-网站的介绍，尽量不超过30个汉字）②description网站说明 ③keywords关键词

    <title>Document</title><meta name="description" content=""><meta name="keywords" content="">

可使用free.3v.do申请服务器，通过cutftp软件将网站域名部署到服务器；

transform:translate(x,y)、百分比是基于元素自身大小，不影响其他元素的位置，对行内标签不起效果

transform:rotate(ndeg);单位为deg，正数顺时针，负数逆时针（默认旋转的中心点为元素中心），通过设置为元素的右下边框，然后旋转得到下拉菜单图标；

transiform-origin:x y;设置旋转中心点，默认为50% 50%(center center)可用方位名词left bottom top right;

transiform:scale(x y)/宽 高；数字不跟单位，为倍数，等比例修改可直接写scale(2),两倍，优势在于直接修改宽高是往下延申，还影响其他盒子；scale是从中心点延申，且不影响其他盒子，可以修改缩放中心点；

transform:translate() rotate(ndeg) scale(x y)，顺序会影响效果，最好将位移写在最前面

动画

①先定义动画（通过keyframes关键帧）百分比为动画序列，也就是总的时间划分

@keyframes name {
​      0% {
​        width: 100px;
​      }
​      50% {
​        width: 150px;
​      }
​      100% {
​        width: 200px;
​      }
​    }

from--to=0%--100%

②元素使用动画

   /* 调用动画 */animation-name: name;/* 动画持续时间 */animation-duration: 2s;
/* 动画速度曲线，默认为ease */animation-timing-function: ease;steps(步长)分几步完成动画/* 动画何时开始 */animation-delay: 2s;/* 动画播放次数，默认为1 */animation-iteration-count: infinite;/* 动画下一周期逆序，默认为normal，alternate逆序 */animation-direction: normal ;/* 动画播放结束后状态，保持forwards，回到起点backwards */animation-fill-mode: forwards;
/* 动画是否运行或暂停，running或pause */animation-play-state: pause;

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

多个动画可用逗号隔开

## **3D转换**

①3D移动translate3d

transform:translateX(100px)
​transform:translateY(100px)
​transform:translateZ(100px);一般用px单位
​transform:translate3d(x,y,z)，不能省略，可写0，z轴越大，我们看到的物体越大。

②透视perspective，使得网页产生3D效果单位为像素，视距为人眼到屏幕的距离，距离视觉点越近的在电脑平面成像越大

​透视写在被观察元素的父元素里面，值越小，视距越小，看到的物体越大

③3D旋转：在三维平面内沿着x轴、y轴，z轴或者自定义轴旋转

transform:rotateX(45deg)
​transform:rotateY(45deg)
​transform:rotateZ(45deg);旋转效果，眼睛到屏幕的距离
transform:rotate3d(x,y,z,deg)  矢量旋转

④3D呈现transform-style:控制子元素是否开启3D立体空间，代码写给父级，作用在子元素

​transform-style:flat(默认不开启)/preserve-3d(子元素开启立体空间)