行内元素和块级元素
- 行内元素
常见的行内元素有(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 实现一个三角形
效果如下,同样可以对其它几个边进行相同调整,从而实现不同样式的三角形。
实现单行文本溢出加 ...
通过红框内的属性设置出单行文本溢出...效果
效果如下:
px, em, rem 的区别
- px像素(Pixel)是作为一个固定的像素单位,相对于显示器的分辨率而言的;
- em是作为一个相对长度单位,相对于其父元素的大小来确定自身大小;
- rem是作为一个相对长度单位,相对于其根元素的大小来确定自身大小;大多数浏览器都以支持rem,对于不支持的浏览器多写一个绝对单位的声明,font-size: 14px; font-size: .875rem;