CSS的样式小计（1）

如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。

border-radius: 10px 50px;

如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。

border-radius: 10px 50px 40px;

如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

border-radius: 10px 20px 30px 40px;

2.单独设置一个角的写法

border-top-left-radius: 20px; //设置左上角

border-top-right-radius: 20px; //设置右上角

border-bottom-left-radius: 20px; //设置左下角

border-bottom-right-radius: 20px; //设置左下角

设置圆：

.circle{

width: 150px;/宽高保持一致/

height: 150px;

line-height: 150px; /当高度与行高保持一致时为垂直居中/

border-radius: 50%;

background: orange;

margin: 50px;

text-align: center;

color: #fff;

}

圆形

4、div动态加载html，使用jquery的load()方法

$(“#content”).load(“user_info.html”)

5、fixed的css属性

.pub{

height: 80px;

width: 80px;

position: fixed;

right: 80px;

top: 20px;

border-radius: 50%;

background: orange;

text-align: center;

}

right=0，top=0（表示右上角）

right=0，bottom=0（表示右下角）

left=0，top=0（表示左上角）

left=0，bottom=0（表示左下角）

6、块内元素居中（text-align），行内元素居中（margin：auto 0）

7、jquery 获取data-* 属性值

• 获取id

• 1、getAttribute()方法

  const getId = document.getElementById(‘getId’);

  // //getAttribute()取值属性

  console.log(getId.getAttribute(“data-id”));//122

  console.log(getId.getAttribute(“data-vice-id”));//11

  // //setAttribute()赋值属性

  getId.setAttribute(“data-id”,“48”);

  2、dataset()方法

  //data-前缀属性可以在JS中通过dataset取值，更加方便

  console.log(getId.dataset.id);//112

  //data-vice-id连接取值使用驼峰命名法取值

  console.log(getId.dataset.viceId);//11

  //赋值

  getId.dataset.id = “113”;//113

  getId.dataset.viceId–;//10

  //新增data属性

  getId.dataset.id2 = “100”;//100

  //删除，设置成null，或者delete

  getId.dataset.id2 = null;//null

  delete getId.dataset.id2;//undefind

  3、jquery data()方法

  var id = $(“#getId”).data(“id”); //122

  var viceId = $(“#getId”).data(“vice-id”); //11

  //赋值

  $(“#getId”).data(“id”,“100”);//100

  4、jquery attr()方法

  var id = $(“#getId”).attr(“data-id”); //122

  var viceId = $(“#getId”).attr(“data-vice-id”); //11

  //赋值

  $(“#getId”).attr(“data-id”,“100”);//100

  8、以下总结了一些常用的前端刷新页面的方法

  返回前两页

  返回上一页并刷新

  返回上一页

  返回上一页

  重载页面，本地刷新

  返回上一页重载页面，本地刷新

  停止跳转

  停止跳转：IE浏览器用document.execCommand(“Stop”)，Chrome和Firefox用window.stop()

  返回上一页：window.history.go(-1);

  本地刷新： window.location.reload();

  局部刷新（“#table_table”是需要刷新的框架id）：$(“#content_table”).load(location.href+" #content_table");

  9、兼容性问题

  10、获取控件外部样式