css常见属性
2017-04-26 本文已影响0人
饥人谷_hfz
块级元素和行内元素分别有哪些
- 块级元素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)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。