css乱笔记

最新推荐文章于 2024-10-26 18:22:22 发布

原创最新推荐文章于 2024-10-26 18:22:22 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

CSS、less、sass 专栏收录该内容

3 篇文章

订阅专栏

target: 在浏览器中的打开方式，target=”_blank” 在新标签中打开
Cursor 鼠标样式

定位position（left/right）
Absolute（相对父级定位）；relative（相对原来位置定位）；fixed（在中间浮动）
z-index（默认值为0）

10个html5增加的重要新特性和内容
https://www.cnblogs.com/yonglin/p/7029095.html
CSS3新增的选择器和属性:
https://www.cnblogs.com/dreamingbaobei/p/5062998.html
https://blog.youkuaiyun.com/kf_qyl/article/details/79005082

前端面试总结
https://blog.youkuaiyun.com/zhang6223284/article/details/82843437

最全前端面试问题及答案总结:
https://www.cnblogs.com/autismtune/p/5210116.html
2019前端面试题精选
http://www.imooc.com/article/271528

//1
background: url(…/images/ranking.png) 174px center no-repeat,linear-gradient(to bottom,#555859,#3c3f40);
在这里插入图片描述
background: url(img/HBuilder.png) center no-repeat,linear-gradient(to bottom,#fff,#3c3f40);
//2

background: url(img/HBuilder.png) no-repeat center /cover,linear-gradient(to bottom,#fff,#3c3f40);

background: url(img/HBuilder.png) center /cover no-repeat,linear-gradient(to bottom,#fff,#3c3f40);

在这里插入图片描述
这些属性可以全部合并为一个缩写属性： background。需要注意的一个要点是背景占据元素的所有内容区域，包括 padding 和 border，但是不包括元素的 margin。它在 Firefox， Safari ，Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 没把 border 计算在内。

背景介绍https://www.cnblogs.com/zhwl/p/3981333.html

五、HTTP请求发起和响应
在一个web程序开发中，一般都有前端和后端之分，前端负责向后端请求数据和展示页面，后端负责接收请求和做出响应发回给前端，他们之间的协作桥梁是API，而API其实就是一个URL，作为HTTP连接的一种具体载体。

用户输入URL到浏览器显现给用户页面经过了什么过程

用户输入URL，浏览器获取到URL

浏览器(应用层)进行DNS解析（直接输入IP地址既跳过该步骤）

根据解析出的IP地址+端口，浏览器（应用层）发起HTTP请求，请求中携带（请求头header（也可细分为请求行和请求头）、请求体body）

请求到达传输层，tcp协议为传输报文提供可靠的字节流传输服务，它通过三次握手等手段来保证传输过程中的安全可靠。通过对大块数据的分割成一个个报文段的方式提供给大量数据的便携传输。

到网络层，网络层通过ARP寻址得到接收方的Mac地址，IP协议把在传输层被分割成一个个数据包传送接收方。

数据到达数据链路层，请求阶段完成

接收方在数据链路层收到数据包之后，层层传递到应用层，接收方应用程序就获得到请求报文。

接收方收到发送方的HTTP请求之后，进行请求文件资源（如HTML页面）的寻找并响应报文

发送方收到响应报文后，如果报文中的状态码表示请求成功，则接受返回的资源（如HTML文件），进行页面渲染。
（header：1、请求的方法（get、post、put…）2、协议（http、https、ftp、sftp…）3目标url（具体的请求路径已经文件名）4一些必要信息（缓存、cookie之类）。)
（body包含请求的内容）

八、link和@import的区别
两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

HTML的标签https://blog.youkuaiyun.com/mars_xiaolei/article/details/78565261
标签：

权重：

Css写动画效果:
.roomList dd:hover .item-T { transform: translateX(-50%); -webkit-transform: translateX(-50%); opacity: 0; visibility: hidden; }

弹性布局display:flex
flex 是 flex-grow、flex-shrink、flex-basis的缩写
flex:1让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
（以下常搭配的属性）
justify-content:
设置了每个小div {width: 70px; height: 70px;} }

转换属性transform

transform-origin（该属性必须与 transform属性一同使用）
语法：transform-origin: x-axis y-axis z-axis;

transform-style: flat|preserve-3d;

3D转换

通过translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

matrix() 方法把所有 2D 转换方法组合在一起
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

CSS3 过渡transition
语法：transition: property duration timing-function delay;

在一个例子中使用所有过渡属性：

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：

CSS3 动画 @keyframes

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
1规定动画的名称；2规定动画的时长。
实例：
可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成。