盒子模型--Day06

盒子模型

边框属性

边框方向

top；right；bottom；left；

边框按顺时针顺序

1. 一个指四边

2. 两个指上下/左右

3. 三个指上/左右/下

边框宽度

用PX

边框样式

1. none

2. solid

3. dashed

4. dotted

5. double

综合设置边框

border: 四边宽度 样式 颜色

内边距属性

外边距属性

背景属性

设置背景图像平铺

backgroud-repeat

属性值：

1. repeat=沿水平和竖直方向平铺

2. no-repeat=不平铺

3. repeat-x/y=只沿水平或竖直方向平铺

设置背景图像的位置

1. 使用不同单位(px) 直接设置图像左上角在元素中坐标

   x方向正值右移 负值左移 y方向正值下移 负值上移

2. 预定义的关键词：对齐方式

   若只有一值另一个默认为center

3. 使用百分比：按背景图像和元素的指定对齐

设置背景图像固定

background-attachment

属性值：scroll=图像随页面元素一起滚动

fixed=图像固定在屏幕上，不随页面元素滚动

综合设置元素的背景

background: 背景色 url("图像") 平铺 定位 固定；

元素的类型与转换

元素类型

块元素

div

1. 特点：每一块元素通常都会独自占一行或多整行，设置宽高、对齐等属性，常用于网页布局和网页结构的搭建

2. 常见的块元素h1~h6 、p、div、ul、li、ol、form；

行内元素

span

1. 特点：一个行内元素通常和它前后其他行内元素显示在同一行不占独立的区域，仅仅靠自身字体大小和图像尺寸来支撑结构，一般不设置宽高、对齐等属性，常用于控制页面文本的样式。

2. 常见的行内元素： strong、b、em、i、del、s、ins、u、span

元素的转换

display:inline、block、inline-block、none

块元素垂直外边距的合并

相邻或嵌套块元素垂直外边距的合并均取两者中较大者