css-day5-个人学习笔记

 

css-day5-个人学习笔记

 

一、边框

1、边框倒角——border-radius：具体数值(px) 或 %；border-top-left-radius:左上角倒角半径。

2、边框阴影——box-shadow：h-shadow（必须，阴影的水平偏移距离） v-shadow（必须，阴影的垂直偏移距离） blur（模糊距离）spread（阴影的大小）color（颜色） inset（将默认的外阴影改为内阴影）；

3、轮廓——位于边框之外的，outline:width style color。常用：outline：none；或outline：0。

 

二、框模型

1、框 & 框模型——Box Model（盒子模型），定义了元素框处理元素内容尺寸，内边距，边框和外边距的一种方式。

元素的实际宽度=左右外边距 + 左右边框 + 左右内边距 + width。

2、外边距——拉伸两个元素间的距离，页面中具备默认外边距的元素。margin-top/right/bottom/left：px /% /负值 /auto（默认情况下，auto只对左右有效，上下无效）。

注意：a、外边距合并：当两个垂直外边距相遇时，将合并成一个。

            b、外边距的溢出：特殊场合下，为子元素设置外边距(上下)会作用到父元素上。解决：为父元素增加边框(透明的)；可以为父元素设置上内边距来取代子元素上外边距； 为父元素增加一个空子元素<table></table>。

            c、大部分行内元素垂直外边距无效，img允许设置。

3、内边距——内容区域 和 边框(边缘)之间的距离；padding-top/right/bottom/left：px /% /auto。

4、box-sizing——重新指定元素尺寸计算模式；box-sizing:content-box（默认）|border-box|inherit。

a、content-box为标准盒子模型，总宽度 = margin+border+padding+width，width指的是content的宽度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

b、border-box为IE盒子模型（怪异模式 ），总宽度=margin+width，width指的是content+border+padding的宽度。

c、inherit规定从父元素继承box-sizing属性的值

三、背景

1、背景颜色——background-color：颜色值 或 transparent

2、背景图像——background-image：url(背景图url)。

3、背景重复——background-repeat：repeat（默认值，即横向又纵向平铺）/ repeat-x（只在横向平铺）/ repeat-y（只在纵向平铺）/ no-repeat（不平铺）。

4、背景图片尺寸——background-size：value1 value2（指定背景图像宽度 和 高度）/ value1% value2%（采用当前元素宽和高的占比）/  cover（覆盖，会将背景图像等比放大，直到背景图完全覆盖到元素为止）/ contain（包含，会将背景图像等比放大，直到右边或下边碰到元素边缘为止）。

5、背景图片固定——background-attachment：scroll（滚动，默认值）/fixed（固定，让背景图一直在可视化区域中）。

6、背景图片定位——background-position：x y（指定背景图水平 和 垂直偏移距离）/ x% y%（0% 0% : 背景图在左上） / 关键字（x : left / center / right 

y : top / center/ bottom）。

7、背景属性——在一个 background 属性中声明所有的背景属性值；background：color url repeat attachment position。

8、特殊使用——CSS Sprites(精灵图/雪碧图)；一次请求下载图片，减少服务器压力。