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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,743评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 6,256评论 1 4
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,927评论 0 6
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,610评论 0 5

友情链接更多精彩内容