CSS那些事儿

1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

1.块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
2.行内元素：span, strong, em, br, img , input, label, select, textarea, cite
区别
1. 块级元素占据整行，行内元素不占据整行，可以填充进一行时水平排开
  2.块级元素内部可以包裹块级和行内元素，而行内元素内部只能包裹行内元素
  3.块级元素默认宽度与浏览器宽度一样，与内容无关；行内元素宽度只与内容有关；
  4.行内元素设置width，height无效(可以设置line-height)
  margin上下无效左右有效，padding上下无效左右有效。

2.什么是 CSS 继承? 哪些属性能继承，哪些不能？

css继承：设置父级元素，子元素的样式自动和父元素样式一致。有些属性支持继承有些不支持
可以继承属性：

字体属性
font、font-family：规定元素的字体系列、font-weight、font-size、font-style：定义字体的风格
文本系列属性:
text-indent：文本缩进、text-align：文本水平对齐、line-height：行高、word-spacing、letter-spacing、text-transform：控制文本大小写、direction：规定文本的书写方向
color：文本颜色
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表布局属性：list-style-type、list-style-image、list-style-position、list-style
生成内容属性：quotes
光标属性：cursor

不可以继承属性：

display
文本类：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
盒子模型的属性：width、height、margin 、margin-XXX、border、border-XXX、。。。基本都不行
背景属性：都不行
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
声音样式属性

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

元素类型	居中方法
块级元素居中	margin： 0 auto;
行内元素居中	text-align : center;

4.单行文本溢出怎么办如何实现？

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

5.px em rem有什么区别？

. px 像素px是相对于显示器屏幕分辨率而言的
. em 相对于当前对象内文本的字体尺寸
. rem 相对于HTML根元素尺寸大小

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

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

设定字体大小和字体类型，因为有space如果没有引号，会按照两个元素处理
数字和字母代表unicode-对应宋体字体和微软雅黑字体

编码类题目：
1.效果1
2.效果2
3.效果3
4.关于画三角形

屏幕快照 2017-01-18 下午6.39.34.png

![ ![ ![ ![屏幕快照 2017-01-18 下午6.45.55.png](http://upload-images.jianshu.io/upload_images/4289237-d92daef57196606d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ] ](http://upload-images.jianshu.io/upload_images/4289237-33adc878eb710a92.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ](http://upload-images.jianshu.io/upload_images/4289237-209d979aca21103f.png?imageMogr2/auto- orient/strip%7CimageView2/2/w/1240)

5.效果5

最后编辑于：2017.12.05 06:57:25