css一般性
1. 总差那么几像素!line-height:100%;
2. 数据图片,产品图片用img
小图标,logo,修饰网站的图片 用背景
3.文字居中 line-height /text-align:center;
4. 边框写三角,透明度
<span style="width:0; height:0; border:4px solid transparent; display:inline-block; border-top:4px solid red;"></span>
5.不兼容IE
检查结构是否健康
检查宽度有没有设置
实在不行加个边框
彻底没救加个overflow:hidden;
杀手锏:hack
6.浮动起来宽不够 margin 负值
7.路径:
相对路径:相对于文件本身的位置
../ 返回上一级
img/ 进入到img文件夹内
绝对路径:文件完整的路径(不变的)
8.伪类选择器:
a:link{} 未访问过的链接样式
a:visited{} 已访问过的链接样式
a:hover{} 鼠标移入时显示样式(最常用)
a:active{} 鼠标点击时的样式
lvha 书写顺序
注意:IE6下只有a标签兼容
9.CSS文本单行省略样式:
white-space:nowrap; 文本不换行
overflow:hidden; 溢出:隐藏
text-overflow:ellipsis; 文本溢出:省略
多行省略:用js 或者后台截取
10.简写:
margin:100px 0 0 0; 上100 右0 下0 左0
margin:100px 5px 10px; 上100 左右5 下10
margin:100px 10px; 上下100 左右10
margin:100px; 四个方向 都是100
11.margin- bug
1. margin拖拽父级 子级元素加margin 父级也会跟着下来
解决方法:1.给父级加border
2. overflow:hidden;
3.用padding
2. margin塌陷 margin上下的值不能相加是重叠的
解决方法:1.只写一个方向的margin
2.用padding
12:清除浮动
.clearfix:after{ display:block; content:""; clear:both;}
.clearfix{ zoom:1; } 兼容IE6/7浏览器
13.图片被标签包着,图片下方与标签有几像素的距离,
解决方案:把图片变成块 display:block;
14.margin负值 :
1.针对有宽度的对象 改变位置的!
2.针对没有宽度的对象 是 加宽的!
15.绝对定位:
position:absolute;
1.完全脱离文档流
2.参照物默认是body,如果父级有定位,那就是父级!
3.把元素变成块!
相对定位:
position:relative;
1.不脱离文档流
2.参照物是自己原来的位置!
3.不改变元素的类型!
固定定位:
1. 参照物是页面窗口
2. 脱离文档流
3. 元素变成块
只要!是定位! 就必须! 加坐标!
top/left/right/bottom
16.透明度:
opacity:0.5; 高级浏览器(0-1)
filter:alpha(opacity:50); 兼容IE8以下(0-100)
17.单选按钮:
<input type="radio" id="id" name="定义类名" />
<label for="id">男</label>
<input type="radio" name="定义类名" />
女
多选按钮:
<input type="checkbox" checked id="id" />
<label for="id">西红柿</label>
18.清除table单元格距离:
cellpadding="0"
cellspacing="0"
清除默认样式:
table{ width:100%; border-collapse:collapse;}
td,th{ padding:0; border:1px solid red;}
19.iframe框架标签:
<iframe src="网址" scrolling=“no” border=“0” />
scrolling=“no” 取消滚动条
border=“0” 清除border
20.a的锚点:
<a href="#zhejiushiai">爱情</a>
<p id="zhejiushiai"></p>
21.滑动门:
在什么时候用:在两边有圆角的按钮或者图标上,文字个数不固定的时候。
<a href="#">
<i class="l"></i>
文字
<i class="r"></i>
</a>
22.布局:
等高布局:
给父级加overflow:hidden;
给两个块分别加:
padding-bottom:2000px;
margin-bottom:-2000px;
左边固定,右边自适应:
用绝对定位:给左边固定宽的块加绝对定位
给右边的加margin-left:左边的宽度;
左右固定,中间自适应:同上。
23. box-shadow:10px 10px 10px red inset;
块阴影: X轴偏移量 Y轴偏移量 模糊距离 阴影颜色 内阴影;
text-shadow:10px 10px 10px red;
文字阴影: X轴偏移量 Y轴偏移量 模糊距离 阴影颜色;
24. 变形:
transform:rotate(30deg)旋转
translate(100px,100px)平移
skew(60deg);倾斜
scale(-1);缩放
过渡:
transition:all 1s 1s;
全部样式 延迟时间 执行时间
linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速
25. 定义动画
@-webkit-keyframes animate1{
from{}
to{}
}
调用动画:-webkit-animation:animate1 1s infinite;
26.响应式布局:
媒体查询:
@media screen and (max-width:769px){
div{ width:590px; background:pink;}
}
27. 选择器优先级:范围越大优先级越低
!important; 无敌
* < 标签 < .class/a:link < #id < 行间
28.绝对居中:
1. 已知宽高的块
position:absolute;
top:50%;
left:50%;
margin-left:-宽/2
margin-top:-高/2
2.未知宽高的块居中
table /tanslate(-50%,-50%)
3. 做遮罩
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
29.定义字体:
@font-face{font-family:"";src:url()}
iconfont,alimama,fontasome
30. 不规则字母数字强制换行: FF没有很好办法只能滚动条,overflow:auto;
div: (IE浏览器)white-space:normal; word-break:break-all;
#wrap{white-space:normal; width:200px; }
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>
table: (IE浏览器)使用样式table-layout:fixed;
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
table2: (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
css一般性的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css对齐
2016-10-25 <css入门经典>第15章 1.text-align属性: 块属性内部的文本对齐方式.该属性只对块盒子有意义,内联盒子的内容没有对齐方式.(注意:只是盒子内部的内容对 ...
- 【转载】CSS规范
原文地址:http://www.cnblogs.com/whitewolf/p/4491707.html 目录 HTML 语法 HTML5 doctype 语言属性(Language attribut ...
- HTML CSS编码规范(黄金定律)
HTML 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双引号,绝不要使用单引号. 不 ...
- 如何编写规范,灵活,稳定,高质量的HTML和css代码
黄金定律 永远遵循同一套编码规范,不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. 语法: 1.用两个空格来代替制表符(tab);2.嵌套元素应当缩进一次(两个空格); 3.对 ...
- 前端HTML与CSS编码规范
HTML 语法 HTML5 doctype 语言属性(Language attribute) 字符编码 IE 兼容模式 引入 CSS 和 JavaScript 文件 实用为王 属性顺序 布尔(bool ...
- web前端代码规范——css代码规范
Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个 ...
- 编码规范(CSS)
code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px ...
- 第二天(CSS 选择器)
1.常用的CSS选择器 类型选择器: 例如: p { color : red ; } 后代选择器: 例如: h2 span { font-weight : bold ; ...
随机推荐
- 火狐浏览器firebug
1. 近日,Firebug团队在官网贴出了停止继续开发.更新维护Firebug的通知,邀请大家使用Firefox内置工具DevTools. 来自官网截图 Firebug是Firefox旗下的一款扩 ...
- windows下搭建voip服务器
软件: yate-6.0.0-1-setup.exe 服务端,里面也有个客户端 eyeBeam.exe 客户端 步骤: 失败....
- input 修改placeholder颜色
一般来说input的placeholder是不能修改的,但是现在浏览器利用伪类实现了对placeholder的修改 input::-webkit-input-placeholder { // cher ...
- MySQL 中的反引号(`):是为了区分 MySql 关键字与普通字符而引入的符号;一般,表名与字段名都使用反引号。
MySQL 中的反引号(`):是为了区分 MySql 关键字与普通字符而引入的符号:一般,表名与字段名都使用反引号.
- 函数调用运算符"()"
14.8函数调用运算符"()"1.函数调用运算符必须是成员函数,一个类可以定义多个不同版本的调用运算符,但是他们相互之间应该在参数数量或返回类型上有所区别.定义了调用运算符的类的对 ...
- str.replace()和re.sub()/calendar.month_abbr/re.subn()/upper和lower和capitalize/贪婪匹配和费贪婪匹配/re.S和re.DOTALL 笔记
str.replace()可以进行简单的替换 >>> a = 'one.txt, index.py, index.php, index.html, index.js' >> ...
- HanLP极致简繁转换详细讲解
HanLP极致简繁转换详细讲解 作者: hankcs(大快高级研究员 hanlp项目负责人) 谈起简繁转换,许多人以为是小意思,按字转换就行了.事实上,汉语历史悠久,地域复杂,发展至今在字符级别存在“ ...
- hadoop不同版本有哪些
一.Hadoop是什么? 首次听到hadoop这次单词,相信很多人跟我当时是一样,不免心中画上一个大大的问号——这是什么东西?Hadoop是什么?百度百科的解释是:Hadoop是一个由Apache基金 ...
- 脱壳:OEP(即程序入口点)查找 --- 基本思路和常见方法
OEP:程序的入口点,软件加壳就是隐藏了OEP(或者用了假的OEP), 只要我们找到程序真正的OEP,就可以立刻脱壳. PUSHAD (压栈) 代表程序的入口点, POPAD (出栈) 代表程序的出口 ...
- Jumpserver 介绍
安装jumperserver Sudo yum install –y git Su root Cd /usr/local Mkdir jumpserver 安装等依赖包 yum -y install ...