1、padding和margin
例子 1
padding:10px 5px 15px 20px;(上,右,下,左)
- 上内边距是 10px
- 右内边距是 5px
- 下内边距是 15px
- 左内边距是 20px
例子 2
padding:10px 5px 15px;
- 上内边距是 10px
- 右内边距和左内边距是 5px
- 下内边距是 15px
例子 3
padding:10px 5px;
- 上内边距和下内边距是 10px
- 右内边距和左内边距是 5px
2、值得问题
值 | 描述 |
---|---|
auto | 浏览器计算内边距。 |
length | 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的内边距。 |
inherit | 规定应该从父元素继承内边距。【任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。】 |
3、background-attachment:fixed
(图像短于内容时)背景图像不会随页面的其余部分滚动。
不加此属性,或者background-attachment:scroll,背景随文字固定。
4、margin负值在页面布局中应用
参考http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html
5、为边框或按钮制作成圆角
向 div 元素添加圆角边框:
div { border:2px solid; border-radius:25px; }
6、list-style-type
接触html,css都快一年了,也曾写过几个小的网站,但都没有注意到这个属性。
这个属性是列表里的,在w3c里看到直接在ul或者ol标签内写type,试了试无效果,后来又百度了下,需要在css里写list-style-type这个属性,才会出来效果,加上hover用,来回来变换会很有意思,颜色可根据设置的字体的颜色同步变化。
让图标缩进:list-style:inside; 或者list-style-type:类型 inside;(两者结合用)