文章目录

一、语义化标签：

  • 1、figure标签
  • 2、figcaption标签
  • 3、mark标签
  • 4、article标签
  • 5、time标签
  • 二、旋转
  • 三、css控制单行或者多行文本超出显示省略号
  • 1、多行文本超出显示省略号
  • 2、多行单行超出显示省略号
  • 3、注：题外话（遇到了一个不是问题的问题）
  • 四、[圆角]()
  • 五、使用font-size：0，去掉inline-block元素之间的空隙
  • 六、行内元素padding-top、margin-top;margin-top、margin-button没有用
  • 八、给a增加padding，点击范围扩大
  • 九、docume.getElementsbyclassName、语义化标签做兼容。

一、语义化标签：

1、figure标签

figure标签可以用来表示网站制作页面上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。

2、figcaption标签

作用：定义 figure 元素的标题（caption）。

说明：“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

html5 标签加上hidden html figcaption标签_语义化

3、mark标签

<mark> 标签定义带有记号的文本。

请在需要突出显示文本时使用 <mark> 标签。

4、article标签

<article> 标签定义外部的内容。 外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。 注释：<article> 标签的内容独立于文档的其余部分。

5、time标签

<time> 标签定义日期或时间，或者两者。

二、旋转

transform:rotate(45deg); rotate：通过指定的角度参数对原元素指定一个效果。 如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

三、css控制单行或者多行文本超出显示省略号

1、多行文本超出显示省略号

p{
    width：300px;/*可自定义，也可不设*/
    overflow:hidden;/*超出隐藏*/
    text-overflow:ellipsis;/*文本溢出时显示省略标记*/
    display:-webkit-box;/*设置弹性盒模型*/
    -webkit-line-clamp:3;/*文本占的行数,如果要设置2行加...则设置为2*/
    -webkit-box-orient:vertical;/*子代元素垂直显示*/
  }

注意：p标签绝对不可以设置高度，要让文本自己撑，若p添加高度，overflow:hidden是只有在超出盒子的范围才会隐藏。

2、多行单行超出显示省略号

overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap; /*规定段落中的文本不进行换行 */

3、注：题外话（遇到了一个不是问题的问题）

html5 标签加上hidden html figcaption标签_css_02

1.tab按键的空格——中间一条实现

2.某博客复制产生的间隙（这里的间隙是“内容”如果存在代码就是错误的）——中间什么也没有

3.空格按键产生的间隙——中间一条虚线

总结：为了避免这个问题再次产生，再写代码时，不该有空格的地方不要加，要铲除干净，注意代码规范。

四、圆角

border-radius: 4px;

五、使用font-size：0，去掉inline-block元素之间的空隙

1、给父元素使用font-size:0; 2、给子元素使用上font-size:16px 用于解决inline-block元素换行的间隙

六、行内元素padding-top、margin-top;margin-top、margin-button没有用

改为display：inline-block；详情点击（第三条内容）

八、给a增加padding，点击范围扩大

如果设置background，再加上padding，color的的颜色会扩大。

九、docume.getElementsbyclassName、语义化标签做兼容。