CSS2-盒模型、背景图片

yuanzhanghu 发布于2019-08-29 15:33 / 903人阅读

摘要：合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。雪碧图的使用背景图与元素的原点重合。白色框是元素，绿色框是背景图片。

盒模型属性

margin外边距（top,right,bottom,left）
border边框(top,right,bottom,left)
padding内边距(top,right,bottom,left)
content内容区(width,height)
margin,border,padding值的书写方法：
margin-top/-right/-bottom/-left
margin:10px 11px 12px 13px; 上右下左的顺序
margin:10px 12px;简写即上下10px,左右12px;
margin:10px; 即4个方向都是10px

关于margin的合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

IE 盒模型和W3C盒模型的区别

W3C盒模型（box-sizing:content-box）,宽度width=内容区content的宽度

IE盒模型（box-sizing:border-box）,宽度width=border+padding+content内容宽度

没有DOCTYPE的怪异模式，IE浏览器默认使用“IE盒模型”，IE8及以下也使用IE盒模型。

CSS Sprite(雪碧图|精灵图)

CSS Sprite图是把多个icon图标图片或页面会重复用到的小图片合并放在一张图里面，通过background-position这个属性调整背景图片的位置来显示合并大图中的某个局部图像区域。
作用是减少网络请求，让页面加载更快，图片只需请求一次，以后使用都调用缓存内的图片。与此类似减少请求另一种方法是把图片（只适用于很小的图标例如icon）转换成base64的编码，url直接引用这个编码就能看见图片。base64适用在图标加载响应要求较高的场景下使用。
雪碧图的使用：背景图与元素的原点重合。好比把床单的左上角与桌子的左上角对齐，多余的部分不要。（0，0）坐标原点位置，即外层块元素的左上角，background-position位置设定是指图片与坐标原点的偏移量。白色框是元素，绿色框是背景图片。X坐标值为正则图片左上角向右平移，为负则图片左上角向左平移，Y坐标值为正则图片左上角向下平移，为负则图片左上角向上平移。

背景小技巧：在开发过程中用图片做背景的同时，往往还要用图片的主色调来作用元素的背景色，目的是背景图片丢失的时候防止视觉效果变化太大。

img标签和CSS背景使用图片的区别

页面上固定不变的东西如图标icon、logo等用CSS背景图片
对于经常会改变的内容（图片是和内容相关的），用户img标签图片，比如VIP会员头像等。

background: url(abc.png) 0 0 no-repeat;

background-image:url(http://xxx.jpg) 这里是url引用，而不是src引入要引号
background-position:0px 0px; 图片偏移位置水平垂直均为0
background-repeat:repeat-x/repeat-y/no-repeat(水平重复/垂直重复/不重复)

background-size的作用

background-size指定背景图片实际显示区域大小。
属性值：像素值/百分比/cover/contain
cover图片会覆盖整个背景区域,不会留下边白,即小于背景区域的图片会放大充满整个背景区域。contain图片自适应最好的显示效果并被包裹在背景区域里，有可能会留下空白。

div元素水平居中，img图片水平居中

块级元素水平居中：margin：0 auto; 不考虑上下margin值时而直接使用:
margin-left:auto;
margin-right:auto;
图片水平居中：对img标签先包裹一个块级父容器，再对块级父容器使用text-align:center实现居中。text-align:center;设置元素内的文本水平居中对齐。只对块级元素里面的行内元素生效（a,img,input,span）,注意这里居中是参照该行内元素的父容器元素生效。text-align有5个值：left/right/center/justify/inherit，左对齐/右对齐/居中对齐/两端对齐/继承父元素align值。justify两端对齐的时候，每行中的字间距可能不一致。

设置元素透明

使用opacity属性来设置元素的透明度，值从 0.0 （完全透明）到 1.0（完全不透明）。兼容性

opacity和 rgba设置透明的区别

opacity:0.5;（0～1）使元素内所有内容透明度为0就像消失，但是所占据的空间还在，不会改变页面布局,opacity属性可继承。
background-color: rgba(0,0,0,0.5); 这种加alpha通道值设透明度只能对元素的颜色或者背景色设置透明度，rgba设置的透明属性无法继承。

title和 alt属性的区别

title是补充的额外信息即鼠标悬停标签上的额外说明信息。alt则是替代信息而不是提供额外说明，alt可以用来替换说明加载失败时的img或a链接。

云服务器 GPU云服务器盒模型盒模型html吗简述html盒模型 css2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113394.html

CSS规范 > 9 视觉格式化模型 Visual Formatting Model

摘要：盒的类型会影响其在视觉格式化模型中的表现。浮动元素绝对定位元素根元素都被称为脱离文档流其他元素被称为文档流内。视觉格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻译，译者在原文基础上...

魏宪会 2019-08-28 18:15 评论0 收藏0
CSS2中盒模型与布局的一些概念关系

摘要：的一些名词和概念用来帮你更明确地去描述世界的事物。具体信息可以参考盒模型的解释，这里暂且不作展开。的位置和大小时根据一个称为的边界进行计算的。其它情况，依据设定的值进行处理指定值最终表现值与指定值相同 CSS的一些名词和概念用来帮你更明确地去描述HTML/CSS世界的事物。 box 在CSS中，一个元素就可以看作一个box。具体信息可以参考盒模型的解释，这里暂且不作展开。 conta...

happyhuangjinjin 2019-08-30 15:55 评论0 收藏0
读后总结--精通css高级web标准解决方案（第二版）

摘要：无论是否移动，元素仍然占据原来的空间。绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。为啥读这本书现在前端圈子过于浮躁，掌握基础无疑比掌握一个js框架重要 css怎么都能写出来，但是要写的好写得快还得多读书 css魔法推荐的，读完这个读读css揭秘当然，根本原因还是觉得自己掌握不好开始总结吧~ 一. 基础知识经过上世纪没有 css的痛苦时的混沌时期，人们开始了进...

leone 2019-08-30 13:05 评论0 收藏0
CSS规范里的一些事(一)

摘要：规范里的一些事前言以下内容总结于规范，一盒子模型以上图形说的是盒子模型中的边界。，，和属性失效盒的位置是根据常规流计算的被称为常规流中的位置，然后盒相对于其常规位置偏移。 CSS规范里的一些事前言：以下内容总结于CSS2.1规范，http://www.ayqy.net/doc/css2-1/cover.html 一、盒子模型 showImg(https://segmentfault...

neu 2019-08-30 13:54 评论0 收藏0
CSS中各种布局的背后(*FC)

摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 评论0 收藏0