博客园 首页 新随笔 联系 订阅 管理

1. 显示框类型

  display:

     取值:block、inline、inline-block、none

  注:display:none 与 visibility:hidden 的区别

    display:none 不占隐藏空间

    visibility:hidden 占隐藏空间

 

2. 溢出隐藏

  overflow:

    取值:

      visible(可视)、

      hidden(隐藏)、

      scroll(滚动,当内容过多时,可以滚动显示)、

      auto(自动)、

      还可以针对x轴、y轴分别设置,overflow-x以及overflow-y

 

3. 透明度与手势

  opacity:0(透明、占空间) ~ 1(不透明)

      注:占空间,所有的子内容也会透明

  rgba:只针对背景色,不针对内容

      注:可以让指定的样式透明,而不影响其他的样式

  cursor:手势

     default:默认

     实现自定义手势:

      准备图片: .cur、.ico

          cursor: url(./image/cursor.ico), auto;
 
4. 最大、最小宽高
  
    min-width、min-height
    max-width、max-height
   
    %单位: 换算 -> 以父容器的大小进行换算
    一个容器如何适应屏幕的高:容器加height:100%,body:100%,html:100%
 
5. CSS 的默认样式与重置 CSS 样式
  
CSS 默认样式
  有些标签有默认样式,有些标签没有默认样式

  没有默认样式:
    div、span、....

  有默认样式:
    body -> margin:8px
    h1 -> margin: 上下 21.440
    font-weight:bold
    p -> margin: 上下 16px
    ul -> margin: 上下 16px padding: 左 40px
    默认点:list-style-type:disc
    a -> text-decoration:underline
 
重置 CSS 的样式
    
  简单的CSS reset:
  *{margin:0;padding:0;}
  优点:不用考虑哪些标签有默认的margin和padding
  缺点:稍微的影响性能
 
  body,p,h1,ul{margin:0;padding:0;}

  ul{list-style:none;}

  a{text-decoration:none;color:#666;}
 
  img{display:block;}
  问题的现象:图片跟容器底部有一些空隙
  产生的原因:内联元素的对齐方式是以文字的基线对齐而不是以底线对齐
  vertical-align: baseline;基线对齐方式,默认值
  img{vertical-align:bottom;}底线对齐 这是推荐解决方式
posted on 2021-12-31 13:42  Computer_Science  阅读(26)  评论(0编辑  收藏  举报