CSS基础样式
2018-12-18 本文已影响0人
原上的小木屋
什么是 CSS 继承?哪些属性能继承，哪些不能？
CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。
- 有继承性的属性：
- 字体系列属性
- 文本系列属性
- 元素可见性：visibility
- 表格布局属性：
- 列表属性：
- 设置嵌套引用的引号类型：quotes
- 光标属性：cursor
- 无继承的属性
- display
- 文本属性：vertical-align text-decoration
- 盒子模型的属性:宽度、高度、内外边距、边框等
- 背景属性：背景图片、颜色、位置等
- 定位属性：浮动、清除浮动、定位position等
- 生成内容属性:content、counter-reset、counter-increment
- 轮廓样式属性:outline-style、outline-width、outline-color、outline
- 页面样式属性:size、page-break-before、page-break-after
继承中比较特殊的几点
- a 标签的字体颜色不能被继承
-
<h1>-<h6>标签字体的大下也是不能被继承的
因为它们都有一个默认值
块级元素和行内元素分别有哪些？
- 块级元素（block-level）
div h1 h2 h3 h4 h5 h6 p hr
form ul dl ol pre table
li dd dt tr td th
- 行内元素（inline-level）
em strong span a br img
button input label select textarea
code script
区别与联系
- 块级元素可以包裹块级元素和行内元素，而行内元素只能包含行内元素
- 块级元素占据一整行空间，行内元素占据自身宽度空间
- 在宽高的设置、内外边距的设置上有一定的差异
- css属性宽高，只对块级元素设置生效，对行内元素设置无效
如何让块级元素水平居中？如何让行内元素水平居中?如何让 inline-block 元素水平居中？
- 块级元素
.center-children { margin: 0 auto; } - 行内元素，行内块元素。
.center-children { text-align: center; }
单行文本溢出加 ...如何实现?
white-space:nowrap不折行
overflow:hidden 溢出之后隐藏
text-overflow:ellipsis显示三个点
px, em, rem,vw 有什么区别
- px
- px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点
- em
- 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
- rem
- css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
- vw
- css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
解释下面代码的作用? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
这是css中font的简写写法。
- 代表body的字体大小12px，字体行高为默认行高的1.5倍，使用的字体为tahoma、arial、"Hiragino Sans GB"、宋体、sans-serif，依次从前向后选取
1.png
1.png
1.png
1.png
