学习前端的第六天

一、浮动补充
1.添加浮动的元素不占据空间。
2.只要子元素有浮动，父元素必须添加高度。
二、页面布局补充
1.设计图
版式宽度：1920px，1680px…
网页的版心一般为960px-1200px
2.结构规划：
id名称：网页外围结构
pc端：版心宽度不能使用百分比。
3.让版心左右居中：margin：0 auto；
三、CSS的列表属性
1.列表符号（了解）
list-style-type;circle/square/none;
2.将图片作为列表符号(了解)
list-style-image:;
3.列表位置（了解）
list-style-position;inside/outside;
4.清除列表符号（重点）
list-style:none;
四、边框属性
1.边框的简写/复合式写法
简写：boder:10px solid red;
复合式：boder-width:10px;
Boder-style:solid(实线)/dashed（虚线）/dotted（点状）/double(双线);
Boder-color:red;
2.单一方向添加边框
border-left:10px solid red;
border-right:10px solid red;
border-top:10px solid red;
border-bottom:10x solid red;
3.boder的其他设置方法
border-width\border-style\border-color
这三个属性能单独拿出进行设置。
这三个属性每个最多能接收4个属性值。其中，
一个属性值：四周
两个属性值：上下 左右
三个属性值：上 左 右
四个属性值：上右下左
4.用CSS做出一个三角形
border-top:200px solid red;
border-left:200px solid transparent;
border-right:200px solid transparent;
其中，颜色值为透明：transparent
五、背景
1.背景的简写/复合写法
简写：background:red url(背景图的路径) no-repeat 200px bottom;
2.背景颜色：background-color:
3.背景图：background-image:url(路径)；
背景图的显示状态：
a: 背景图是不占据空间的。
b: 背景图大小 小于 容器大小的时候，直到铺满为止
c: 背景图大小 等于 容器大小的时候，正好显示一张
d: 背景图大小 大于 容器大小的时候，只显示容器区域
4. 控制背景图是否平铺：background-repeat:;
属性值：
repeat 平铺（默认值）
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
4: 控制背景图的位置：background-position:;
属性值：
第一个值：水平的位置 第二个值：垂直的位置
eg:
100px 200px 距离左侧100px,距离顶端200px
-100px -30px 往左移动100px,往上移动30px;
10% 20% 支持百分比
eft bottom 让背景图的左侧和底部，贴着容器的左侧和底部
right center 让背景图右侧贴着容器右侧，上下居中
center bottom 左右居中，背景图底部贴着容器底部
center 水平和垂直都居中
5: 背景图的固定：background-attachment:;
属性值：fixed/scroll;
六、背景图：
1.背景图：网页渲染，不占空间。
2.img导入的图片：html的结构，占据空间。
3.图片类型：.jpg 图片没有透明、没有动画的时候
.png 支持透明！
.gif 支持透明也支持动画。
七、盒模型
1.盒模型是网页布局的基石。从里到外包括：
内容区，内填充（补白），盒子边框（可选），外边距
八、padding的用法
1: padding是长在内容和盒子之间的，在盒子内部。
2：padding是为了调整 子元素 在 父元素里面位置关系。
3：padding的特点：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是不用减的。