CSS常见样式

块级元素和行内元素分别有哪些?动手测试并列出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

块级元素与行内元素的区别

  1. 块级可以包含块级和行内,行内只能包含文本和行内
  2. 块级占据一整行空间,行内占据自身宽度空间
  3. 宽高设置、内外边距的差异,行内元素设置设置宽高、内外边距上下无效(不影响其他元素)、左右有效
  4. 块级元素总是从新行开始,竖直排列而行内元素是水平排列

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

继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中(注意一点,这种继承来的属性优先级是最低的(它起的就是一个默认值的作用)有些属性能继承,也有些属性是不能继承。
css样式表属性可以继承的有如下:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

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

块级元素相对与父元素居中margin:0 auto
行内元素居中text-algin:center

用 CSS 实现一个三角形

.t1{
height:0;
width:0px;
border-top:solid 20px red;
border-left:solid 20px transparent;
border-right:solid 20px transparent;
border-bottom:solid 20px blue;
}
.t2{
height:0;
width:0px;
border-top:solid 20px red;
border-left:solid 20px transparent;
border-right:solid 20px transparent;
border-bottom:solid 20px transparent;
}

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

.card > h3{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

px, em, rem 有什么区别

  • px: 固定单位
  • em: 相对单位,相对于父元素字体大小 相当于百分比
  • rem: 相对单位,相对于根元素(html)字体大小

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

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

设置body的字体如下 原始大小12px,防缩1.5倍实际大小18px
设置font-family为tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
从前到后如果前面的没有则选择后面的
'Hiragino Sans GB'加引号的原因是中间有空格,防止认为是两个参数
'\5b8b\4f53'是unicode表示黑体
在 CSS 中设置字体时,直接写字体中文或英文名称浏览器都能识别,直接写中文的情况下编码(GB2312、UTF-8 等)不匹配时会产生乱码。保险的方式是将字体名称用Unicode来表示
宋体 | SimSun | \5B8B\4F53 黑体 | SimHei | \9ED1\4F53 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
打开控制台 escape('微软雅黑'),把 %u替换成 \ ,即可获取对应Unicode编码

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

推荐阅读更多精彩内容

  • 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素:div h1 h2 h3 h4 h...
    _李祺阅读 1,526评论 0 0
  • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别。 常见的块级元素和行内元素: 块级元素:h/p/d...
    饥人谷_tanfei阅读 1,810评论 0 0
  • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素 行内元素 块级元素与行内元素的区别块级可...
    姚小帅阅读 1,513评论 1 1
  • 一、块级元素和行内元素分别有哪些?测试4条以上的特性区别。 1、块级元素能包含块级元素和行内元素,而行内元素只能包...
    青鸣阅读 2,256评论 0 0
  • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 block level inline-level区...
    HaveSea阅读 3,118评论 0 0

友情链接更多精彩内容