块级元素和行内元素分别有哪些?动手测试并列出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
块级元素与行内元素的区别
- 块级可以包含块级和行内,行内只能包含文本和行内
- 块级占据一整行空间,行内占据自身宽度空间
- 宽高设置、内外边距的差异,行内元素设置设置宽高、内外边距上下无效(不影响其他元素)、左右有效
- 块级元素总是从新行开始,竖直排列而行内元素是水平排列
什么是 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编码