div基本设置:
width
宽
height 高
background 背景
background-color 背景色 ( 英文单词 十六进制 rgb)
背景图
background-image:url(" 图片路径 ")
背景图平铺
background-repeat : no-repeat repeat-x repeat-y
背景图定位
background-position :第一个值( x 轴的位置)第二个值( y 轴的位置);
第一个值: left center right 30px;
第二个值: top center bottom 100px;
复合写法
background: red url(image/qqq.jpg)30px 100px no-repeat;
背景图滚动
background-attachment: fixed;
border 边框 :
复合写法
border:border-with border-style border-color;
border-style 边框样式 solid 实线 dashed 虚线 dotted 点线
border-color 边框颜色
height 高
background 背景
background-color 背景色 ( 英文单词 十六进制 rgb)
背景图
background-image:url(" 图片路径 ")
背景图平铺
background-repeat : no-repeat repeat-x repeat-y
背景图定位
background-position :第一个值( x 轴的位置)第二个值( y 轴的位置);
第一个值: left center right 30px;
第二个值: top center bottom 100px;
复合写法
background: red url(image/qqq.jpg)30px 100px no-repeat;
背景图滚动
background-attachment: fixed;
border 边框 :
复合写法
border:border-with border-style border-color;
border-style 边框样式 solid 实线 dashed 虚线 dotted 点线
border-color 边框颜色
透明:
transparent
内边距:
padding 内边距 内填充
padding-left: 80px;左内边距
padding-top: 20px;上内边距
padding-right: 40px;右内边距
padding-bottom: 60px;下内边距
padding 的复合写法
padding:10px;一个值代表 上右下右都是10px;
padding: 10px 20px;两个值 一个值代表上下 第二个值代表左右
padding:10px 20px 40px;三个值 第一个值代表上 第二个值代表左右 第三个值代表下
padding: 10px 20px 30px 30px;四个值 第一值代表上 第二个值代表右 第三个值代表下 第四个值代表左
内边距:
padding 内边距 内填充
padding-left: 80px;左内边距
padding-top: 20px;上内边距
padding-right: 40px;右内边距
padding-bottom: 60px;下内边距
padding 的复合写法
padding:10px;一个值代表 上右下右都是10px;
padding: 10px 20px;两个值 一个值代表上下 第二个值代表左右
padding:10px 20px 40px;三个值 第一个值代表上 第二个值代表左右 第三个值代表下
padding: 10px 20px 30px 30px;四个值 第一值代表上 第二个值代表右 第三个值代表下 第四个值代表左
外边距:
margin 内边距 内填充
margin-left: 80px;左内边距
margin-top: 20px;上内边距
margin-right: 40px;右内边距
margin-bottom: 60px;下内边距
margin 的复合写法:
margin:10px;一个值代表 上右下右都是10px;
margin: 10px 20px;两个值 一个值代表上下 第二个值代表左右
margin:10px 20px 40px;三个值 第一个值代表上 第二个值代表左右 第三个值代表下
margin: 10px 20px 30px 30px;四个值 第一值代表上 第二个值代表右 第三个值代表下 第四个值代表左
标签的嵌套: 确定父子级关系
1 、第一个子级的 margin-top 会在特定的情况下穿透父级
规避方法:
1 、给父级加边框
2 、给父级加 overflow:hidden;
3 、不要用 margin-top; 父级的 padding-top 代替
4 、兄弟关系的 margin-top 和 margin-bottom 会叠样
盒模型
空间大小:
盒子的总宽度:border-left+padding-left+width+padding-right+border-right
margin 内边距 内填充
margin-left: 80px;左内边距
margin-top: 20px;上内边距
margin-right: 40px;右内边距
margin-bottom: 60px;下内边距
margin 的复合写法:
margin:10px;一个值代表 上右下右都是10px;
margin: 10px 20px;两个值 一个值代表上下 第二个值代表左右
margin:10px 20px 40px;三个值 第一个值代表上 第二个值代表左右 第三个值代表下
margin: 10px 20px 30px 30px;四个值 第一值代表上 第二个值代表右 第三个值代表下 第四个值代表左
标签的嵌套: 确定父子级关系
1 、第一个子级的 margin-top 会在特定的情况下穿透父级
规避方法:
1 、给父级加边框
2 、给父级加 overflow:hidden;
3 、不要用 margin-top; 父级的 padding-top 代替
4 、兄弟关系的 margin-top 和 margin-bottom 会叠样
盒模型
空间大小:
盒子的总宽度:border-left+padding-left+width+padding-right+border-right
盒子的总高度:border-left+padding-top+height+padding-bottom+border-bottom