(5) CSS

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;}底线对齐 这是推荐解决方式