https://codepen.io/hellohy/pen/QMOyWR <div class="l-container"> <div class="container"> containercontainercontainercontainercontainercontainercontainercontainercontainercontainercontainercontainer <button>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ /*取消浏览器外间距*/ margin: 0; } .c1{ wid
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 200px; height: 200px; float:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 200px; height: 200px; /*none隐藏
摘要 解决频繁使用CSS中transform转换图像绘制pie chart时导致内存占用持续增加的解决方案。 正文 场景，我需要使用https://codepen.io/ejsado/pen/yLNMPG 这个饼图样式每隔1ms绘制预测结果，使用过程中浏览器内存占用暴涨，研究发现，这个饼图组件使用"transform" : "rotate("+sizeRotat
变形：平移、旋转与缩放 变形就是指通过 css 来改变元素的形状或位置 变形不会影响到页面的布局 transform用来设置元素的变形效果 1、平移 translateX() 沿着由方向平移 translateY() 沿着 y 轴方向平移 translateZ() 沿着 z 轴方向平移平移元素 百分比是相对于自身计算的 几
调色器测试 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p.picker{
table: 父： display:flex 子 ：3个统一设置 ： display: table-cell; 其中 左右 200 dislay: flex 左右为200 中间Flex 为1 grid: 父： dislay: gridheight: 100vh;grid-template-rows: 100px; grid-template-columns: 300px auto 300px; 工作中如果有您解决不了的问题或者您花
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定定位</title> <style type="text/css"> .box1{ width: 200px; hei
页面只能容纳一个块级元素时,蓝色块会被隐藏 下滑滚动条,蓝色块逐渐出现 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta
立体呈现 目标:使用tranform-style:preserve-3d呈现立体图形 呈现立体图形步骤 盒子父元素添加transform-style:preserve-3d; 按需求设置子盒子的位置(位移或旋转) 注意 空间内,转换元素都有自己独立的坐标轴,互不干扰 实现正方体 <!DOCTYPE html> <html lang="en"> <head
css3圆角border-radius: 10px;border-top-left-radius: 10px;左上角圆角(单个圆角设置，先写上下，再写左右)正圆圆角，宽高相等，设置border-radius是宽高的值css3盒子阴影box-shadow:3px 8px 21px 8px;第一个值，水平位置，正右负左，0最中间第二个值，垂直位置，正下负上，0中间第三个值，模糊程度，值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w
html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <h1>我的第一个HTML页面</h1> <p>我的第一个段落。</p> <div class='div&#
原始样式： .box { width: 100%; height: 600px; background-color: lightblue; } .content { width: 200px; height: 200px; background
作用域： 声明变量： 全局变量： 在页面的最外边声明的变量是全局变量。拥有全局作用域 局部变量： 在某个选择器内或函数内声明的变量就是局部变量 ， 拥有局部作用域 变量的作用域： 全局作用域: 在任何地方都可以访问使用 局部作用域: 只能在变量声明的地方使用 html结构： HTML <ul class=
sass变量的声明： 通过 $ 声明变量 ， $ 后边的就是变量的名字， 比如：$wd;声明变量后需要给变量赋值 ,比如 $wd:200px 变量的命名规则： 变量名都是自定义的 变量名可以使用字母，_ 作为开头，后边可以使字母，数字，_ , - 的组合，比如：$wd:100px $_ht:100px $width-html:29px $top1:20px
<style> div { width: 200px; height: 200px; background-color: coral; } </style> </head> <body> <div></div> </body> <script> var div = document.qu
盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
1.怪异盒模型 语法：box-sizing:border-box; padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。 HTML : <div> 怪异盒模型 </div> CSS: div{ width: 200px; height: 200px;
offset概述 offset翻译过来就是偏移量 我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Co
变形就是指通过 css 来改变元素的形状或位置 变形不会影响到页面的布局 transform用来设置元素的变形效果 1、平移 translateX() 沿着由方向平移 translateY() 沿着 y 轴方向平移 translateZ() 沿着 z 轴方向平移平移元素 百分比是相对于自身计算的 几种水平垂直双方向居中的
01 上节回顾 http协议语法（*****） 上层应用的通信协议 浏览器/WEB应用程序 1 基于TCP协议（三次握手） 2 基于请求响应模式， 先请求 3 无连接 请求格式 content-type 声明请求体数据格式 application/x-www-form-urlencoded : name=zhutao2014&pwd=123 json : {"user":"yuan",
