html+css之盒模型

一 content 内容

二 padding 内边距

三 margin 外边距

3.1 margin 上下传递

• margin-top 传递

如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素，这样就造成了 margin 塌陷现象

• margin-bottom 传递

如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是 auto，那么这个块级元素的 margin-bottom 值会传递给父元素

• 如何防止出现传递问题？

1. 给父元素设置 padding-top/padding-bottom
   
2. 给父元素设置 border
3. 触发 BFC：设置 overflow 为 auto/hidden
   BFC: block format context
   

• 建议
  • margin 一般是用来设置兄弟元素之间的间距
  • padding 一般是用来设置父子元素之间的间距

3.2 margin 上下折叠

• 垂直方向上相邻的 2 个 margin (margin-top、margin-bottom) 有可能会合并为 1 个 margin，这种现象叫做 collapse (折叠)
• 水平方向上的 margin 永远不会折叠
• 折叠后最终值的计算规则
  • 两个值进行比较，取较大的值
• 如何防止 margin 折叠呢?
  • 只设置其中一个元素的 margin

四 border 边框

4.1相关属性

• 边框宽度
  • border-top-width、border-right-width、border-bottom-width、border-left-width
  • border-width 是上面 4 个属性的简写属性
• 边框样式
  • border-top-style、border-right-style、border-bottom-style、border-left-style
  • border-style 是上面 4 个属性的简写属性
• 边框颜色
  • border-top-color、border-right-color、border-bottom-color、border-left-color
  • border-color 是上面 4 个属性的简写属性
• 简写 border 它有三个值
  • border: 1px solid #f00
  • 三个值不区分顺序

4.2 边框妙用

4.3 圆角

border-ridius

注意：border-radius 中的百分比是参考当前元素的 width+padding+border 的宽度

五 行内非替换元素的注意点

• 以下属性对 行内非替换元素 不起作用
  • width、height、margin-top、margin-bottom
• 以下属性对 行内非替换元素 的效果比较特殊
  • padding-top、padding-bottom、上下方向的 border
    
    span 的高度会被撑开，但撑开的区域不会占据空间，border 的上下方向也是一样的效果

解决方案

• 给当前的行内元素设置 display: inline-block

六 css 属性

6.1 outline

• outline 表示元素的轮廓
  • 不占用空间
  • 默认显示在 border 的外面
• outline 相关属性
  • outline-width
  • outline-style：取值跟 border 一样
  • outline-color
• outline 缩写
  • outline: 1px solid color
  • 值没固定顺序

应用实例

• 去除 a 元素、input 元素的 focus 轮廓效果

6.2 box-shadow 阴影

• box-shadow 属性可以设置一个或多个阴影
• 每个阴影用 <shadow> 表示
• 多个阴影之间用逗号隔开，从前到后叠加

格式
<shadow> = inset? && <length>{2, 4} && <color>?

• 第一个 <length>: 水平方向的偏移，正数往右偏移
• 第二个 <length>: 垂直方向的偏移，正数往下偏移
• 第三个 <length>：模糊半径(blur radius)
• 第三个 <length>：延申距离
• <color>：阴影的颜色，如果没有设置，就跟随 color 属性的颜色
• inset：外框阴影变成内框阴影
  
  练习 鼠标移入，改变背景以及其阴影
  

<div class="box">
    <div class="header">更多配置</div>
</div>

.box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    margin: 100px auto;
    box-shadow: 0 3px 3px 4px rgba(212, 206, 206, .5);
}
.header {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #eee;
}

.box:hover {
    box-shadow: 0 3px 3px 4px rgba(95, 158, 241, 0.5);
    cursor: pointer;
}

.box:hover .header {
    color: #fff;
    background-color: #00B0E2;
}

6.3 background 背景

background-image

用于设置元素的背景图片
会盖在(不是覆盖) background-color 的上面

• 设置多张图片
  • background-image: url(‘1.jpg’), url(‘2.jpg’), url(‘3.jpg’)
  • 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
  • 注意：如果设置了背景图片后，元素没有具体的高度，背景图片是不会显示出来的

