zr20170117-css
来源:互联网 发布:海通证券行情软件 编辑:程序博客网 时间:2024/06/05 16:05
1.精灵图
主要是通过多个小图标放在一张大的图片上面,在用到的时候通过nth-child(3)来调整所需的图片位置。例如background: url(img/sprite_01.jpg) no-repeat 0 -80px中的-80就是调位置的。2.行级,块级和行内块级元素(display)
块级:具有宽高并且换行如display:block;行内块级:具有宽高但不会换行例如display:inline-block;行级:不吸收宽高又不会换行例如display:inline。3.内边距padding(紫色代表内边距)
盒子真正的宽度=本身宽度+左边距+右边距+左边框+右边框;盒子真正的高度=本身高度+上边距+下边距+上边框+下边框padding和margin的区别:当盒子没有宽高的时候,padding可以叠加到盒子的宽高中,而margin不行,除非有内容;
box-sizing:border-box;会把盒子的大小给固定好,就不会受到padding的影响。
4.边框border
border的正确写法是:border:1px solid red;(类似background连写法一样)5.导航条设置(ul li由竖排变横排的方法)
方法一:在ul li里面设置cursor:pointer;方法二:在ul li a设置{display:block;}6.清除浮动的方法(重点)
两个相近的盒子都设置了浮动,容易导致错位;所以有两个方法:一是在离有浮动的盒子的另一个最近盒子里面设置clear:both;二是在受影响盒子的后面设置.box:after{content:""; display: block; clear: both;},其中第二种方法更好.
7.ul li的使用
一般通过设置ul li的左浮动float:left;由竖排变行排;通过设置ul li:hover a{}来设置鼠标经过效果。
0 0
- zr20170117-css
- CSS
- css
- css
- css
- css
- CSS
- CSS
- css
- css
- CSS
- css
- css
- CSS
- css
- CSS
- css
- CSS
- webview中的图片相应事件相应 坑
- 2017/1/17
- 欢迎使用CSDN-markdown编辑器
- strncpy()
- 实时仿真软件Sofa的安装(Windows+VS2008)
- zr20170117-css
- poj 3349 Snowflake Snow Snowflakes (hash)
- 存储类、链接和内存管理
- 【matlab】一种较方便的MATLAB GUI中popupmenu中选取值得获得方法
- 字符串和输入和输出
- HONEYPOT UTILITIES
- retrofit+okhttp 实现缓存
- Charts.js 图例添加点击事件
- ubuntu配置jdk环境变量