CSS模块（二）

• 层溢出

  当单个块内包含的内容超出了块的大小 内容会显示的凌乱且不全面

  

我们使用overflow来进行变化

同时 还有其他几种 处理方式：
visible 默认值 显示
hidden 隐藏超出的内容
auto 自动判断是否加滚动条
scroll 加上滚动条

可以根据实际需求进行变换

层的变化

这一块我用做的一个不全面的网页进行介绍

• 层的浮动

  正常情况下 设置独立的块在网页上会是一整列的排放（div举例）

  

  

  要想进行成排放置 应该添加float属性

  
  

  这样就可以进行一些简单的网页布局 float 可以使单独的块在一行一字排开

  • 二级菜单

    对于一些块我们在悬浮的状态下可以出现子菜单 进行选择 鼠标移开之后 子菜单就会隐藏

    我们通过hover属性实现隐藏

    
    
    

背景图片的部分属性

通过

1. background-repeat: no-repeat; 控制图片在页面不进行重复

2. background-position:bottom center; 控制图片在页面的位置

   
   

边框的部分属性

1. border-style: solid; 边框实线

2. border-color: aqua; 颜色设置

3. border-width: 10px; 边框大小

4. border-top-style:dotted; 指定顶部边框 虚线

5. border-bottom-style:double; 指定底部边框 双线

6. border-right-color: red; 指定右侧边框颜色设置

7. border-left-width: 10px; 指定左侧边框大小

   
   

字体的部分属性

1. color: rgba(0,0,0,0.5); 颜色

2. font-size: 100px;字体大小

3. font-family:宋体;字体样式

4. font-style: italic;

5. text-shadow: 0px 0px 10px aquamarine; 阴影

6. background-color: yellow; 背景颜色

7. overflow: hidden; 超出部分隐藏不显示

   

内间距与上下居中

• 通过padding属性实现内间距的调整

• 通过设置行高来控制上下居中

  
  

鼠标悬浮控制层的浮动

1. 通过transition来控制层的出现

2. 通过overflow来进行层的隐藏

   
   
   

3. 通过设置div的hover状态来实现鼠标悬浮图片的放大缩小

   

图片的浮动

通过transform: rotate(-15deg);控制旋转幅度

也可以设置为360度旋转 transform: rotate(360deg);

部分块的固定显示

通过position: fixed;进行位置的固定

动画演示部分

• 通过translate控制块的左右移动变化

• 通过rotate控制块的旋转变化

  
  
  

• 通过scale控制块的大小比例

  
  
  

• 通过skew控制块的扭曲变化

  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rn7G3IDx-1594022994485)(https://pic.downk.cc/item/5f02bd8314195aa594de4a55.png)]
  

  盒子模型的布局

  1. 把外层设为盒子
  2. 盒子里面的自层排列方向 row | row-reverse | column | column-reverse
  3. 控制子层的对齐方式

  

  

  图片黑白化

  通过滤镜filter的使用来达到黑白化效果

  
  

  css待续…