css3基础整合

4.美化网页元素

• sapan标签：重点要突出的字
• 字体样式：
• font-size：字体大小
• font-family：字体样式
• font-weight：blod：字体粗细
• 文本样式：
• ​ 颜色
• text-aline：排版 对齐方式
• text-indent：用em表示 首行缩进
• line-height行高
• text-decoration：underline 下划线/none 取消a标签中的下划线
• vertical-align：center ，文本图片水平对齐

5.文本阴影超链接

• hover：鼠标悬浮的状态
• active：点击后的状态
• text-shadow：（阴影颜色，水平偏移，垂直偏移，阴影半径）阴影

6.列表

• list-style：
• none： 去掉圆点
• circle 空心圆
• decimol 数字

7.背景图像应用及渐变

• background-image:url(images/tx.jpg) 默认全部平铺
• background-repeat：repeat-x：水平
• background-repeat：repeat-y：垂直
• 渐变：
  • background-img:linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);

8.盒子模型

• margin外边距

• padding：内边距

• border边框

• 边框

• 边框的

• border：粗细，样式，颜色

• #box{
         
      width:300px
          border:1px solid red;
  }
  

• 内外边距

• padding

• margin

圆角边框及阴影

• border-radios：度数

•     div{
         
              width: 100px;
              height: 100px;
              border: 10px solid goldenrod;
              border-radius: 100px;
  
          }
  
  

• 盒子阴影：

• div{
         
      width: 100px;
      height: 100px;
      border: 10px solid goldenrod;
      border-radius: 100px;
      box-shadow: 10px 10px 100px yellow;
  
  }
  

• morgin：0 auto 居中

• 要求：块元素 块元素有固定的宽度

10 父级边框塌陷问题

• clear：right，右侧不允许有浮动

• clear：left，左侧不允许有浮动

• clear：both：两侧不允许有浮动

• 解决方案

• 增加父级元素高度

• 增加一个空的div标签

• 在父级元素中增加一个overflow：hidden

• 夫类添加一个伪类：after

• #father:after{
         
      content:'',
      display:block;
      clear:both;
      
  }
  

• 小结

• 1.浮动元素后面增加空div

• 简单，代码中尽量避免空div

• 2.设置父元素的高度

• 简单，父元素假设有了固定高度就会被限制

• overflow

• 见到那，下拉的一些场景避免使用

• 在父类添加伪类after

• 写法稍微复杂一点，但是没有副作用，推介使用

对比

• display
• 方向不可移动
• float
• 浮动起来的话回脱离标准文档流，所以要解决父级边框塌陷问题。

11.相对定位的使用及练习

• 定位：

• 11.1相对定位

• 相对定位：相对于自己原来的位置进行偏移

• position：relative

• 上：top

• 下：bootm

• 
  
  
      
      
  
  
  
  
  
  "box">
      "a1">连接一
      "a2">连接二
      "a3">连接三
      "a4">连接四
      "a5">连接五
  
  
  
  
  

• 任然在文档流中，原来的位置会被保留

• 绝对定位

• 定位：基于xxx定位，上下左右

• 假设父级元素存在定位，我们通常会相对于父级元素进行偏移

• 在父级元素范围内移动

• 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，塔不在标准文档流中，原来的位置不会被保留

• 固定定位

• position： fixed

• z-index及透明度