CSS(day03)

五.框模型----盒子模型(重点☆☆☆☆☆)
2.外边距的特殊效果
①外边距合并
②关于块级元素,行内元素,行内块特点的总结
③默认自带外边距元素
④外边距的溢出
⑤外边距的颜色和使用时机
外边距是透明
元素位置微调
一组元素之间,需要有空隙的时候,可以选择使用外边距

3.padding内边距
边框到内容区域的距离
改变内边距,效果是元素变大
实际宽高没有改变,元素的实际占地空间变大
内边距的颜色,是元素的背景色

①语法
padding:v1; 上右下左
padding:v1 v2; 上下 左右
padding:v1 v2 v3; 上 左右 下
padding:v1 v2 v3 v4; 上右下左
取值: px为单位的数字
%,是父元素宽度的百分比
padding没有auto
padding-top
padding-right
padding-bottom
padding-left

②什么时候使用内边距
1.把元素撑开,让边框与内容区域的距离变大

4.box-sizing:
默认盒子模型实际占地宽度的公式=左外边距+左边框+左内边距+width+右内边距+右边框+右外边距

box-sizing:改变盒子模型的计算公式
取值:1.默认值 content-box 默认盒子模型的计算方式
2.border-box,我们设置width
包含padding+border+内容区域
实际占地宽度的公式
左外边距+width+右外边距

1.背景色
background-color:合法的颜色值
2.背景图片
background-image:url(“image/08.png”);
3.背景图平铺
background-repeat: repeat 默认值,平铺
no-repeat 不平铺
repeat-x x轴平铺
repeat-y y轴平铺
4.背景图片的定位
background-position:
取值 :
1.一个以px为单位的数字,控制x轴,y轴默认垂直居中
2.两个以px为单位的数字,分别控制x轴和y轴
3.% 一个值, 控制x轴,y轴默认垂直居中
4.% 两个值,分别控制x轴和y轴
5.关键字 x:left/center/right y:top/center/bottom

5.背景图片的尺寸
background-size:
取值 1.一个以px为单位的数字,同时设置宽高
2.两个以px为单位的数字,分别设置宽高
3.% 一个值,同时设置宽高
4.% 两个值,分别设置宽高
5.cover 要求元素被背景图完整的充满,如果图片显示不全,没关系
6.contain 要求,元素内的背景图片,是完整的,如果元素有空白区域,
没关系

6.背景图片的固定
background-attachment:
默认值 scroll 背景图随着页面滚动条滚动
fixed 背景固定在可视区域内,不随着滚动条滚动
但是,只会在自己的元素中显示
如果取值fixed,那么background-position:就是相对于body定位,不是相对于原来的元素

7.背景的简写方式
background:color img repeat attachment position;
注意:
1.简写方式中,没有background-size
2.最简方式 background:color/url()
3.重写样式的时候,不要使用简写,不然会把其它值覆盖

七.渐变 gradient
渐变是指多种颜色,平缓变化的一种显示效果
控制渐变的主要因素:色标
色标:一种颜色,及其出现的位置
一个渐变最少两个色标
1.渐变的分类
线性渐变:以直线的方式来填充渐变色
径向渐变:以圆形的方式填充渐变色
重复渐变:将线性和径向反复的实现
2.线性渐变
background-image:
linear-gradient(方向,色标1,色标2,…);
方向:1.关键字,写终点 to top
to right
to bottom
to left
2.角度 0deg ↑
90deg →
180deg ↓
270deg ←
色标 1.颜色+位置%
2.颜色 平均分配位置
3.颜色+px

3.径向渐变
background-image:radial-gradient(半径 at 圆心x 圆心y,色标…)
注意 色标使用%表示位置,半径才有效
圆心取值 1:关键字 x:left/center/right
y:top/center/bottom
2.以px为单位的数字
3.%

4.重复渐变
background-image:repeating-linear-gradient()
background-image:repeating-radial-gradient()

5.浏览器兼容问题
编写兼容ie8.0以下版本浏览器的行为,叫做编写css hack
浏览器内核 -webkit- chrome/safari
-moz- firefox
-ms- IE
-o- opera
background:-webkit-linear-gradient( bottom, #27b0f6, #0aa1ed );
background:-moz-linear-gradient( bottom, #27b0f6, #0aa1ed );
background:-ms-linear-gradient( bottom, #27b0f6, #0aa1ed );
background:-o-linear-gradient( bottom, #27b0f6, #0aa1ed );
注意,带内核写线性渐变,方向写起点,不能加to

八.文本格式化(重点****)
1.字体属性
①字号大小
font-size: 以px/pt/rem/em为单位的数字
②字体的类型
font-family:
取值:pc中字体库里有的字体,如果字体有空格,建议使用""括起来
多个字体系列,使用,分隔
font-family:幼圆,黑体,“mv boli”;
③字体加粗
font-weight:normal bold lighter bolder
无单位的数字,必须是100的整倍数,不能超过1000
400—normal
700—bold
300—lighter
④字体样式
font-style:normal/italic
⑤小型大写字母
font-variant:small-caps;
⑥简写方式
font:style variant weight size family;
最简方式font:size family;

写样式的思路
1.找元素 从外往里 从左往右 从上往下
2.写样式
①宽高,大体位置
②边框,背景
③文本所有样式
④微调