HTML+CSS 学习笔记五：CSS常用属性

1. visibility 属性

规定元素是否可见。
即使不可见的元素也会占据页面上的空间。
请使用 “display” 属性来创建不占据页面空间的不可见元素。

值	描述
visible	默认值，元素是可见的
hidden	元素是不可见的

p
  {
  visibility:hidden;
  }

2. cursor 属性

规定要显示的光标的类型（形状）

<span style="cursor:auto">默认</span>
<span style="cursor:pointer">一只手</span>
<span style="cursor:wait">加载中</span>
<span style="cursor:move">可移动</span>
<span style="cursor:crosshair">十字线</span>

3. 字体属性 Font

值	描述
font-style	规定字体样式
font-family	规定字体
font-size	规定字体尺寸
font-weight	规定字体粗细

4. 文本属性 Text

text-decoration

h1 {text-decoration:overline}       /*上划线*/
h2 {text-decoration:underline}      /*下滑线*/
h3 {text-decoration:line-through}   /*中插线*/
h4 {text-decoration:blink}          /*闪烁*/

text-indent
规定文本块中首行文本的缩进

p
  {
  text-indent:50px;
  }

text-transform
控制文本的大小写

值	描述
capitalize	文本中的每个单词以大写字母开头
uppercase	定义仅有大写字母
lowercase	定义仅有小写字母

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

5. 列表属性 List

list-style-type 属性设置列表项标记的类型

list-style-type:none;

6. overflow 属性

规定当内容溢出元素框时发生的事情

overflow:scroll;  /*显示滚动条以便查看其余的内容*/
overflow:auto;    /*根据需要显示滚动条以便查看其余的内容*/

7. box-sizing属性

box-sizing:border-box;

为元素设定的宽度和高度决定了元素的边框盒。
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

8. outline 属性

清除外边框

outline:none;

9. border 属性

p
  {
  border:5px solid red;  /*solid实线*/
  border-radius:25px;    /*设置边框圆角*/
  }

10. position 属性

规定元素的定位类型
1. static
默认值。没有定位，元素出现在正常的流中。
2. relative
相对定位，相对于其正常位置进行定位。
3. absolute
绝对定位，第一个有定位的父元素进行定位。
4. fixed
绝对定位，相对于浏览器窗口进行定位。
5.层级 z-index
定位元素>浮动元素>文档标准流元素

1. 当元素开启了定位以后，可以通过 z-index 来设置元素的层级。
2. z-index 值越高，元素显示优先级越高。
3. 父元素永远不会盖住子元素。

6.粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合。
Sticky 粘性的语法:

选择器{ position: sticky; top: 10px; }

粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加top. left、 right. bottom 其中一个才有效

11. 背景属性 Background

1. background-repeat
定义了背景图像的平铺模式

body
  {
  background-repeat: no-repeat;   /*背景图像不平铺*/
  }
body
  {
  background-repeat: repeat-x;	  /*背景图像将在水平方向重复*/
  }
body
  {
  background-repeat: repeat-y;	  /*背景图像将在垂直方向重复*/
  }

2. background-position
设置背景图像的起始位置

3. background-size
定背景图像的尺寸

background-size: cover;       
/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中.*/
background-size: contain;     
/*把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.*/
background-size: percentage;  
/*以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。*/

4. background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动

body 
  { 
  background-attachment: fixed;
  }
/*当页面的其余部分滚动时，背景图像不会移动*/

12. 2D/3D转换属性 transform

元素应用 2D 或 3D 转换。
该属性允许我们对元素进行旋转（rotate）、缩放(scale)、移动(translate)或倾斜。

1. 当鼠标移到上面时，顺时针旋转90度

div:hover{
transform:rotate(90deg); 
}

2. 当鼠标移到上面时，放大1.5倍

div:hovor
{
transform: scale(1.5);
}

3. 把元素从左侧移动 50 像素，从顶端移动 100 像素

div
{
transform: translate(50px,100px);
}

4. transform-origin 属性
   改变被转换元素的位置

/*设置动画的方向*/
div:hovor
{
transform: scale(1.5);
transform-origin:bottom center;
}

13. 过渡属性 transition

transition-property: all;           /*所有属性都将获得过渡效果*/
transition-duration: 0.25s;         /*规定完成过渡效果需要0.25s*/
transition-timing-function: linear  /*规定以相同速度开始至结束的过渡效果*/
transition-delay: 0.1s              /*规定在过渡效果在0.1s后开始 */

14. clear 属性

规定元素的哪一侧不允许其他浮动元素
清楚其他元素浮动对当前元素的影响

15.CSS有三个非常重要的三个特性:层叠性、继承性、优先级。

行高的继承性

body {
font: 12px/1.5 Microsoft YaHei ;
}

●行高可以跟单位也可以不跟单位
●如果子元素没有设置行高,则会继承父元素的行高为1.5
●此时子元素的行高是:当前子元素的文字大小* 1.5