HTML元素

盒子div模块

一、标签的组成：

padding(内边框)：内部填充物。

小提示：top(上)，right(右),bottom(下)，left(左)

border(边框)：盒子的边缘{

​

border-style(边框样式属性){
	none:没有边框
	solid:实线
	dashed:虚线
	dotted:点线
	double:双实线
}
border-width(宽度属性)；
border-color(颜色属性)；
小技巧：border-color:transparent(边框透明色)
//设置属性时候可，单个设置，也可以综合设置boder:四边宽度 四边样式 四边颜色。

}

marign(外边框)：盒子与盒子之间的距离。

二、属性

auto:表示自动适应

.div{
/* 位于同一行 */
display: flex;
/* 自动换行 */
flex-wrap: wrap;
}

display: inline-block;
//也是位于第一行                           

可以多多使用display属性

设置背景图像

body{
background-color: ;  //设置背景颜色
background-image:url(images/***.jpg); //设置背景图片
}

设置背景图像平铺

默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不想的话，可通过

background-repeat:  ;

来设置。

no-repeat:不平铺(图像位于元素左上角，只显示一次)

repeat-x: 只沿水平方向

repeat-y: 只沿竖直方向

注意：当背景图像和背景颜色同时出现的时候，背景图像优先显示。

背景图像位置

background-position:  ;

注意：通常设置两个值，水平坐标和垂直坐标。

方式：①使用数值：直接设置坐标，如：“background-position : 20px 20px”

②使用预定义的关键字：指定背景图像对齐方式{

水平：left、center、right

垂直：top、center、bottom

}

③使用百分比：按背景图像和元素的指定点对其齐。{

0%0%表示图像左上角与元素的左上角对齐。

50%50%表示图像50%50%的中心点与元素50%50%的中心点对齐。

}

背景图像固定

background-attachment:scroll;(图像随页面一起滚动)

background-attachment:fixed;(图像不随页面一起滚动)

综合设置元素背景

background:背景色 url("图像") 平铺 定位 固定；

小添加

关于定位：

（具体详细情况可以自己尝试尝试）

相对定位:是元素自身对自己原先的位置进行定位。

.div2{
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
				border: 1px solid red;
				position: relative;
				left:20px;

绝对定位:是元素对于父元素的定位，上一级的父元素必须要有position，上一级知道body。

.div1{
				width: 300px;
				height: 300px;
				background-color: #000000;
				border: 1px solid rgb(225,225,225);
				position: absolute;
				left: 500px;