css常见样式及属性

一、块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别

  • 块级元素和行内元素分别有哪些
    1.块级元素
    <code>div,h1~h6,p,hr,form,ul,dl,ol,pre,tableli,dd,dt,tr,td,th;</code>
    2.行内元素 <code>em,strong,span,a,br,img,button,input,lable,select,textarea,code,script;</code>
  • 动手测试并列出4条以上的特性区别
    1.块级元素可以包含文本,块级,行内元素,而行内元素只能包含文本和行内元素;
    2.块级元素单独占据一整行,行内元素占据的位置只有自身文本宽度的空间;
    3.块级元素可以设置宽高,行内元素设置宽高无效;
    4.块级元素的padding,margin值设置有效,行内元素padding,margin上下的值设置无效,但左右有效;


二、什么是 CSS 继承? 哪些属性能继承,哪些不能?

  • 什么是CSS继承?

继承就是子元素继承了父元素的CSS样式的属性

  • 什么属性能继承?

1.字体:family,size,weight,line-height
2.文本:letter-spacing,word-spacing,text-align, text-indent
3.列表:list-style-type
4.颜色:color,ps:a标签不能继承父元素的字体颜色,原因是a标签自己有默认字体颜色,会覆盖掉- 继承自父元素的字体颜色;

  • 什么属性不能被继承?

1.display
2.float
3.padding和margin
4.背景相关,比如颜色图片等

三、如何让块级元素水平居中?如何让行内元素水平居中?

  • 如何让块级元素水平居中?

<code>div{margin: 0 auto;}</code>

  • 如何让行内元素水平居中?

<code>div{text-align:center;}</code>
扩展__垂直居中

四、用 CSS 实现一个三角形

各种三角形

五、单行文本溢出加 ...如何实现?

1.<code>white-space:nowrap</code>:设置文本不换行;
2.<code>overflow:hidden</code>:设置文本溢出后隐藏;
3.<code>text-overflow:ellipsis</code>:当文本溢出后生成“…”;

六、px, em, rem 有什么区别

  • px:固定单位;
  • em:相对单位,相对于父元素字体大小的倍数;
  • rem:相对单位,相对于根元素(html)字体大小的倍数;

七、解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

  • 字体大小为12px,行高是字体的1.5倍
  • 设置字体为tohoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif 设置的字体如果浏览器以及用户本地没有,则选择下一项,以此类推,如果候选字体全都没有,则使用普通无衬线字体。
  • 加单引号,表示引号内是一种字体,防止空格会造成浏览器读取错误。
  • \5b8b\4f53 表示宋体的Unicode编码。

八、代码效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 行内元素和块级元素 行内元素常见的行内元素有(a、span、img、input、label、em、strong、b...
    白柏更好阅读 488评论 0 0
  • text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中 规定元素中的文本的水平对...
    白柏更好阅读 166评论 0 0
  • 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 答: (1)块级元素含义:block ele...
    黄同学2019阅读 776评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 01 这段时间,广东的天气冷得有些刺骨。除了睡觉,吃火锅应该是最幸福的事情了。 于是就在上周五,我所在的编辑部决议...
    我是左小鱼儿阅读 711评论 0 1