CSS样式

css一些常用的基本属性

设定盒子的边框不增加盒子的宽高去除浏览器默认内外边框

*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

清除浏览器默认样式自行定义防止不同浏览器不同样式

input,button,select,textarea{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border: none;
}

定义变量

:root{
  --color:red
}
/* 使用变量 */
body{
  color:var(--color);
  /* 也可这样使用如果变量未定义就是用的二个参数 */
  color:var(--color,#000);
}
/* 局部变量声明 */
.box{
  --color:red;
}
.box span{
  color:var(--color);
}

javascript如何操作css变量

操作全局变量
document.documentElement.style.setProperty(“–data_name”,”data_value”)
操作局部变量
document.querySelectorAll(selector)[0].style.setProperty(“–data_name”,”data_value”);

设置显示行数 2行溢出隐藏加省略号

溢出隐藏
overflow: hidden;
显示省略号来代替被修剪的文本
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;（行数）
-webkit-box-orient: vertical;

设置日期居右显示

ul li{
  positio:relative
}
ul li span{
  position:absolute;
  right:0
}

背景关联文档比较长文档向下滚动式背景图像也会随之滚动

当文档滚动到超过图像的位置时图像就会消失
可通过background-attachment属性防止这种滚动可以声明图像对于可视区是固定的fixed
因此不会受到滚动的影响了
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed

超链接 a标签

a:link 初始状态
a:hover 鼠标移上
a:active 鼠标点击时
a:visited 访问过后

垂直居中

display: inline-block;

清楚浮动

.clearfix {
overflow: auto;
/×兼容ie6×/
zoom: 1;
}

内联块bug

display: inline-block;
vertical-align: top;

布局文字样式

padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
文字诗文排版样式

.text {
  float: right;
  padding-right: 10px;
  padding-top:150px ;
  font-size: 18px;
  line-height: 30px;
  margin: 0 auto;
  height: 350px;
  writing-mode: tb-lr;
  letter-spacing:13px;
  /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

设置打印样式

<link rel="stylesheet" href="print.css" media="print">
@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

强制同一行内显示所有文本不换行

让文字不换行，无论css宽度设置多少，所有文字都在一行显示。特别是标题列表，我们只想显示一行标题内容，而有时宽度有限标题文字多了width又有限，这个时候我们可以使用white-space样式让他一排显示不换行

语法与结构

1、white-space 语法： white-space: normal nowrap

2、white-space参数： normal : 默认处理方法 nowrap：强制在同一行内显示所有文字直到文本结束或者遇到br标签对象才能换行

css常用字体

宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft?YaHei
微软正黑体 Microsoft?JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312