06盒子模型、 CSS背景和列表

标签：列表   定位   round   chm   重要   水平   col   origin   div   

div标签自定义盒子模型

class和id的主要差别是：class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

自身内容：width、height 宽高
内边距： padding
盒子边框： border 边框线
与其他盒子距离： margin 外边距
内容+内边距+边框+外边距=面积
border边框：

常见写法：border:1px solid #f00;

border-width（边框宽度）
border-style:（边框样式）
dotted （点状虚线）
dashed（虚线）
solid（实线）
double（双实线）
border-color (颜色)
padding内边距：

padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）
padding-top: 设置元素上内边距的宽度
padding-right: 设置元素右内边距的宽度
padding-bottom:设置元素下内边距的宽度
padding-left: 设置元素左内边距的宽度
margin外边距：

margin:10px; 上下左右
margin:10px 10px; 上下 左右
margin:10px 10px 10px; 上 左右 下
margin:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）
margin-top:设置元素上外边距的宽度
margin-right:设置元素右外边距的宽度
margin-bottom:设置元素下外边距的宽度
margin-left: 设置元素左外边距的宽度
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型

IE盒子模型width = padding+border+内容

标准盒子模型 = 内容的宽度（不包含border+padding）

背景颜色：

background:red;
backgronnd-color:red;
背景图片：

background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景平铺：

不平铺：background-repeat:no-repeat;
水平方向平铺：background-repeat:repeat-x;
垂直方向平铺：background-repeat:repeat-y;
完全平铺：默认为完全平铺
背景图片定位：

通过属性background-position来实现显示背景图片的位置

background-position取值范围：

top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-position:x y;
background-position:x% y%;
背景图片的大小：

通过属性background-size来设置背景图片的大小

length：设置背景图像的高度和宽度
percentage：以父元素的百分比来设置背景图像的宽度和高度
cover：将背景图片等比缩放以填满整个容器
contain：将背景图片等比缩放至某一边紧贴容器边缘为止
background-size取值范围：

background-size:x y;
background-size:x% y%;
背景图片的滚动：

通过属性background-attachment来设置背景图片是否随着内容的滚动而滚动

background-attachment:fixed; 固定，不随内容的滚动而滚动
background-attachment:scroll; 滚动，随内容的滚动而滚动
背景图像区域：

background-clip 属性：（指定背景绘制区域）

border-box：背景被裁剪到边框盒
padding-box：背景被裁剪到内边距框
content-box：背景被裁剪到内容框
background-origin 属性：（设置元素背景图片的原始起始位置）

多重背景图像：

background-image：url(img1.jpg), url(img2.jpg)

06盒子模型、 CSS背景和列表

标签：列表   定位   round   chm   重要   水平   col   origin   div   

原文地址：https://www.cnblogs.com/xtt0410/p/13622077.html