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.关于画三角形

CSS那些事儿_第1张图片
屏幕快照 2017-01-18 下午6.39.34.png

CSS那些事儿_第2张图片
![ ![ ![ ![屏幕快照 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

你可能感兴趣的:(CSS那些事儿)