CSS 常见样式

块级元素和行内元素

块级元素

HTML（超文本标记语言）中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。MDN

div，atricle，ol，ul, p, audio, footer, form, h1, h2, h3, h4, h5, h6, header, hr, video等。

行内元素

一个行内元素只占据它对应标签的边框所包含的空间。行内元素

b, i, code, img, br, button, input, label, select, textarea, span, strong, em等

区别

一般情况下，行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
格式
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

块级元素会独占一行，默认情况下宽度自动填满其父元素宽度。

行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

行内元素：

设置宽度width 无效。

设置高度height 无效，可以通过line-height来设置。

设置margin 只有左右margin有效，上下无效。

设置padding 只有左右padding有效，上下则无效。范围是增大了，但是对元素周围的内容是没影响的。

实例：

block

CSS 继承

每个 CSS 属性定义的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

当元素的一个继承属性（inherited property ）没有指定值时，则取父元素的同属性的计算值 computed value 。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。MDN

不可继承的

盒模型-布局
margin, border, padding
width, max-width, min-width
height, max-height, min-height

定位
float, clear, overflow
position (top,right,bottom,left)
z-index

所有背景属性
background (color,image,position)

文本属性
vertical-align (垂直居中：行内、替换元素)
text-decoration (文本属性)
text-shadow (文本阴影)
white-space (对空白字符的处理)
unicode-bidi (css处理文本方向)

可继承的

文本属性
font(size,weight,family)
line-height
text-indent
text-align
word-spacing
letter-spacing
text-transform
direction(文字方向)

其他
color
cursor

水平居中

块级元素

块级元素 width 有值时

div{
    margin: 0 auto;
}

否则块级元素的宽度会被拉伸为父级容器的宽度

行内元素

设置 element{text-align: center;}

CSS 实现三角形

div{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid colors;
}

文本溢出...实现

单行文本溢出：

text-overflow: ellipsis;

p {
white-space: nowrap;   //不换行
overflow: hidden;      //溢出隐藏
text-overflow: ellipsis;  //溢出显示...
}

px, em, rem

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小。

em 的使用是相对于其父级的字体大小的，em的值并不是固定的。不建议使用。

rem 始终是基于根元素 html 的。建议使用。

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

body 字体大小为 12px ，line-height 为1.5 * 12px

后面就是 font-family , 通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。属性的值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体。

\5b8b\4f53 是宋体。

中文字体的Unicode编码表

一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误。

字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。
MDN

一般都不使用中文名称，而是使用英文名称，主要是规避乱码的风险。还有一些中文字体，直接使用中文名称作为CSS font-family的属性值是没有效果的，如“思源黑体”， “兰亭黑体”等，需要使用对应的英文字体名称才可以。张鑫旭

CSS 常见样式