CSS常见样式及属性-1

行内元素和块级元素

• 行内元素
  常见的行内元素有（a、span、img、input、label、em、strong、button、code、br、select、textarea、script）
• 行内元素只能包含文本和行内元素
• 行内元素不能设置宽高，不过可以设置行高
• 行内元素根据自身宽度占用空间
• 行内元素设置内边距时左右有效，上下内边距会撑开，但不会影响其他元素的位置；设置外边距时，只对左右两边有效。
• 块级元素
  常见的块级元素有（div、p、h1~h6、form、li、ul、ol、dl、table、hr、
  dd、dt、tr、td、th）
• 块级元素内可以包含块级元素也可以包含行内元素
• 块级元素可以设置宽高
• 块级元素占据一整行的空间
• 块级元素可以设置内外边距，在设置外边距的时候，上下两个块级元素会出现外边距重叠合并的情况

CSS继承，那些可以继承哪些不可以继承

• color属性可以继承；
• border属性不会继承，大多数框模型属性（内外边距、背景、边框）都不能继承；注意，继承的值没有特殊性

如何分别让块级元素和行内元素水平居中

• 对于块级元素
  通过设置width:0px; margin： 0px auto;即可实现水平居中
• 对于行内元素
  通过设置在其父元素下设置text-align:center;即可该行内元素实现水平居中

用 CSS 实现一个三角形

图片.png

效果如下，同样可以对其它几个边进行相同调整，从而实现不同样式的三角形。

图片.png

实现单行文本溢出加 ...

通过红框内的属性设置出单行文本溢出...效果

图片.png

效果如下：

设置前

设置后

px, em, rem 的区别

• px像素（Pixel）是作为一个固定的像素单位,相对于显示器的分辨率而言的；
• em是作为一个相对长度单位，相对于其父元素的大小来确定自身大小；
• rem是作为一个相对长度单位，相对于其根元素的大小来确定自身大小；大多数浏览器都以支持rem，对于不支持的浏览器多写一个绝对单位的声明，font-size： 14px; font-size: .875rem;

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

图片.png