1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
| 块级元素 | 含义 |
|---|---|
| <address> | information on author |
| <blockquote> | 定义块引用 |
| <button> | push button |
| <caption> | table caption |
| <dd> | definition description |
| <del> | deleted text |
| <div> | generic language/style container |
| <dl> | definition list |
| <dt> | definition term |
| <fieldset> | form control group |
| <form> | interactive form |
| <h1~6> | heading |
<hr> |
horizontal rule |
| <iframe> | inline subwindow |
| <ins> | inserted text |
| <legend> | fieldset legend |
| <li> | list item |
| <map> | client-side image map |
| <noframes> | HTML5 不支持 <noframes> 标签。为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。 |
| <noscript> | alternate content container for non script-based rendering |
| <object> | generic embedded object |
| <ol> | ordered list |
| <p> | paragraph |
| <pre> | preformatted text |
| <table> | table |
| <tbody> | table body |
| <td> | table data cell |
| <tfoot> | table footer |
| <th> | table header cell |
| <thead> | table header |
| <tr> | table row |
| <ul> | unordered list |
| 行内元素 | 含义 |
|---|---|
| <a> | anchor |
| <abbr> | 缩写形式 |
| <acronym> | 首字母缩写 |
| <b> | bold text style |
| <bdo> | 覆盖默认的文本方向 ltr / rtl |
| <big> | large text style |
<br> |
forced line break |
| <button> | push button |
| <cite> | citation |
| <code> | computer code fragment |
| <del> | deleted text |
| <dfn> | instance definition |
| <em> | emphasis |
| <i> | italic text style |
| <iframe> | inline subwindow |
| <img> | Embedded image |
| <input> | form control |
| <ins> | inserted text |
| <kbd> | 定义键盘文本，例：键入 <kbd>quit</kbd> 退出程序 |
| <label> | form field label text |
| <map> | client-side image map |
| <object> | generic embedded object |
| <q> | short inline quotation |
| <samp> | sample program output, scripts, etc. |
| <select> | option selector |
| <small> | small text style |
| <span> | generic language/style container |
| <strong> | strong emphasis |
<sub> |
subscript |
<sup> |
superscript |
| <textarea> | multi-line text field |
| <tt> | teletype or monospaced text style |
| <var> | instance of a variable or program argument |
块级元素：
1.块级元素一般可嵌套块级元素或行内元素；
2.每个块级元素默认占据一整行宽（float浮动除外）
3.width,height ,margin,padding等均设置有效；
4.width默认充满一行；
行内元素：
1.只能包含文本或内联元素，和其他元素都在一行上；
2.设置高度width，height 无效，可以通过line-height来设置。
3.设置margin 只有左右margin有效，上下无效。
4.设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容/自身所占空间大小没影响
2.什么是 CSS 继承? 哪些属性能继承，哪些不能？
css继承：指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性
不可继承的：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。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
继承性的3种特殊性：
a 标签的字体颜色不能被继承，a标签是有一个默认的 color: -webkit-link;字体颜色属性，给父元素设置颜色是不能改变a标签字体的颜色;
h标签字体的大下也是不能被继承的，h标签中也有一个默认的默认的font-size: xx em;字体大小属性;
div 标签的高度如果不设置由内容来决定（没有内容高度为0），宽度默认由父元素继承过来;
3.如何让块级元素水平居中？如何让行内元素水平居中?
未脱离文档流：
块级元素水平居中：margin：0 auto；
行内元素水平居中：text-align=center;
脱离文档流的：
1.知道宽高的：利用负边距进行居中；
2.不知道宽高：top:50%;left:50%; transform:translate(-50%,-50%);
注：IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
4.用 CSS 实现一个三角形
利用border属性
css:
.triangle{
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top: 50px solid green;
}
html:
<div class="triangle"></triangle>
结果：
Paste_Image.png
5.单行文本溢出加 ...如何实现?
white-space: nowrap; /*强制不换行*/
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。*/
| white-space | 含义 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。类似 HTML 中的 <pre> 标签。 |
| nowrap | 强制不换行 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 从父元素继承 white-space 属性的值。 |
| overflow | 含义 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，其余内容是不可见的。 |
| scroll | 内容被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 应该从父元素继承 overflow 属性的值。 |
注：如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
| text-overflow | 含义 |
|---|---|
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| clip | 修剪文本 |
| string | 使用给定的字符串来代表被修剪的文本。 |
6.px, em, rem 有什么区别
| 单位 | 含义 |
|---|---|
| px | 像素,固定单位 |
| em | 相对单位，相对于父元素字体大小 |
| rem | 相对单位，相对于根元素(html)字体大小 |
7.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
作用：设置字体样式，大小12px,1.5倍行高。5种字体，从第一个开始选取，前一个本地没有则选择下一个，依次选择，若都没有选择浏览器默认样式；
加引号：因为font-family中的英文名称中有空格，加引号为了浏览器的正确识别；
\5b8b\4f53：将字体名称用Unicode来表示,\5b8b\4f53转换成中文字体为宋体；
注：打开控制台 escape('中文字体名称')，把 %u替换成 \，可以得到相应的字体对应的Unicode；
网友评论