2020.03.23知识总结

知识总结

一、版心：
设计图：
版式宽度1920/1680
版心宽度960/1200
结构规划：
ID名称：网页外围结构
Pc端 版心宽度不能用百分比!!!
版心左右居中：margin：0 auto；
二、研究列表符号：
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/双线)
3:给单一方向添加边框
Border-lift:10px solid red;(左边框)
Border-right:10px solid red;(右边框)
Border-top:10px solid red;（上边框）
Border-bottom:10px 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;
四、背景
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 -200px 往左移动100px，往上移动200px；
Center 水平和垂直都居中
Left top 让背景图的左侧和上侧贴着容器的左侧和上侧；
5：背景图的固定
Background-attachment:;
属性值：fixed/scroll
简写：background:red url(路径) no-repeat 200px bottom;
五、背景图片
支持img，gif，png格式
Img导入的图片：导入背景图里面不占据空间；导入html结构里面是占据空间的。
六、盒模型
1：Css盒模型：
是网页布局的基石，从里到外包括：内容区，内填充，盒子边框，外边距。
2：Paddi的用法
（1）passing是长在内容和盒子之间的，在盒子内部。
（2）Padding是为了调整子元素在父元素里面的位置关系。
（3）Padding特点：padding的值会把盒子撑大。
（4）如果想让盒子保持原有大小，需要在宽高基础上减去padding值。
（5）给单一方向设置padding值：
Padding-lift/top/right.bottom:;
(6)padding设置方法：
Padding：1个值 四周
Padding：2个值 上下 左右
Padding：3个值 上 左右 下
Padding：4个值 上 右 下 左
(7)Padding值不能设置负值
(8)Padding值不会对背景图造成影响
(9)如果一个盒子没有设置固定的宽高，添加padding是不用减的