块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
块级元素：div、from、table、h1~h6、p、hr、ul、dl、ol、pre、tr、td、th、dd、dt、li
行内元素：a、img、span、em、i、strong、button、input、select、label、textarea、script、code
特性区别：
1.块级元素独占一行，默认情况下，其宽度自动填满其父元素宽度。行内元素不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。
2.块级元素可以设置宽高，设置了宽度还是独占一行，行内元素设置宽高无效。
3.块级元素可以设置水平和垂直方向的margin、padding 。行内元素只有设置水平方向的margin、padding有效。垂直方向的无效。
4.块级元素可以包含块级元素和行内元素，行内元素只能包含行内元素和文本。
5.块级元素通过display：inline可以变成行内元素。行内元素可以通过display：block变成块级元素。
什么是 CSS 继承? 哪些属性能继承，哪些不能？
css的继承指的是特定的CSS属性向下传递到子孙元素。
比如：
Paste_Image.png
body设置color:red;
那么ul li也有color:red的属性。
可以继承的属性:
border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
quotes
tab-size
text-align
text-align-last
text-decoration-color
text-indent
text-justify
text-shadow
text-transform
visibility
white-space
widows
word-break
word-spacing
word-wrap
不可继承的属性：
display
margin
border
padding
background
height
min-height
max-height
width
min-width
max-width
overflow
position
left
right
top
bottom
z-index
float
clear
table-layout
vertical-align
page-break-after
page-bread-before
unicode-bidi
如何让块级元素水平居中？如何让行内元素水平居中?
块级元素水平居中：
设置宽度width,和margin:0 auto;（宽度一定要设置）
例如：
Paste_Image.png
Paste_Image.png
行内元素水平居中：
给包裹行内元素的父级元素设置text-align:center;
列如：
Paste_Image.png
Paste_Image.png
用 CSS 实现一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tri {
width: 0;
height:0;
border-top: 30px solid #2d97fa;
border-bottom: 30px solid transparent;
border-left:30px solid transparent;
border-right: 30px solid transparent;
}
</style>
</head>
<body>
<div class="tri">
</div>
</body>
</html>
向下的三角形，
Paste_Image.png
单行文本溢出加 ...如何实现?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 150px;
border: 1px solid;
}
.box p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
<p>啦啦啦啦啦啦啦啦阿里啦啦啦啦啦啦阿拉啦啦啦啦啦啦了</p>
</div>
</body>
</html>
Paste_Image.png
px, em, rem 有什么区别
px:固定单位，不会随着父元素的变化而变化。
em:相对单位，相对于父元素字体大小，比如：p的父元素div的font-size:12px;p的font-size：2em，那么p的字体大小就是24px.
rem：相对单位，相对于根节点（html）字体的大小。
解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
Paste_Image.png
代码作用：
body中的font-size是12px，行高为字体像素的1.5倍，优先使用tahoma字体，如果浏览器和系统都没有此字体，就使用arial，以此类推，不同的字体用逗号隔开。
加引号浏览器才会解析成一个字体，如果不加引号会被当成两个字体。
字体里\5b8b\4f53代表的是换成Unicode编码的表示方式的宋体。
网友评论