W3C盒子模型、IE盒子模型、浮动布局

CSSday03 盒子

盒子模型

W3C盒子模型

• 标准盒子模型，width和height设定的是内容区的宽高

  • 内容区的宽高：
    宽：width
    高：height

  • 盒子的宽高：
    宽：内容区的宽+左右padding+左右border
    宽：width+paddingLeft+paddingRight+borderRight+borderLeft
    高：内容区的高+上下padding+上下border
    高：height+paddingTop+paddingBottom+borderBottom+borderTop

  • 所占屏幕宽高：
    宽：width+paddingLeft+paddingRight+borderRight+borderLeft+marginLeft+marginRight
    高：height+paddingTop+paddingBottom+borderTop+borderBottom +marginTop+marginBottom

IE盒子模型

• box-sizing:border-box;
  *设定的宽高是盒子的宽高

  • 内容区的宽高：
    宽：width-左右border-左右padding
    高：height-上下border-上下padding

  • 盒子的宽高：
    宽：width
    高：height

  • 所占屏幕的宽高
    宽：width+左右margin
    高：height+上下margin

padding标签

/* 一个值：上下左右 */

padding: 10px;

/* 两个值： 上下 左右 */

padding: 10px 20px;

/* 三个值： 上 左右 下 */

padding: 10px 20px 30px;

/* 四个值：上 右 下 左 */

padding: 10px 20px 30px 40px;

背景样式

背景颜色

• background-color: pink;

• /* 背景,效率低 /
  / background: red; */

背景图片

• background-image: url("…/images/泳池.jpeg");

背景图片的重复设置

•     background-repeat: no-repeat;  
      background-repeat: repeat-x;  
      background-repeat: repeat-y;  
      background-repeat: repeat;
  

背景图片的大小

• /* 图片显示全，占满容器，但是比例会失调 */
  background-size: 100% 100%;

• /* 可能导致图片显示不全，但是图片比例不变 */
  background-size: cover;

• /* 可能导致容器有一部分没有背景，但是图片比例不变 */
  background-size: contain;

设定背景图片的起始覆盖点background-origin

• 默认，背景图片从内边距的外边缘开始绘制
  background-origin: padding-box;

• 背景图片从边框的外边缘开始绘制background-origin: border-box;

• 背景图片绘制在内容区background-origin: content-box;

设定背景的覆盖/裁切范围 background-clip

• 默认，背景位于边框以内background-clip: border-box;

• 背景位于内边距以内background-clip: padding-box;

• 背景位于内容区background-clip: content-box;

设置为背景图像的固定点background-attachment

• 设置背景图片的固定点

  • /* 背景图片与元素绑定 背景图片随着页面的滚动而滚动 */
    background-attachment: scroll;

  • • 背景图片与元素内容绑定 背景图片随着页面的滚动而滚动*/
      background-attachment: local;
  • • 背景图片与视口区绑定 背景图片不随着页面的滚动而滚动*/
      background-attachment: fixed;

• 设置在div上的背景图片的固定点

  • /* 背景图片不动 */
    background-attachment: scroll;

  • 背景图片绑定在元素内容上，背景图片动
    /* background-attachment: local; */

  • 背景绑定在视口区
    /* background-attachment: fixed; */

背景图片的位置

• /* 调整背景图片位置 /
  background-position: top center;
  background-position: center bottom;
  / 图片精灵技术 css script /
  / background-position:-116px -126px; /
  / background-position: -290px -126px; */
  background-position: 50px 50px;

盒子边框

border-width 为元素指定边框的宽度

border-style 为元素指定边框样式
border-color 为元素指定边框颜色
border-radius 为元素指定圆角边框的半径

表格样式

border-collapse 指定表格的边框是合并还是分开 caption-side 指定caption坐落在表格的哪个位置上

浮动布局

left 向左浮动元素

right 向右浮动元素

清除浮动 clear:both;

浮动：

  浮动元素脱离文档流，原先位置不保留，  
  飘在文档流上方。  
  float:left/right;  
  清除浮动：  
      兄弟元素上使用clear:both;  
      或者  
      父级元素上使用overflow:hidden;  
      清除子元素浮动对父元素产生的影响。  
  如果块级元素没有设置宽度，浮动了该元素，那么该元素的宽度  
  不再是100%，而是内容区的宽度。