Day6 2020-03-23

Day6
1、 浮动拓展
添加浮动的元素不占据空间（脱离文档流）
只要子元素有浮动，父元素必须添加高度！！！！（记住）
2、 网页布局拓展
设计图：
版式宽度：1920 1680…
网页的版心：960 – 1200
结构规划：
Id名称：网页外围结构
Pc端：版心宽度不能用百分比

怎样让版心左右居中？
给要做居中的版心元素添加上 margin: 0 auto; 属性
3、 css列表属性：
a. list-style-type:
circle
square
none 清楚列表符号
……
b. lift-style-image:url;
把一张图片作为列表符号
c. lift-style-position:
inside (内容区域里面)
outside (内容区域外面)
d. lift-style:none; (重点：清楚列表符号)

4、 css边框属性：
a. 边框在哪里？
长在元素的宽高之外

b. Border: 10px solid red; (简写/复合式写法)
Border-width:10px;
Border-style:solid;
Border-color:red；
常用线条类型：
Solid:实线
Dashed:虚线
Dotted:点线
Double:双实线

c. 给单一方向添加边框：
Border-left:10px solid red;
Border-right:10px solid red;
Border-top:10px dashed orange;
Border-bottom:10px dotted pink;

d. Border的其他设置方法：
Border-width border-style border-color
这三个属性能单独拿出进行设置；
这三个属性每个最多能接收4个属性值。

Eg：
Border: 10px solid;
Border-color: 1到4个属性值
1个属性值：四条边框属性相同
2个属性值：上下 左右
3个属性值：上 左右 下
4个属性值：上 右 下 左
e. 用css实现一个三角形：
一个为不透明，另外三个颜色值为transparent；

5、 css的background属性 (background:😉 复合属性；
a. 背景颜色
Background-color:;
b. 背景图：
Background-image:url;

	背景图的显示状态：

1. 背景图是不占据空间大小的；

2. 背景图大小 < 容器大小时，平铺到铺满为止；

3. 背景图大小 = 容器大小是，正好显示整张图片；

4. 背景图大小 > 容器大小时，只显示容器区域内容；
   c. 控制背景图知否平铺：
   Background-repeat:;
   属性值：
   Repeat 平铺（默认值）
   No-repeat 不平铺
   Repeat-x 横向平铺
   Repeat-y 纵向平铺
   d. 控制背景图的位置：
   Background-position:;
   属性值：
   第一个值：水平位置 第二个值：垂直位置
   Eg：
   100px 200px => 距离左侧100px，距离顶部200px；
   -100px -30px => 往左移动100px，往上移动30px；
   10% 20% => 支持百分比
   Left bottom => 左底
   Right center => 右中
   Center bottom => 中 底
   e. 背景图的固定：
   Background-attachment:;
   属性值：fixed/scroll

   简写：
   Background: red url() no-repeat 200px center;

6、 背景图和img的区别：
背景图：
网页渲染；
不占空间

Img导入的图片：
Html的结构；
占据空间！

什么时候使用背景图，什么时候使用img；
当网页中的图片固定不变时，用背景图；
当网页中的图片需要随后台数据更新时，用img；另网页中大部分都是img导入的图片。

图片类型：
.jpg => 图片无透明、动画属性
.png => 支持透明
.gif => 支持透明和动画

7、 Css盒模型
Css盒模型是网页布局的基石！
盒模型从里到外包括：
Content 内容区
Padding 内填区（补白）
Border 盒边框
Margin 盒子外部的距离

Padding的用法：

1. Padding是长在内容和盒子之间的，在盒子内部；
2. Padding是为了调整 子元素 在 父元素 里面位置的关系；
3. Padding的特点，可以把盒子撑大；
4. 如果想让盒子保持原有大小，需要在宽高的基础上减掉padding的值
5. 给单一方向设置padding值：
   Padding-left/right/top/bottom:;
6. Padding设置方法：
   Padding：1个值 四周
   Padding：2个值 上下 左右
   Padding：3个值 上 左右 下
   Padding：4个值 上右下左
7. Padding不能设置负值
8. Padding不会对背景图造成影响
9. 如果一个盒子没有设置固定的宽和高，添加padding值时不用减。