5.盒子模型、层模型

border

border: 1px solid black;
border-left: 10px solid red;

部分css属性补充

 text-align: center;
  /* 对齐方式 */
  height: 200px;
  line-height: 20px;
  /* 文本行高     单行文本所占高度*/
  text-indent: 2em;
  /* 首行缩进 */
  text-decoration: line-through;
  /*                 中划线
     underline          下划线
     overline           上划线 */
  cursor: pointer;
  /* 光标     */

单行文本垂直居中
line-height设为容器高度
*/
/*单位
1em = 1 * font-size     一个文字高度
互联网上汉字基本都是宽高相同
px      像素    相对单位

选择器补充

/* 伪类选择器
hover 鼠标移入时变化*/
a:hover {
background-color: red;
}

块级元素、行级元素、行级块元素

1. 行级元素、内联 inline
   内容决定元素所占位置
   不可以通过css改变宽高

   span strong em a del

2. 块级元素 block

   独占一行
   可以通过css改变宽高

   div p ul li ol form address

3. 行级块元素 inline-block
   feature ： 内容决定大小
   可以改宽高

   img

凡是带有inline的元素，都有文字特性
空格是文字分割符

经验

1. 一般情况先写html再写css装饰

   先定义功能，再选配
   先定义css，
   方便其他人使用

2. 初始化标签
   有些标签初始样式不想要，自己定义原标签
   通配符初始化不影响后面更改

模型

三大模型：盒模型、层模型、浮动模型

盒子模型

盒子三大部分
盒子的组成部分：
盒子壁 border
内边距 padding
盒子内容 width+height
margin + border + padding + (content = width + height)

margin
padding
border-width
上右下左
上 左右 下
上下 左右

盒模型计算问题
不算margin 看不到

如果两个盒子嵌套，里面盒子会作为外面盒子内容区嵌套
要使里面盒子居中，将里盒子与外盒子内容区重合

与最上面有空白原因
body有默认的margin：8px

定位

position
绝对定位
absolute
1.脱离原来位置进行定位
最近的有定位的父级进行定位，
如果没有，那么相对于文档进行定位
相对定位

releative
2.保留原来位置进行定位
相对自己原来的位置进行定位

fixed
一般用releative作为参照物
absolute定位

居中
position: absolute;
left: 50%;
top: 50%;
margin-left: ; 50%宽
margin-top: ; 50%高