逆战停课不停学，HTML学习第六天（网页版心，CSS背景，CSS边框，盒模型（今天主要学习padding）等

今天是学习HTML的第六天，今天主要学习了：网页版心，CSS背景，CSS边框，盒模型（今天主要学习padding）等，以下是今天的笔记以及部分练习（有不足之处希望小伙伴们多多留言哦）
3.23日笔记：

1.页面布局：
1）设计图：
版式宽度：1920 1680 …
网页的版心：960 - 1200
2）结构规划：
id名称：网页外围结构
pc端 版心宽度不能用百分比
3—）让版心左右居中
添加： margin:0 auto;

2.列表前的符号（清除，替换）：
1）：（了解）
list-style-type:
circle
square
none 清除列表符号
…
2）：（了解）
list-style-image:
把一张图片当作列表符号
3）: （了解）
list-style-position:
inside (内容区域里面)
outside (内容区域外面)
重点： 4）: list-style:none;清除列表默认样式

3.边框的CSS写法
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个属性值： 上右下左

4.背景的写法以及复合写法
1）背景颜色：
background-color:;
2）: 背景图：
background-image:url(路径);
背景图的显示状态：
a: 背景图是不占据空间的。
b: 背景图大小 小于 容器大小的时候，直到铺满为止
c: 背景图大小 等于 容器大小的时候，正好显示一张
d: 背景图大小 大于 容器大小的时候，只显示容器区域
3）：控制背景图是否平铺
background-repeat:;
属性值：
repeat 平铺（默认值）
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
4）: 控制背景图的位置：
background-position:;
属性值：
第一个值：水平的位置 第二个值：垂直的位置
100px 200px -> 距离左侧100px,距离顶端200px
-100px -30px -> 往左移动100px,往上移动30px;
10% 20% -> 支持百分比
left bottom -> 让背景图的左侧和底部，贴着容器的左侧和底部
right center -> 让背景图右侧贴着容器右侧，上下居中
center bottom -> 左右居中，背景图底部贴着容器底部
center -> 水平和垂直都居中
5）: 背景图的固定：
background-attachment:;
属性值：fixed/scroll;
6）：复合写法：
background:red url(背景图的路径) no-repeat 200px bottom;

5.背景图和插入图片的区别：
1）背景图：
网页渲染。
不占空间。
2）img导入的图片：
html的结构。
占据空间的！

6.CSS盒模型
含义： 是网页布局的基石！盒模型，从里到外包括：
内容区 content 内容
内填充(补白) padding 内容和盒子的填充区域
盒子边框(可选) border 快递盒子
外边距 margin 盒子外部和另一个物体的距离
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是不用减的。

练习：
网页划分浮动效果

HTML代码：

CSS样式：
#hezuo{width: 1139px;height: 386px;background-color: crimson;margin: 0 auto;text-align: center;}
#hezuo li{float: left;}
#hezuo .box1title{width: 314px;height: 67px;background-color: chartreuse;margin: auto;}
#hezuo .box2{width: 189px;height: 200px;background-color: rebeccapurple;}
#hezuo .box3{width: 189px;height: 200px;background-color: orange;}
#hezuo .box4{width: 189px;height: 200px;background-color: yellow;}
#hezuo .box5{width: 189px;height: 200px;background-color: green;}
#hezuo .box6{width: 189px;height: 200px;background-color: blueviolet;}
#hezuo .box7{width: 189px;height: 200px;background-color: wheat;}