CSS常见样式

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

块级元素:
div;h;p;hr;form;ul;ol;dl;pre;table;li;dt;dd;tr;td;th;

行内元素:
em;strong;span;a;br;img;button;input;label;select;textarea;code;script;

每个元素有一个display属性,值为“block”的就是块级元素,值为“inline”的就是行内元素。

块级元素可以包含块级元素和行内元素,而行内元素只能包含文字和行内元素。

块级元素占据一整行空间,而行内元素只占据自身宽度空间。

块级元素可设置宽高,而行内元素无效。

如图:

8.png

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

css继承,特定的css属性会向下传递给子元素。

能继承的,例如:
文本属性,font-size,font-family,font-weight,line-height;
列表属性,list-style-image,list-style-position,list-style-type,list-style;
color属性

不能继承的,例如:
文本属性,vertical-align,text-decoration,text-shadow,white-space,unicode-bidi;
背景属性,background,background-color;
盒模型属性,width,height,margin,border,padding;

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

使用“margin: 0 outo;”可以使块级元素水平居中
对行内元素所在的父级块元素使用“text-align: center;”,可使行内元素居中

用 CSS 实现一个三角形

使用 {
height: 0;
width: 0;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid blue;
}可以实现向上的三角形。

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

使用 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
可以实现。

px, em, rem 有什么区别?

px,固定单位
em,相对单位,相对于父元素的字体大小
rem,相对单位,相对于根元素的字体大小

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

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

给body元素中的字体设置,字体大小12px,行高为字体的1.5倍高度,字体选择可以有tahoma,arial,Hiragino Sans GB,\5b8b\4f53,sans-serif,从左到右优先选择。

加引号是因为这个字体名字中间有空格,加空格表示一个整体。

\5b8b\4f53代表宋体。

代码题

实现1

实现2

实现3

实现4

实现5

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别。 常见的块级元素和行内元素: 块级元素:h/p/d...
    饥人谷_tanfei阅读 1,855评论 0 0
  • 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素:div h1 h2 h3 h4 h...
    _李祺阅读 1,540评论 0 0
  • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 block level inline-level区...
    HaveSea阅读 3,138评论 0 0
  • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素div h1 h2 h3 h4 h5 h6...
    知更鸟_b4d4阅读 2,682评论 0 0
  • 一、块级元素和行内元素分别有哪些?测试4条以上的特性区别。 1、块级元素能包含块级元素和行内元素,而行内元素只能包...
    青鸣阅读 2,361评论 0 0

友情链接更多精彩内容