CSS常见样式

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

块级元素:body, p, h1-h6,div,table,thead,tbody,th,tr,td,form,ul,ol,li,fieldset,hr,menu,header,main,section aside,foorer

行内元素:span,em,strong,input,label,select,button

  • 区别:
  1. 块级元素占据一整行,行内元素只占据它自身的宽度
  2. 块级元素可以设置宽和高,行内元素不可以设置
  3. 块级元素可以嵌套块级元素和行内元素,行内元素只能嵌套行内元素和文本
  4. 行内元素设置width无效,设置margin-left、margin-right和padding-left、padding-right有效
  5. 行内元素会在一行内排列,而块级元素会纵向排列

什么是 CSS 继承? 哪些属性能继承,哪些不能?

  • css继承:子元素会自称父元素的某些属性样式
  • 可继承的属性:
1.字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

2.文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
3.元素可见性

visibility

4.表格布局属性

caption-side、border-collapse、border-spacing、empty-cells、table-layout

5. 列表布局属性

list-style-type、list-style-image、list-style-position、list-style

6. 生成内容属性

quotes

7. 光标属性

cursor

其中所有元素可以继承的属性

cursor visibility

内敛元素可以继承的属性
1、字体系列属性

2、除text-indent、text-align之外的文本系列属性
  • 不可继承的属性
1. diaplay 规定元素应该生成的框的类型
2.文本属性
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
3. 盒模型的属性
width、height、margin 、margin-top、margin-right、margin-bottom、
margin-left、border、border-style、border-top-style、border-right-style、
border-bottom-style、border-left-style、border-width、border-top-width、
border-right-right、border-bottom-width、border-left-width、border-color、
border-top-color、border-right-color、border-bottom-color、border-left-color、
border-top、border-right、border-bottom、border-left、padding、padding-
top、padding-right、padding-bottom、padding-left
4. 背景属性

background、background-color、background-image、background-repeat、background-position、background-attachment

5.定位属性

float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

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

块级元素水平居中的设置方法:{margin:0 auto;}
行内元素的水平居中:要给包裹行内元素的块级父元素设置{text-align:center;}

用 CSS 实现一个三角形

三角形

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

给包裹文本的块元素设置

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

px, em, rem 有什么区别

  • px 固定像素
  • em 相对单位,是其父元素的倍数
  • rem 相对单位,是根元素的倍数

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

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

为页面的body元素设置字体的属性,字体大小为12px,行高为字体的1.5倍,字体,后面的英文表示用什么字体,首先采用tahoma字体,如果用户没有该字体,则使用arial字体,如果没有,则使用Hiragino Sans GB字体,以此类推,最后,如果都没有,则使用sans-serif,无衬线字体。

加引号的原因是字体的名字之间有空格,不加引号可能导致用户浏览器无法识别,产生乱码。

字体\5b8b\4f53代表字体的unicode码,unicode码全球通用,用该码表示字体是最保险的,获取该码的方式可以在开发者工具的console面板中输入escape指令,如下图:
![%u要换成](http://upload-images.jianshu.io/upload_images/3436795-b80e3eba8aae243a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

代码实现部分

效果一
效果二
效果三
三角形实现效果
效果四

你可能感兴趣的:(CSS常见样式)