html盒子背景图,CSS盒子模型以及背景图

===========本文共1500字================

CSS盒子模型---边框

内容区域

边框box-shadow: none;

边框宽度 border-width

边框样式 border-style

边框颜色 border-color

复写属性：宽度、样式、颜色

圆角 border-radius 取值可以为px 或是百分比

小三角：通过border设置

CSS盒子模型---内容区域

​ 宽度：width 块级盒子未设宽度时默认为父元素的100%，内联、内联块盒子默认宽度由内容撑开

​ 高度：height 未设置时一般由内容撑开，注意父元素在子元素浮动时会产生高度塌陷问题

传统盒子的宽高

盒子内容的宽高：指为盒子设置的width height

盒子元素的宽高:width+padding+border height+padding+border

盒子在网页上占据的宽高：width+padding+border+margin

*{padding:0;}

*的性能不佳，会选中所有标签，通常在项目中会使用css reset

CSS盒子模型---内边距区域padding

​ 属性简写

padding:10px; 上下左右都为10px

padding:10px 20px; 上下10px 左右20px

padding:10px 20px 30px; 上10px 左右20px 下30

padding:10px 20px 30px 40px: 上10 右20 下30 左40

​ 有些盒子会有默认的padding，我们一般把网页上所有的标签padding设为0(0px px可以不写)

​ 经典代码

*{padding:0;}

*的性能不佳，会选中所有标签，通常在项目中会使用css reset

CSS盒子---外边距margin

​ 有些盒子会有默认的margin，我们一般把网页上所有的标签margin设为0(0px px可以不写)

​ 经典代码

*{margin:0;}

​ margin有四个方向 上右下左

​ 属性简写与padding相同

margin塌陷(重叠问题)

兄弟元素

上个盒子的margin-bottom会与相邻下个盒子的margin-op重叠，具体值取两者之间>的最大值

解决：对于上下两个盒子，一般只设置一个margin

父子元素

对于父子盒子来说，同时设置垂直上方向的margin，最终里>面盒子的margin会取两者之间的最大值

解决：

1)父元素加上padding：盒子在网页上大小发生变化

2)父元素加border：盒子在网页上大小发生变化

3)overflow:hidden(溢出：隐藏) ：不会改变盒子在网页上的大小

NEW盒子模型

​ 通过设置属性使传统盒子变成新盒子

​ 属性box-sizing：

​ 值： content-box(默认、传统盒子)

​ border-box(NEW)此时width height代表盒子在网页上的大小，网页会自动修改盒子内容的大小

盒子阴影box-shadow

​ 格式：box-shadow：水平阴影、垂直阴影、模糊程度、阴影尺寸、阴影颜色、内/外(默认);

利用伪元素创建盒子模型

.box::before{

content:"";

/* 默认是行内盒子 一般修改为块级盒子*/

display:block;

width:100px;

height:100px;

}

对于行内盒子来说，宽高设置后不会有效果，margin，padding在水平方向上有效，垂直方向上无效。

盒子背景

背景颜色：background-color

默认填充content、padding、border不会填充margin

颜色：单词、十六进制、rgb、rgba

十六进制：#ffff00 可以简写 #ff0 AABBCC 可以简写为ABC

rgba(255,255,0,0):a代表透明度，0-1,0代表完全透明，1完全不透明，设置0.5可以简写为.5

可以设置颜色属性值为：transprant代表透明

背景图片：background-img：url()/("");

默认填充content、padding、border、不填充margin，

默认图片左上角与盒子左上角(padding)对齐

作为背景图不会压缩、变形

盒子小于图片，默认盒子背景是图片的一部分

盒子大于图片，默认情况下在水平和垂直方向上会平铺图片、默认在border上也会填充图片

控制平铺：background-repeat

background-repeat:repeat-x;

repeat-x /*x轴平铺*/

repeat-y /*y轴平铺*/

repeat /*x/y轴平铺*/

no-repeat /*不平铺*/

设置背景图片位置background-position：0 0；表示原点(0 ，0)

background-position:0 0;

background-position:left top;

/*

x/y值可以取值为像素，也可以取值单词，分别是靠左border，靠右border，中间位置

x轴取值:left/right/center

y轴取值：top/bottom/center

*/

精灵图：为了减少网页向服务器发送请求的次数，经常会将许多的小icon放到一张图片上，然后通过定位的方式来使用，也叫作雪碧图 小盒子里面放大图片

设置背景图大小 background-size：width height ；

属性值：px px

​ 50% 50%

一般认为是padding+content的百分比

​ cover 等比缩放，一直到宽完全覆盖盒子，背景图片有些区域不能显示

​ content 把背景扩展到最大尺寸，使宽或高铺满整个盒子，图片完整显示，有些区域覆盖不到

背景图片滚动 background-attachment

属性值：scroll 跟着内容滚动 、fixed 固定不动

background-origin 设置背景图的左上角与盒子的某个左上角对齐 默认padding-box

取值：border-box、padding-box 、content-box

复合属性

background:url("") repeart-x center center;

背景图与插入图(前景图)

背景图不占位置，前景图占位置

背景图鼠标右击可以图片另存为

前景图有利于SEO

字体图标(类似于文字)

纯色图片上使用

阿里图标矢量库 彩色图标要使用SVG

一般使用i标签

bootstrap 矢量图标库