css常见样式1
2017-02-20 本文已影响0人
饥人谷_oathy
1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别
块级元素:
- 常见块级元素:div,h1~h6,p,hr,form,ul,ol,pre,table,li,dl,dd,dt,tr,td,th等
- 块级元素会从新行开始
- 块级元素会占据一整行的空间
- 块级元素可以包括块级元素、行内元素、文本
- 可以为块级元素设置width、height、padding、margin等属性来控制元素所占的空间
- 块级元素默认:display:block;
行内元素:
- 常见行内元素:em,strong,span,a,br,img,button,input,label,select,textarea,code,srcipt
- 行内元素可以与其他行内元素处于同一行
- 行内元素的宽度只与其内容有关
- 行内元素只能报刊行内元素、文本
- 对行内元素设置width、height、padding-top、padding-bottom、margin-top、margin-bottom属性是无效的
- 行内元素默认:dipslay:inline;
2. 什么是 CSS 继承? 哪些属性能继承,哪些不能?
CSS继承:为置上级(父级)设置的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。
有继承性的属性:
- 字体相关属性:font,font-family,font-weight,font-size,font-style,font-stretch,font-size-adjust
- 文本相关属性:text-indent(文本缩进),text-align,line-height,word-spacing,letter-spacing,text-transform,direction,color
- 元素可见性:visibility
- 表格布局属性:caption-side,border-collapse,border-spacing,empty-cells,table-layout
- 列表布局属性:list-style-type,list-style-image,list-style-position,list-style
- 生成内容属性:quotes
- 光标属性:cursor
- 页面样式属性:page,page-break-inside,window,orphans
- 声音样式属性:speak,speak-punctuation....
无继承性的属性
- display
- 文本属性:vertical-align,text-shadow,text-decoration,white-space,unicode-bidi
- 盒子模型相关属性:width,height,margin相关属性,border相关属性,padding相关属性
- 背景相关属性:background,background-XXX
- 定位属性:float,clear,position,top,right,bottom,left,min-width,min-height,max-width,max-height,overflow,clip,z-index
- 生成内容属性:content,counter-reset,counter-increment
- 轮廓样式属性:outline-style,outline=width,outline-color,outline
- 页面样式属性:size,page-break-before,page-break-after
- 声音样式属性:pause-before,pause-after,pause,cue-before,cue-after,cue,play-during
3. 如何让块级元素水平居中?如何让行内元素水平居中?
- 块级元素水平居中:margin:0 auto;
- 行内元素水平居中:在包含行内元素的块级元素中加入属性 text-align:center;
4. 用 CSS 实现一个三角形
5. 单行文本溢出加 ...如何实现?
white-space: nowrap; /*禁止换行*/
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*文本溢出表示为。。。*/
6. px, em, rem 有什么区别
px 是像素,是固定值
em 是根据父元素的倍数
rem是根据根元素的倍数