CSS常见样式1

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

• 块级元素举例：

div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
menu – 菜单列表
ol – 有序表单
p – 段落
table – 表格
ul – 无序列表
……

• 行内元素举例：

a – 锚点
big – 大字体
br – 换行
em – 强调
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
u – 下划线
……

• 二者的区别：

一般行内元素只能包含数据和其他行内元素，块级元素可以包含行内元素和自身／其他块级元素。

  
  


  

    

      
hello
      
hello
    
    
        
            hello
        
        world
      
  

默认情况下块级元素占用一整行，而行内元素占据自身宽度空间。

  
  
  


  

    hello
  
  
    hello
  

测试01.png

宽高只对块级元素设置生效，对行内元素无效。

  
  
  


  

    hello
  
  
    hello
  

测试02.png

块级元素可设置padding和margin，行内元素只能设置padding及左右margin，且设置padding时左右padding推开距离，上下padding会延伸出去，但不会增加上下两行间的距离。

  
  
  


  

    hello
  
  

    hello
  
  
    hello
  
  
    hello
  
  

    hello
  

测试03.png

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

• 每个 CSS 属性定义 的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
• 当元素的一个 继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值 computed value 。只有文档根元素取该属性的概述中给定的初始值 initial value（这里的意思应该是在该属性本身的定义中的默认值）。
• 当元素的一个 非继承属性 ( reset property ) 没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。
• inherit 关键字 用于显式地指定继承性，可用于继承性/非继承性属性。

能继承的属性

字体相关属性：font,font-family,font-weight,font-size,font-style,font-stretch,font-size-adjust
文本相关属性：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
页面样式属性：page,page-break-inside,window,orphans
声音样式属性：speak,speak-punctuation….

不能继承的属性

display
文本属性：vertical-align,text-shadow,text-decoration,white-space,unicode-bidi
盒子模型相关属性：width,height,margin相关属性,border相关属性,padding相关属性
背景相关属性：background,background-XXX
定位属性：float,clear,position,top,right,bottom,left,min-width,min-height,max-width,max-height,overflow,clip,z-index
生成内容属性：content,counter-reset,counter-increment
轮廓样式属性：outline-style,outline=width,outline-color,outline
页面样式属性：size,page-break-before,page-break-after
声音样式属性：pause-before,pause-after,pause,cue-before,cue-after,cue,play-during

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

• 常用方法：
  块级元素居中：对块级元素设置 margin:x auto; (上下margin随意）
  行内元素居中：对行内元素的父元素设置 text-align:center;
• 方法总结：CSS水平居中与垂直居中的总结

4、用 CSS 实现一个三角形

• 思路：块级元素的边框不仅可以分别设置大小、圆角，还可以分别设置颜色而出现四个三角形，隐藏部分三角形就可以得到单独的三角形。

测试04.png

预览链接

5、单行文本溢出加 ...如何实现?

单行文本溢出的条件

• 内容足够溢出：设置容器宽度或内容足够多；
• 不换行：内容全部在一行；
• 溢出后隐藏；
• 设置隐藏的样式为“…”；

  
  
  


  

    
      单行文本溢出，单行文本溢出，单行文本溢出
    
  

测试05.png

6、px, em, rem 有什么区别

常用单位总结

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

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

• 代码作用
  该段代码设置了body的font样式，字体大小为12px，行高是字体1.5倍的像素值，后面则是第一到第五字体，用逗号隔开，如果用户浏览第一字体没有，则查询第二字体有没有，以此类推，如果都没有则采用系统默认字体；
• 字体为什么要加引号?
  因为采用中文或者英文字体有空格时，不加引号可能导致用户浏览器不能识别字体，产生乱码；
• 字体里的数字符号代表什么?
  代表字体的Unicod码，获得该码的方式可以在网上查找，或者在开发者工具。

8、代码效果

• 8-1
• 8-2
• 8-3
• 8-4
• 8-5