1)块级元素 行内元素
- 块级(block-level); 行内(内联、inline-level)
- 块级可以包含块级和行内，行内只能包含文本和行内
- 块级占据一整行空间，行内占据自身宽度空间
- 宽高设置、内外边距的差异
- block-level
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th section
- inline-level
em strong span a br img
button iput label select textarea
code script
2)宽高
只对块级元素设置生效,对行内元素设置无效
.box {
width: 200px;
height: 100px;
background-color: red;
}
3)边框
border-width, border-color, border-style
.box {
border-width: 1px;
border-color: red;
border-style: solid; /* dotted dashed*/
}
/* 简写 */
.box2 {
border: 1px dotted #ccc;
}
4)边距
- padding
padding代表内边距，有四个方向的值，可以合写，值可以是数值也可以是百分比（相对于父容器、不是自身）
padding-top/right/bottom/left
padding: 20px; /* padding: 20px 20px 20px 20px; */
padding: 10px 20px; /* padding: 10px 20px 10px 20px; */
padding: 10px 20px 30px; /* padding: 10px 20px 30px 20px; */
- margin
- margin 代表外边距，有四个方向的值，可以合写，值可以是数值也可以是百分比（相对于父容器、不是自身）。还可以是负值
- 外边距合并问题
margin-top/right/bottom/left
margin: 20px; /* margin: 20px 20px 20px 20px; */
margin: 10px 20px; /* margin: 10px 20px 10px 20px; */
margin: 10px 20px 30px; /* margin: 10px 20px 30px 20px; */
- margin: 0 auto
对于块级元素 设置 margin: 0 auto 可达到居中目的.
.box {
/* margin: 0 auto; 实际上是下面两个起作用 */
margin-left: auto;
margin-right: auto;
}
margin = 0;
padding = 0;
}
去除默认样式的margin padding.
##5)display
- 块级：block, list-item, table
- 行内: inline, inline-table, inline-block
display'
Value: inline | block | list-item | inline-block | table | inline-table | table-row | table-cell | none | inherit
Initial: inline
Applies to: all elements
Inherited: no
##6)font
- font-size：字体大小
>chrome 默认字体大小16px, 最小字体 12px [解决方案](https://github.com/islittle/Web-Developer/blob/master/css-notes/compatible-with-less-than-12px-fontsize.md)
- font-family：字体，宋体、微软雅黑、Arial等
>font-family的写法:
在 CSS 中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8 等）不匹配时会产生乱码。保险的方式是将字体名称用Unicode来表示.
宋体 | SimSun | \5B8B\4F53 黑体 | SimHei | \9ED1\4F53
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
**注意**:如果不知道字体什么代码,打开控制台 escape('微软雅黑')，把 %u替换成 \
- font-weight：文字粗度，常用的就是默认值regular和粗体bold
- line-height：行高，可以用百分比、倍数或者固定尺寸
以上属性都可继承给子元素
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
p {
line-height: 1.5;
font-size: 14px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: bold;
}
##7)文本
- text-align：文本对其方式 left、center、right、justify
- text-indent：文案第一行缩进距离
- text-decoration： none、underline、line-through、overline
- color：文字颜色
- text-transform：改变文字大小写none、uppercase、lowercase、capitalize
- word-spacing：可以改变字（单词）之间的标准间隔
- letter-spacing：字母间隔修改的是字符或字母之间的间隔
[范例](http://js.jirengu.com/riyu/1/edit)
**单行文本溢出加...**
.card > h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
[demo](http://js.jirengu.com/dode/1/edit)
##8)颜色
**写法**
>- 单词: red, blue, pink, yellow, white, black
- 十六进制: #000000, #fff, #eee, #ccc, #666, #333, #f00, #0f0, #00f
- rgb: rgb(255, 255, 255), rgb(0, 255, 0)
- rgba: rgba(0,0,0,0.5)
[更多](http://www.w3schools.com/colors/default.asp)
##9)单位
- px： 固定单位
- 百分比(宽高？文字大小？line-height? position?)
- em: 相对单位，相对于父元素字体大小
- rem: 相对单位，相对于根元素(html)字体大小
- vw vh: 相对单位，1vw 为屏幕宽度的1% [兼容性](http://caniuse.com/#search=vw)
##10)其他
####a 链接设置颜色
a 有默认颜色和样式，会覆盖继承的样式
a {
color: red;
text-decoration: none;
}
####列表去掉点
ul{
list-style: none;
}
/也可这样/
li{
list-style: none;
}
####隐藏OR透明
- opacity: 0 ; 透明度为0，整体
- visibility: hidden ; 和opacity:0 类似
- display:none; 消失，不占用位置
- background-color: rgba(0，0，0，0.2) 只是背景色透明
##11)背景 background
|属性|描述|
|---|---|
|background| 简写属性，作用是将背景属性设置在一个声明中|
|background-attachment| 背景图像是否固定或者随着页面的其余部分滚动|
|background-color |设置元素的背景颜色|
|background-image| 把图像设置为背景|
|background-position| 设置背景图像的起始位置|
|background-repeat |设置背景图像是否及如何重复|
|background-size| 设置背景的大小(兼容性)|
>- background-position：默认左上角
- x y
- x% y%
- [top | center | bottom] [left | center | right]
- background-repeat
- no-repeat：背景图片在规定位置
- repeat-x：图片横向重复
- repeat-y：图片纵向重复
- repeat：全部重复
- background-size
- 100px 100px
- contain
- cover
example:
background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
可以缩写为一句：
background: #f00 url(background.gif) no-repeat fixed 0 0;
**CSS Sprite**
- 指将不同的图片/图标合并在一张图上。
- 使用CSS Sprite 可以减少网络请求，提高网页加载性能。
##11)inline-block
- 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
- 又呈现 block 特性 (可设置宽高，内外边距)
- 缝隙问题
##12)line-height
- line-height: 2
- line-height: 100%
- height = line-heihgt 来垂直居中单行文本