CSS盒模型及应用

盒子模型(section/div)

//注意事项 important

如果一个盒子没有给定宽度/高度或继承父类的宽度/高度，盒子大小不受影响

 

盒子模型布局稳定性

 

新盒子（盒子大小就是宽度,padding width 包含在width中）

box-sizing:  border-box

 

盒子计算尺寸(重点)

box-sizing: content-box

外盒尺寸计算：  元素空间尺寸   width+border+padding+margin,height+border+padding+margin

内盒尺寸计算:     实际尺寸  width+padding+border,height+border+padding

 

盒子阴影

格式：
box-shadow:水平位置，垂直位置，模糊距离（可选），阴影尺寸（可选），阴影颜色（可选），内/外阴影（可选  默认为外阴影outset//不写，默认就行       inset）

 

 

padding 内边距(内容距离边框的距离)

paddding-top

padding-bottom

padding-right

padding-left

如果只写一个值，就是都属于一个值

两个值，1值为 上下，2值为左右

三个值，1为上 2为左右 3为下

四个值 为 上右下左( 顺时针顺序)

 

fireworks测量工具

 

margin 外边距

margin-top

margin-bottom

margin-left

margin-right

 

外边距可实现盒子居中对齐：

1.必须是块内元素

2.盒子必须指定宽度

3.左右的外边距都为auto,可使快元素水平居中

 

 部分问题：

行内元素上下内外边距问题

尽量不要给行内元素指定上下的内外边距

 

消除内外边距

设定系统自带标签带有样式，设置margin ,padding 为0

 

外边距合并问题

相邻块元素垂直外边距合并（以最大的外边距为准，不会叠加）

嵌套块元素（父子集）

如父级元素没有设置边框或者内边距，子元素和父元素外边距合并，子元素不动

解决方案：为父元素定义1像素的上边框或内边距 2.为父元素添加 overflow：hidden

 

border 边框

border-top

border-bottom

border-left

border-right

语法：

border: border-width| border-style| border-color

综合设置语法:

border-边框[top,bottom,right,left]:宽度 样式 颜色

属性：

none 没有边框

solid 边框为外线 **

deshed 边框为虚线

 dotted  边框为点线

duoble 边框为双实线

 

合并细线表格

border-collapse 合并相邻边框

 

圆角边框

border-radius:左上角 右上角 右下角 左下角

宽度和高度同值，取一半值为radius为圆形 或%50

两个值为对角线关系

三个值按顺序声明
 

 

 

 

 

背景图片一般做一些小图标

产品展示用插入图片