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 |
④字体样式
|
font-style:italic; normal |
⑤小型大写字母
|
font-variant:small-caps; |
⑥简写模式
|
font:style variant weight size family; 最简写法 font:size family |
