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