自定义css怎么添加在现有样式上添加组件

css中直接使用给出的css变量赋值即可。自定义css添加在现有样式上添加组件直接使用给出的css变量赋值即可。自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。

js不可修改css中的属性，只能为指定的class的元素添加内联样式（style）

原生JS：

var dom = document.getElementsByClassName('dtd')

for(var i=0,len=dom.lengthi<leni++){

dom[i].style.color = 'red'

}Jquery

$('.dtd').css({color:'red'})

首先，在能用Margin的情况下（比如不需要border的时候）尽量用Margin；

如果一定要用padding，请尽可能不给width和height设定一个固定值，可以设为百分比，也可以不设，取默认值（块级元素默认width为100%，height为0或为内容实际高度），这样的话元素的整体大小是不会改变的；

如果一定要给width和height指定固定值，可以把这个值减去padding的值，不过要注意的是，padding是分上下左右的，所以width要减去左右padding的和，height则要减去上下padding的和。

此外还要注意，元素的边框（border）也是要占用元素的实际宽度的，所以如果想让元素保持整体大小不变，也要把border考虑进去，方法跟padding差不多。

下面列出元素的实际尺寸构成，自己去研究一下就能明白道理：

元素的实际宽度=元素的width+左右padding+左右border

元素的实际高度=元素的height+上下padding+上下border

---