background-repeat

• 设置背景平铺效果
  • repeat(默认是水平、垂直平铺)
  • repeat-x 水平平铺
  • repeat-y 垂直平铺
  • not-repeat 不平铺

background-size

用于设置背景图片的大小
auto：以背景图本身的大小显示
cover：缩放背景图，以完全覆盖铺满元素
contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
百分比：<percentage>{1,2} 第一个值设置占据父元素宽度的百分比，第二个值占据父元素高度的百分比
length：具体的大小，比如 200px

background-position

用于设置背景图在水平、垂直方向上的具体位置
水平方向可以设置：left、center、right
垂直方向可以设置：top、center、bottom
如果只设置一个方向，另一个方向默认为 center

background-attachment

scroll：背景图片跟随元素一起滚动(默认值)
local：背景图片跟随元素以及元素内容一起滚动
fixed：背景图片相对于浏览器窗口固定

background

是一系列属性的缩写
格式：image position/size repeat attchment color
background-size 可以省略，如果不省略，/background-size 必须跟在 background-position 的后面
其他属性也都可以省略，而且顺序任意

6.4 cursor

cursor 可以设置鼠标指针(光标)在元素上面时的显示样式

cursor 常见值

• auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
• default：由操作系统决定，一般都是一个小箭头
• pointer：一只小手
• text：一条竖线
• none：没有任何指针显示在元素上面

七 水平居中-不同类型的方式

• 父元素为块级元素
  • 子元素为普通文本----text-align: center
  • 子元素为行内元素----text-align: center
  • 子元素为行内替换元素----text-align: center
  • 子元素为行内块级元素(inline-block)----text-align: center
  • 子元素为块级元素(block)----margin: 0 auto

八 css Sprite

8.1 什么是 css Sprite

是一种 css 图像合成技术，将各种小图片合并到一张图片上，然后利用 css 背景定位来显示对应的图片部分
有人翻译为：CSS 雪碧、CSS 精灵

8.2 使用 css Sprite 好处

• 减少网页的 http 请求数量，加快网页响应速度，减轻服务器压力
• 减少图片总大小
• 解决了图片命名的困扰，只需要针对一张集合的图片命名

练习

• 京东的底部服务栏
  

<div class="service wrap">
	<ul>
		<li>
			<h5>多</h5>
			<p>品类齐全，轻松购物</p>
		</li>
		<li>
			<h5>快</h5>
			<p>多仓直发，极速配送</p>
		</li>
		<li>
			<h5>好</h5>
			<p>正品行货，精致服务</p>
		</li>
		<li>
			<h5>省</h5>
			<p>天天低价，畅选无忧</p>
		</li>
	</ul>
</div>

<style>
    /* common.css */
    .wrap {
      width: 1200px;
      margin: 0 auto;
    }
    /* reset.css */
    ul, h5, p {
      margin: 0;
      padding: 0;
    }
    /* 具体样式 */
    li, h5, p {
      display: inline-block;
    }
    .service {
      background-color: #f5f5f5;
    }
    .service ul li {
      height: 42px;
      line-height: 42px;

      margin-left: 30px;
      margin-right: 55px;

      font-size: 18px;
      font-weight: 700;
      color: #444;
    }
    .service ul li h5 {
      width: 36px;
      height: 42px;
      margin-right: 5px;

      text-indent: -9999px;

      background-image: url('../img/jd_sprite_01.png');
    }
    .service ul li:nth-child(1) h5 {
      background-position: 0 -192px;
    }
    .service ul li:nth-child(2) h5 {
      background-position: -41px -192px;
    }
    .service ul li:nth-child(3) h5 {
      background-position: -82px -192px;
    }
    .service ul li:nth-child(4) h5 {
      background-position: -123px -192px;
    }
  </style>

jd_sprite_01.png

九 background-image 和 img 的选择

• 利用 background-image 和 img 都能实现显示图片的需求，在开发中该如何选择？
  
  总结
• img，作为网页内容的重要组成部分，比如广告图片、LOGO 图片、文章配图、产品图片
• background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息