css概述三

五.盒子模型

4.box-sizing

定义盒子模型的计算方式

box-sizing:content-box; 默认值,我们定义的width/height是内容区域

元素占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

box-sizing:border-box;我们定义的width/height,是指border包含部分的宽高(含border)

元素占地宽度=左外边距+width+右外边距

 

border-box使用的时机,一个容器内,在一行显示多个元素,如果子元素的width使用%定义,那么基本就要使用border-box了

六.背景

1.背景颜色

border-style: none; border-color: initial;">

background-image:url(09.png);

3.背景图片的平铺

background-repeat:

取值:1.repeat 默认值 平铺

      2.no-repeat 不平铺

      3.repeat-x  水平方向平铺

      4.repeat-y  垂直方向平铺

4.背景图片的定位

background-position:x y;

取值:1.px为单位的数字

      2.%

      3.关键字  x:left/center/right   y:top/center/bottom

5.背景图片的尺寸

background-size:x y

取值,取两个值,是分别设置宽高

      取一个值,是设置宽,让高自适应

      1.以px为单位的数字

      2.%

      3. cover 覆盖,要求容器被全部填满,图片显示不全没关系

      4.contain 包含。让容器可以完成的包含整张图片。图片必须完整,

                容器是不是有空白区域,没关系

6.背景图片的固定

background-attachment

取值:scroll 默认值,背景图会跟随页面滚动条而滚动

      fixed 固定,背景图相对于页面位置固定

                  不会跟随页面滚动条滚动

                  但是只会在原容器区域显示

7.简写方式

background:

取值:color image repeat attachment position;

最精简方式  background:color/image;

七.渐变  gradient

渐变是指多种颜色,平缓变化的一种显示效果

渐变的主要因素

色标,一种颜色,和他出现的位置

一个渐变,最少两个色标

渐变分类

1.线性渐变,以直线的方式来填充渐变色

2.径向渐变,以圆形的方式来填充渐变色

3.重复渐变,将线性,径向渐变重复几次实现

1.线性渐变

background-image:linear-gradient(方向 , 色标1,色标2.....)

方向angle:取值

     1.关键字  to bottom

               to right

               to left

               to top

     2.角度值  0deg  to top

               90deg to right

               180deg to bottom

               270deg to left

色标color-point:取值

         颜色+位置

         1.只写颜色不写位置,一般用于只有两个色标,对应开头和结尾

            linear-gradient(0deg,#000,#0ff)

         2.颜色+px为单位的数字

            linear-gradient(0deg,#000 0px,#ff0 50px,

            #000 100px,#0ff 150px,#000 200px)

         3.颜色+%

            background-image:linear-gradient(0deg,#000 0%,

            #ff0 25%,#000 50%,#0ff 75%,#000 100%);

2.径向渐变

background-image:radial-gradient(半径 at 圆心,色标1,色标2.....)

半径取值 px为单位的数字

圆心取值 :1.以px为单位数字  x  y

           2.x% y%

           3.关键字  x: left/center/right

                     y:top/center/bottom

色标取值 ,1.颜色+px 颜色的填充,就与半径没有关系了

            2.颜色+% 这里的位置,是半径的%

3.重复渐变

重复的线性渐变

background-image:repeating-linear-gradient(45deg,#000 0px,#ff0 10px,#000 20px,#0ff 30px,#000 40px);

重复的径向渐变

4.浏览器兼容性问题(ie8.0以下不兼容)

为了兼容低版本浏览器,写的css代码,叫做css hack

渐变属性,兼容低版本浏览器的写法

1.添加前缀

chrome/safari    -webkit-

firefox           -moz-

IE                -ms-

opera            -o-

2.线性渐变的方向,发生了改变

top/ right/ bottom/ left

background:-webkit-linear-gradient( bottom,#f00,#00f);

background:-ms-linear-gradient( bottom,#f00,#00f);

background:-o-linear-gradient( bottom,#f00,#00f);

background:-moz-linear-gradient( bottom,#f00,#00f);

八.文本格式化(重点**************)

1.字体属性

①字体大小

font-size:

取值:px/pt/em/rem为单位的数字

②设置字体系列

font-family

取值:pc中字体库里有的字体,如果字体名称代空格,必须加""

多个字体名称,使用,隔开

font-family:chiller,华文彩云,"mv boli";

③字体权重(加粗)

font-weight:

取值  1.关键字  lighter 

                normal      

                bold

                bolder

      2.无单位,100的整倍数,最大值1000  17:08~17:23休息

④字体样式

font-style:italic;

         normal

⑤小型大写字母

font-variant:small-caps;

⑥简写模式

font:style variant weight size family;

最简写法  font:size family


 

 

上一篇:SPSS方差分析


下一篇:python京东4000条卫浴数据分析展示