知识总结:对html及CSS中对button的类进行定义,MarsCode AI刷题的过程中总结的新知识点,梳理分析 | 豆包MarsCode AI刷题

90 阅读2分钟

btn和primary是两个类名(class),它们被用来定义和区分不同样式的按钮。

btn类:

这个类定义了一个通用的按钮样式,适用于所有使用btn类的HTML元素。

通过CSS,btn类设置了按钮的显示方式、内边距、外边距、文本对齐、鼠标指针样式、圆角、边框和背景颜色等样式属性。

primary类:

这个类是用来定义一个特殊样式的按钮,通常用于表示主要或重要的操作。

primary类继承了btn类的所有样式,但通过CSS覆盖了文本颜色和背景颜色,使其与普通的btn按钮有所区别。

 

普通按钮

主要按钮

 

 

这样,第一个按钮将具有btn类的样式,而第二个按钮将具有btn primary类的样式,即primary类的样式会覆盖btn类的样式,使得第二个按钮的文本颜色为白色,背景颜色为#218de6。

在HTML中,你可以将这些类应用于元素,以创建具有不同外观的按钮。

 

内联块级元素(inline-block)是CSS中的一个显示属性,它结合了内联元素(inline)和块级元素(block)的特点。

内联元素:内联元素不会独占一行,而是在一行内逐个显示。它们的宽度和高度由内容决定,并且不能设置宽度和高度。内联元素的常见例子有等。

块级元素:块级元素会独占一行,并且可以设置宽度和高度。块级元素的常见例子有

等。

内联块级元素的特点如下:

可以设置宽度和高度:与内联元素不同,内联块级元素可以设置宽度和高度。

不会独占一行:与块级元素不同,内联块级元素不会独占一行,而是在一行内逐个显示。

可以设置内边距(padding)和外边距(margin):内联块级元素可以设置内边距和外边距,这使得它们在布局上更加灵活。

默认情况下,垂直方向上的对齐方式是基线对齐:这意味着如果内联块级元素的内容高度不一致,它们会以基线对齐。

普通按钮

主要按钮

  .btn {     display: inline-block;     padding: .36em .8em;     margin-right: .5em;     line-height: 1.5;     text-align: center;     cursor: pointer;     border-radius: .3em;       background: #c78484;     color: #333;   }   .btn.primary {     color: #ce1d1d;     background: #000204;   }

 

对于这段代码我的理解:首先用按钮类btn    定义第一个按钮

其次利用 btn primary类定义第二个按钮,可继承第一个按钮所带有的性质

其次在style中对上述两个类进行解=定义解释,其中定义了大小,边框,是否大带有圆角等等性质,btn.primary类继承了btn中的一部分性质,更加方便