前端学习Day6

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