CSS常见样式

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

  • 块级元素 div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
  • 行内元素 em strong span a br img button iput label select textarea code script

特性区别主要有:

  • 块级元素占据一整行空间,行内元素占据自身宽度空间,一行中可以排列多个行内元素。
  • 块级元素可以包含块级元素和行内元素,行内元素只能包含行内元素和文本。
  • 块级元素可以设置宽高,行内元素设置宽高是无效的。
  • 块级元素可以设置内边距和外边距,行内元素只能设置横向内边距和横向外边距。

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

  • CSS继承就是子元素继承了父元素的CSS样式的属性
  • 所有元素可继承:visibility和cursor
    内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction(字体内容 大小相关属性)
    块状元素可继承:text-indent和text-align(字体布局属性,当前元素必须是块级元素)
    列表元素可继承:list-style、list-style-type、list-style-position、list-style-image(ul ol 的属性可以继承给li)
    表格元素可继承:border-collapse

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

块级元素 行内元素
margin: 0 auto; text-align : center;

4. 用 CSS 实现一个三角形

js代码实现

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

满足三个条件:溢出部分隐藏 overflow:hidden; 不换行:white-space:nowrap;溢出部分为点 text-overflow:ellipsis

6.px, em, rem 有什么区别?

  • px 相对元素,相对于浏览器的大小,注意ie无法调整使用px为单位的字体大小
  • em 相对元素,相对于字体的大小,注意字体大小的继承性
  • rem 相对元素,相对于根元素的大小,有利于修改网页的字体大小

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

body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-
serif;
}
  • 代码作用
    该段代码设置了body的font样式,字体大小为12px,行高是字体1.5倍的像素值,后面则是第一到第五字体,用逗号隔开,如果用户浏览第一字体没有,则查询第二字体有没有,以此类推,如果都没有则采用系统默认字体;
  • 字体为什么要加引号?
    因为采用中文或者英文字体有空格时,不加引号可能导致用户浏览器不能识别字体,产生乱码;
  • 字体里的数字符号代表什么?
    代表字体的Unicod码,这个例子中, \5b8b 为Unicode的“宋”,\4f53 为Unicode的“体”,所以这个编码就是指“宋体”。

代码

  1. 实现如下效果
  2. 实现如下按钮效果
  3. 实现如下表格
  4. 实现如下三角形
  5. 实现如下card
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容