CSS基础样式

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

CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。

  • 有继承性的属性:
  1. 字体系列属性
  2. 文本系列属性
  3. 元素可见性:visibility
  4. 表格布局属性:
  5. 列表属性:
  6. 设置嵌套引用的引号类型:quotes
  7. 光标属性:cursor
  • 无继承的属性
  1. display
  2. 文本属性:vertical-align text-decoration
  3. 盒子模型的属性:宽度、高度、内外边距、边框等
  4. 背景属性:背景图片、颜色、位置等
  5. 定位属性:浮动、清除浮动、定位position等
  6. 生成内容属性:content、counter-reset、counter-increment
  7. 轮廓样式属性:outline-style、outline-width、outline-color、outline
  8. 页面样式属性: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

区别与联系

  1. 块级元素可以包裹块级元素和行内元素,而行内元素只能包含行内元素
  2. 块级元素占据一整行空间,行内元素占据自身宽度空间
  3. 在宽高的设置、内外边距的设置上有一定的差异
  4. 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 有什么区别

  1. px
  • px就是pixel的缩写,意为像素。px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点
  1. em
  • 参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
  1. rem
  • css3新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。
  1. 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,依次从前向后选取

一些小demo

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,455评论 2 66
  • 什么是 CSS 继承?哪些属性能继承,哪些不能? 提示:写个demo来说明 继承就是子元素继承了父元素的CSS样式...
    礼知白阅读 3,097评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,703评论 1 92
  • CSS继承 一、什么是CSS继承 CSS继承是指我们设置父级CSS样式时,父级及以下的子级都具有此属性。 二、不可...
    我不信这样也重名阅读 1,328评论 0 0
  • 什么是本无所谓有,本无所谓无的 悲惨世界的冉·阿让,为了生活穷骥一命,选择的是人性社会还是方圆法规,如果说经济政治...
    垚弋阅读 1,288评论 0 1

友情链接更多精彩内容