CSS样式

1 宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

2 字体属性

字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小

p {
  font-size: 14px;
}

字重

font-weight用来设置字体的字重（粗细）。

字体颜色

颜色属性被用来设置文字的颜色color。

颜色是通过CSS最经常的指定：

• 十六进制值 - 如: ＃FF0000
• 一个RGB值 - 如: RGB(255,0,0)
• 颜色的名称 - 如:  red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

3文字属性

文本布局的一些属性

文字对其

text-align 属性规定元素中的文本的水平对齐方式。

文字装饰

text-decoration 属性用来给文字添加特殊效果。

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

4 背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(‘1.jpg‘);
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

简写

background:#ffffff url(‘1.png‘) no-repeat right top;

5边框

边框border属性 

• border-width
• border-style
• border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

简写

#i1 {
  border: 2px solid red;
}

 边框样式

6 border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

7 display属性

用于控制HTML元素的显示效果。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局,且dom元素依旧在html源码中显示。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失,但是设置此属性的dom元素标签依然存在html文档中。

而vue中的v-if是直接将后面值为false的标签的dom直接从html的源码中删掉,看不到标签

CSS样式