块级元素和行内元素分别有哪些
- 块级元素block-level: div、h1/h2/h3.. p form ul ol
- 行内元素inline-level:span button input em script label
块级元素区别和行内元素区别
| 块级元素 | 行内元素 |
|---|---|
| 可以包含块级和行内元素 | 包含文字和行内元素 |
| 占据一整行的空间 | 占据自身宽度 |
| 可以设置margin padding | 行内元素内外边距不生效 |
| width height只对块级元素有效 | width、height 对行内元素无效 |
css 属性继承（后续遇到了边学习继续总结）
css属性继承是指在内部的标签将拥有外部标签的样式性质，继承是一种机制，不仅可以用于某个特定的元素，还可以用于它的后代元素
| 可继承的属性 | 不可继承的属性 |
|---|---|
| color | border |
| font(font-size、font-familye、font-weight、line-height) | text-decoration |
| text-align | display |
| text-indent | background |
| text-transform | height |
| word-spacing | position |
| letter-spacing | float |
| list-style | min-height、max-height |
设置块级元素和行内元素居中
- 块级元素，只要设置左右的margin 为auto，margin:0 auto; 既可达到居中
- 行内元素，设置text-algin :center; 即达到居中。
用 CSS 实现一个三角形
http://js.jirengu.com/rilo/13/edit?html,output
单行文本溢出加 ...如何实现?
需要三个属性，white-space:nowrap; // 不折行
overflow:hidden; // 超出部分隐藏
text-overflow:ellipsis;变为...
http://js.jirengu.com/rilo/13/edit?html,output
px, em, rem 有什么区别
- px:固定单位
- em: 相对单位，相对于父元素字体大小
- rem:相对单位，相对于根元素html字体的大小
font-family
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',
sans-serif;
}
上述代码：设置字体大小为12px,行高是1.5，\5b8b\4f53 是字体对应的unicode 编码，加引号是因为 字体名字有空格，不加引号会被当成两个元素。
代码题：
1、http://js.jirengu.com/caha/1/edit
2、http://js.jirengu.com/paxox/1/edit
3、http://js.jirengu.com/tofad/1/edit
4、http://js.jirengu.com/pahu/1/edit
5、http://js.jirengu.com/sixoz/3/edit
总结任务八中的css属性
- font-size:字体大小
- font-family 字体（宋体、微软雅黑）
- font-weight 字体粗度（font-weight:bold；粗体）
- line-height:行高（文字占据的垂直空间）
- text-decoration 不可继承属性，可以延伸到子属性，但是标签a自带下划线，所以必须单独设置a标签来修改，不能直接通过 操作父元素来修改a标签。
- text-align:left/right/center/justify/ 对齐方式,相对父元素的对齐方式，并不能控制块级元素自己对齐，只能控制它的行内文本内容对齐；
- text-transform 可以设置文本全部大小或者全部小写，也可以设置单个的单词（capitalize、uppercase、lowercase）
- text-indent:规定了首行文本内容之前应该有多少水平空格
- text-decoration:none/line-through/overline/
- rgb(255,255,255) 白色 red green blue 所占百分比，255 为100%
rgba(0,0,0,0.5) 0.5是透明度，从0-1，不能为负数，1是完全不透明 - box-shadow:以逗号分隔列表来描述一个或者多个阴影效果，可以用到几乎任何元素上，如果元素同时设置了border-radius,那么阴影也会有圆角效果
- border-collapse:用来决定表格的边框是分开还是合并的，collapse 使用合并的边框绘制表格，separate 分开的边框
- word-spacing 用于声明标签和单词直接的间距行为
- letter-spacing 明确了文字的间距行为
- list-style:属性是设置list-style-type、list-style-image、list-style-position 的简写属性。list-style:none 去掉li前的点
- position 选择定位元素的代替规则，
static 指定元素使用正常的布局行为，即元素在文档流中当前的布局位置，此时设置top，right，bottom，left，z-index属性无效
relative 元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置，（因此会在此元素未添加定位时，所在位置留下的空白，）
absolute 不为元素预留空间，通过制定元素相对于最近的非static定位祖先元素的偏移
fixed不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
