Fork me on GitHub

html css 的tips

HTML CSS 的一些知识

背景定位

1
background-position:center 0;

滚动条变 背景不变

1
background-attachment:fixed;

边框虚线

1
border:1px solid dashed;

密密麻麻虚线

1
border:1px solid dotted;

如何实现一个三角形?

1
2
3
4
div{
height:0;width:0;border:10px solid white;
border-top-color:#fff;
}

关于文字

1
font-weight:bold/normal 或者值100
1
font-style:italic (表示斜体)
1
font-size (字体大小)

复合样式:

1
font:bold italic 26px/30px(行高) "宋体";

有关文本

color: (颜色)

text-aline (对齐方式)

text-indent:2em (缩进两个字符这里值也可以是像素px)

text-decoration 文本修饰 E.G(underline)

letter-spacing 字母间距

word-spacing 以空格为解析单位的单词间距

强制不换行

1
white-space:nowrap;

一个空格有多大??

哈哈其实这个问题很简单,宋体字体下文字大小的一半

文字默认大小16px;

测量文字的大小时一定要从上到下!!

左右要加上缝隙

margin-top 传递父级的问题 用加border解决

伪类的顺序

L V H A

未访问 是 :link

active 是鼠标按下以后的动作

还有一些tips

要先用section再用div

dl自定义列表

dt标题

dd列表项 信息

mark
记号笔标签

选择器的优先级

style>ID>类选择器>标签选择器

标签初始化

css reset原则:但凡是浏览器默认的样式都不要使用

斜体

em斜体 强调 专业术语

i 也是斜体

块状与内联转换

块状转内联:display:inline;

内联转块状:display:block;

块状一行:display:inline-block;

tips:块元素一行显示;内联元素支持宽高,在没有宽度的时候,内容撑开宽度。

清浮动

clear:left|right|both;

清浮动的方法:
1:加高 但是扩展性不好

2:父级加浮动 也不好:

3:加display:inline-block;和2一样

3:空标签清浮动 会有像素偏差 (IE6)

4:br清浮动 和空标签一样,有像素偏差

5:after伪类清浮动 (主流)

div:after{ content:""; display:block; clear:both; }

定位

父级relative 子级absolute

绝对定位 使文件完全脱离文档流

发生移动

固定定位:

position:fixed;

但是IE6不支持

分享;广告;通知 这些类似的东西用这个

透明度

opacity:0~1;

父级加了,子级也透明

透明度的兼容

filter:alpha(opacity:90);opacity:0.9;

IE下透明度(滤镜)

filter:alpha(opacity=0~100);

表格

table
表头:thead

主题:tbody

行:tr

表头单元格:th

内容单元格:td

colspan行合并

rowspan列合并

table重置:css

th,hd{paddding:0;}

border-collapse:collapse;

随后在body下面
<table border="1">

表单

单选:type="radio"

多选:type="checkbox"

label标签

label代替value

label for = user_name 选中的是ID

radio默认选中 checked=checked

margin-top 传递

IE6最小div高度19px

overflow:hidden解决

IE6不能用inline-block

*display:inline;zoom:1;解决

IE6不支持png24格式

提升优先级

原先style优先级大于标签选择器

加了!important优先级提升了

背景颜色变成了红色

git

git 是 分布式

svn 是 集中式

工作区直接到版本库

git commit -a -m "add drag.js"注释

git diff 看工作区和暂存区差别

git diff --cached看暂存区和版本库的对比

git diff master看工作区和版本库的对比

从暂存区撤销回工作区git reset HEAD文件名字

恢复到版本库 清除工作区 git checkout文件名

元素看不见

display:none 显示无 没有 不占位

visibility:hidden占位但是不显示

-------------This is the endThank you for your reading-------------

本文标题:html css 的tips

文章作者:Chen

发布时间:2017年09月09日 - 13:09

最后更新:2017年09月20日 - 19:09

原始链接:http://zhiweichen.com/2017/09/09/html-css-的tips/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。