盒子模型 CSS样式和列表
2021-01-05 02:28
标签：div 外边距 html 图片 默认 ble padding 左右 裁剪 盒子模型 CSS样式和列表 标签：div 外边距 html 图片 默认 ble padding 左右 裁剪 原文地址：https://www.cnblogs.com/yhx-3602/p/13622696.html
内边距： padding
盒子边框： border 边框线
与其他盒子距离： margin 外边距
内容+内边距+边框+外边距=面积
border边框：
border-style:（边框样式）
dotted （点状虚线）
dashed（虚线）
solid（实线）
double（双实线）
border-color (颜色)
padding内边距：
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）
padding-top: 设置元素上内边距的宽度
padding-right: 设置元素右内边距的宽度
padding-bottom:设置元素下内边距的宽度
padding-left: 设置元素左内边距的宽度
margin外边距：
margin:10px 10px; 上下 左右
margin:10px 10px 10px; 上 左右 下
margin:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）
margin-top:设置元素上外边距的宽度
margin-right:设置元素右外边距的宽度
margin-bottom:设置元素下外边距的宽度
margin-left: 设置元素左外边距的宽度
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型
backgronnd-color:red;
背景图片：
backgronnd-image:url(“images/1.jpg”);
背景平铺：
水平方向平铺：background-repeat:repeat-x;
垂直方向平铺：background-repeat:repeat-y;
完全平铺：默认为完全平铺
背景图片定位：
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-position:x y;
background-position:x% y%;
背景图片的大小：
percentage：以父元素的百分比来设置背景图像的宽度和高度
cover：将背景图片等比缩放以填满整个容器
contain：将背景图片等比缩放至某一边紧贴容器边缘为止
background-size取值范围：
background-size:x% y%;
背景图片的滚动：
background-attachment:scroll; 滚动，随内容的滚动而滚动
背景图像区域：
padding-box：背景被裁剪到内边距框
content-box：背景被裁剪到内容框
background-origin 属性：（设置元素背景图片的原始起始位置）