CSS常见样式
2017-05-15 本文已影响0人
李博洋li
1、块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
- 块级元素
div，p，ul，li，ol，body，form，article，nav，header，footer，aside，main，table，thead，tbody，tfoot，tr，h1~h6
- 行内元素
img，span，a，input，label，em，strong，select，i，textarea，button
- 区别
- 块状元素独占一行，即使还有空余位置也独占一行；行内元素是可以横向排开的，当没有位置的时候才会折行。
- 块状元素可以设置宽高，行内元素的大小是由其内容撑开的，设置宽高对行内元素没有效果。
- 设置margin和padding时，块状元素全部生效，行内元素只有左右生效，上下没有效果；但是border都是生效的。
- 块状元素可以包含块状元素和行内元素；行内元素只能包裹行内元素和文本。
2、什么是 CSS 继承? 哪些属性能继承，哪些不能？
CSS继承即父元素设置了某属性，那么其子元素是可以遵循这些规定的。
- 可以继承的属性：font-size，font-family，font-weight，color，box-sizing，opacity，text-align，text-indent，line-height，letter-space，visibility，cursor，border-collapse
-不能继承的属性：display，box-shadow，border-radius，white-space，background，width，height，margin的一切，padding的一切，border的一切，float，position，top，left，right，right，vertical-align，min-width，outline，table-layout，clear
3、如何让块级元素水平居中？如何让行内元素水平居中？
- 块状元素：
{margin：0 auto} - 行内元素：
{text-align:center}
4、做一个三角形~
预览地址 http://js.jirengu.com/tazenihedi/2/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三角形</title>
<style>
.one{
width:0;
height:0;
border-top:40px solid #0f0;
border-left:30px solid transparent;
border-right:30px solid transparent
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
5、单行文本溢出加 ...如何实现？
有三个固定的搭配来实现溢出隐藏：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
6、px, em, rem 有什么区别？
px是固定单位：像素；
em是相对单位：相对于父元素的字体大小来定义，例如：父元素{font-size:14px;}，那么子元素的1em=14px;2em=28px;PC端和移动端都有使用。
rem是相对单位：相对于文档的根节点大小来定义，例如html{font-size:20px;}；那么子元素的.8rem=16px; 2rem=40px;移动端非常常见。
7、解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么？
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
解释：给body定义的关于字体的样式：
字体大小为12px；line-height设置为字体的1.5倍即18px；后面的全部是针对字体的设置，每种字体用逗号隔开。如果用户的电脑中如果没有第一种字体，那么就取第二种字体，如果前两种都没有，那么就取第三种字体，以此类推。第三种用引号包起来是因为中间有空格，如果不这么做，浏览器会认为这是两个字体格式；第四种用字符代替是因为防止用户电脑中识别乱码，可能是因为css编码和浏览器编码不同导致。这个是使用unicode来进行识别的，是全球通用的。可以保证浏览器一定会识别这个字体。
