css基础样式-1

2017-10-19  本文已影响0人  礼知白

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

提示：写个demo来说明

继承就是子元素继承了父元素的CSS样式的属性。
  1. 优先级从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式。
  2. 对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式。
  3. 当元素的一个 继承属性没有指定值时，则取父元素的同属性的计算值,只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性本身的定义中的默认值）。
  4. 当元素的一个 非继承属性 没有指定值时，则取属性的初始值该值在该属性的概述里被指定。
什么属性能继承？

1.字体：family，size，weight，line-height
2.文本：letter-spacing，word-spacing，text-align, text-indent
3.列表：list-style-type
4.颜色：color，ps：a标签不能继承父元素的字体颜色，原因是a标签自己有默认字体颜色，会覆盖掉- 继承自父元素的字体颜色；

什么属性不能被继承？

1.display
2.float
3.padding和margin
4.背景相关，比如颜色图片等

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse

范例:
image

块级元素和行内元素分别有哪些？

提示：列出4条以上的特性区别

行内元素：只占据它对应标签的边框所包含的空间的元素。默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
inline元素举例：em strong span a br img button input label select textarea code script 等
块级元素：占据其父元素（容器）的整个空间，因此创建了一个“块”；通常浏览器会在块级元素前后另起一个新行。
block元素举例：div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th等

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

两者区别：
  1. 块级可以包含块级和行内，行内只能包含文本和行内。
  2. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
    inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  3. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    inline元素设置width,height属性无效。（部分替换元素（replaced elements）例如img是可以设置宽高）
  4. block元素可以设置margin和padding属性。
    inline元素padding，margin上下的值设置无效，但左右有效；

inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

如何让块级元素水平居中？如何让行内元素水平居中?如何让 inline-block 元素水平居中？

块级元素：
设置margin: 0 auto（实际为：margin: 0 auto 0 auto）可达到居中目的。一个有特定宽度的元素，若左右边距为auto，浏览器会取它的容器和该容器的宽度之差，除以2，作为该元素的左边距和右边距，左右边距相等，就实现了居中。
行内元素：
需要通过父容器实现，给父元素添加text-align:center,此时父元素必须是块级元素
inline-block元素：
用display: block将元素显示为块级元素,再给添加样式margin: 0 auto 0 auto
inline-block也可以对其父元素使用 text-align:center。

单行文本溢出加 ...如何实现?

在css对应部分添加样式
white-space: nowrap:让该行不换行
overflow: hidden:隐藏多余的
text-overflow: ellipsis;变成 ...

px, em, rem,vw 有什么区别

px

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

  1. IE无法调整那些使用px作为单位的字体大小；
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
  3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
em特点

  1. em的值并不是固定的；
  2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意：

  1. body选择器中声明Font-size=62.5%；
  2. 将你的原来的px数值除以10，然后换上em作为单位；
  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
    也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

vw

相对于视区（浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小）的宽度。视区被均分为100单位的vw。

h1 {
    font-size: 8vw;
}
/* 如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100 */
px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
参考：http://www.runoob.com/w3cnote/px-em-rem-different.html

解释下面代码的作用? 字体里\5b8b\4f53代表什么?

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

对象为body元素;
设置字体的大小是12px，行高是字体大小的1.5倍，浏览器查找用户本地的字体库，依次选择（优先级从高到低）：tahoma字体，arial字体，Hiragino Sans GB字体，\5b8b\4f53\，sans-serif。

\5b8b\4f53为Unicode码，代表宋体。使用unicode码是为避免兼容性。
小技巧：在浏览器页面审查元素，点Console，输入escape('黑体/宋体```')来转换成unicode码。
问题

实现如下效果

上一篇下一篇

猜你喜欢

热点阅读