css样式设置

box-sizing初识: box-sizing是CSS3的新属性，box-sizing是一个 盒子模型，box-sizing有两个重要值：content-box和border-box

 

 

box-sizing使用总结: box-sizing的默认值为content-box，子元素不会主动继承父元素的box-sizing，border-box限制 了元素的宽高计算方式，宽高=内边距+边框+自身宽度

修改css样式没有效果怎么办?
解决办法:
1、查看引用路径是否正确
2、若路径正确，可能是浏览器缓存的是修改之前的样式，需要清除浏览器缓存，ctr+ F5即可

cursor: pointer意 思是是计算机中把鼠标指针的形状弄成-只伸出食指的手，如下图

鼠标指针的其他形状:
cursor: default 箭头,
cursor: crosshair 十字,
cursor: progress 沙漏等等。

 

 

z-index是用来设置元素的前后显示位置的：

 

 

我们在进行网页制作时都会遇到为元素设定边距的情况，边距又分为外边距和内边距，即margin和padding.

 

margin:auto=margin:auto auto auto auto, 表示上下左右都为auto; margin:0 auto=margin:0 auto 0 auto,表示上下为0，左右为auto;
margin: 1px、 2px， 则表示上下外边距为都为1px,左右外边距都为2px；
margin:auto表示横竖都居中， margin: 0 auto表示横居中，竖不居中;
margin:1px、 1px、 1px、 1px, 分别表示上外边距为1px、右外边距为1px、下外边距为1 px、左外边距为1px。

1、line-height 属性设置行间的距离(行高)，而行间距的尺寸分配是line-height 与font-size的计算值之差(在CSS中成为“行间距")分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容(文本+文本顶部+文本底部)的最小框就是行框(line-box)

2、行间距自动适应行高的方式，最好用的是采用number数值的方式。

3、设置了line-height的行框line-box, 具有的特性:
垂直居中性:由上面对line-height定义可知，line-height是通过line-box行框体现的， 而行框包括文本+文本.顶部+文本底部，文本顶部和文本底部是line-height与font-size差值的一半,所以，line-box与文本共用中基线，这就是行高的垂直居中性。
单行文字垂直居中对齐：将line-height属性设 置为所需要的行框高度；
多行文本垂直居中对齐：只需要将行框内的多行文本转换为内敛元素,比如设置display:inline-height或inline,然后单独设置内敛元素的行间距，整个内敛元素就在行框内垂直居中对齐了；

注:通过line-height设置文本垂直对齐，如果设置元素垂直对齐,需使用vertical- align:middle;

position属性值有哪些
1、absolute: 生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位。元素的位置通过"left", "top", "right"以及"bottom"属性进行规定。
2、fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left", "top", "right"以及"bottom"属性进行规定。
3、relative:生成相对定位的元素，相对于其正常位置进行定位。因此,"left:20"会向元素的LEFT位置添加20像素。
4、static:默认值。没有定位，元素出现在正常的流中(忽略top, bottom, left, right 或者z-index声明)。

 

left和top属性:使用必须伴随设置position，指的是距最近的一个position属性为relative或者 absolute的父级元素的左边或上边的距离，如果父级属性未设置position则默认为body.