CSS常见样式

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

  • 块级元素:div, p, h1, h2, h3, h4, ul, li
  • 行内元素:em, a, img, span, button, label, select
  • 区别:
  • 块级元素单独占据一行,行内元素可以让其他元素在它的左右。
  • 块级元素能设置宽高,而行内元素设置无效。
  • 对于margin和padding属性,块级元素会产生上下左右的内外边距效果。行内元素左右会产生边距效果,上下不会产生。
  • 块级元素可以包含行内元素,而行内元素内一般不会包含块级元素。

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

每个 CSS 属性定义的概述都指出了这个属性是默认继承的还是默认不继承的。当元素的一个继承属性 (inherited property )没有指定值时,则取父元素的同属性的计算值。

  • 可继承:color, font, font-family, text-decoration, visibility, cursor 等
  • 不可继承: margin, padding, width, height, display, background 等

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

  • 块级元素水平居中:margin-left 和 margin-right的值设为auto。margin:0 auto;
  • 行内元素:text-align: center;

用 CSS 实现一个三角形

.arrow-up {
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid transparent;
        border-bottom: 30px solid green;
 }

https://ychenxi.github.io/Blog/triangle

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

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'是unicode编码后的'宋体'

代码

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

推荐阅读更多精彩内容

  • 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 答: (1)块级元素含义:block ele...
    黄同学2019阅读 780评论 0 1
  • 1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别。 块级元素 div h1 h2 h3 h4 h...
    阿洁2185阅读 223评论 0 0
  • 块级元素和行内元素分别有哪些? block-level div h1 h2 h3 h4 h5 h6 p hrfor...
    我要认真学前端阅读 1,158评论 0 1
  • 1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 区别1:块级元素单独占据一行,而行内元素只包含...
    Chy18阅读 191评论 0 0
  • 1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 **块级元素 **div h1 h2 h3 h...
    billa_8f6b阅读 381评论 0 0