CSS(二)

CSS代码

• 文本对齐
  text-align:left(默认)/center(居中)/right(右对齐);
  
  
• 文本行高（行间距）
  line-height:xxpx
  
  
• 首行缩进
  text-indent:xx;

单位
        px(像素)，em(1 em = 1 font-size)

• 文本装饰（上中下划线）
  text-decoration:line-through(中划线)/underline(下划线)/none;
  
  
• 光标定位值
  当光标移到元素上时，光标形状发生改变。
  cursor;:
  
• 伪类选择器

html部分
<a href="www.baidu.com">www.baidu.com</a>


css部分
a:hover{
  background-color: red;
}

当鼠标移上去时元素会发生变化。

元素类型

• 行级元素

        内容决定元素所占位置
        不可以通过CSS改变宽高
span strong em a del

• 块级元素
          独占一行
          可以通过CSS改变宽高
  div p ul li ol form address
• 行块级元素
          内容决定大小
          改以改变宽高
  img

凡是带有inline的元素都有文字特性（会被空格分割）例如：img。

• 行级元素只能嵌套行级元素
• 块级元素可以嵌套任何元素
  
  
  
  

盒子模型

盒子的组成部分：

        1.盒子壁(border)

        2.内边距(padding)

        3.盒子内容(content = width + height)

盒子模型=margin(外边距) + border + padding + content

  margin/padding: xxpx xxpx xxpx xxpx;
                    上   右    下   左
  margin/padding: xxpx xxpx xxpx;
                  上   左右  下
  margin/padding: xxpx xxpx;
                  上下  左右

盒模型计算
        可视区（真正）宽高 = width/height + border + padding

定位

定位后的元素会脱离原来的层
        用z-index: 1;来改变层数。

• 相对定位（relative）
          保留原来位置进行定位
  position:relative;
  相对于自己原来的位置进行定位。
• 绝对定位（absolute）
          脱离原来位置进行定位
  position:absolute;
  相对于最近的有定位的父级进行定位，如果没有父级，相对于文档进行定位。
• 广告定位（fixed）
  position:fixed;
  不会随页面滚动条滚动而变换位置。
  
  
  
  
  
  
  
  
  定位中的两个经典BUG
• margin塌陷
          父子嵌套的元素，垂直方向的margin，父子结合在了一起，共同取最大值。

bfc（块级格式化上下文）
如何触发一个盒子的bfc：
1.设置position:absolute;
2.设置display:inline-block
3.float:left/right;
4.overflow:hidden;

        解决办法：

> 例子

html部分
<div class="circle">
    <div class="cir1"></div>
    <div class="cir2"></div>
    <div class="cir3"></div>
    <div class="cir4"></div>
    <di class="cir5"v></div>
    
</div>


css部分
*{
  margin: 0;
  padding: 0;
}
.circle{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -93px;
  margin-left: -190px;
}
.cir1,
.cir2,
.cir3,
.cir4,
.cir5{
  position: absolute;
  width: 100px;
  height: 100px;
  border: 10px solid black;
  border-radius: 50%;
}
.cir1{
  border-color: blue;
  left: 0;
  top: 0;
}
.cir2{
  border-color: red;
  left: 130px;
  top: 0;
  z-index: 1;     /*改变红环层数*/
}
.cir3{
  border-color: yellow;
  left: 260px;
  top: 0;
}
.cir4{
  border-color: green;
  left: 65px;
  top: 70px;
}
.cir5{
  border-color: pink;
  left: 195px;
  top: 70px;
}

两栏布局

• 先写右侧盒子，再写左侧盒子

html部分
<div class="right"></div>
<div class="left"></div>



css部分
*{
  margin: 0;
  padding: 0;
}
.right{
  position: absolute;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: pink;
}
.left{
  margin-right: 100px;
  height: 100px;
  background-color: blue;
}

浮动模型（float）