CSS常见样式
2017-03-17 本文已影响92人
好奇而已
任务8
1.块级元素和行内元素有哪些+区别
2.什么是 CSS 继承? 哪些属性能继承，哪些不能
3. 如何让块级元素水平居中？如何让行内元素水平居中?
4. 用 CSS 实现一个三角形
5. 单行文本溢出加 ...如何实现?
6 px, em, rem 有什么区别
7.CSS编程5个实例
1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别
- 块级元素:
Paste_Image.png
- 行内元素
- 补充可变元素
Paste_Image.png
行内元素与块级元素对比
- 行内元素只能包含数据和其他行内元素(它也包含块级元素但是不推荐容易出bug)。
而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
- 如果你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block;
- 块级元素可以用样式控制其高、宽的值。
行内元素不可以控制宽和高，除非你想将它转变成为块级元素。它的宽和高，是随标签里的内容而变化。
- 行内元素会在一条直线上排列，都是同一行的，水平方向排列.
块级元素各占据一行，垂直方向排列,块级元素从新行开始结束接着一个断行。- 盒模型上，块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果。
2.什么是 CSS 继承? 哪些属性能继承，哪些不能？
-
CSS继承:
1.优先级从高到低依次为：网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式
2.对继承的元素来说，子元素自身的样式优先级高于从父级继承来的样式
3.当元素的一个 继承属性没有指定值时，则取父元素的同属性的 计算值,只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性本身的定义中的默认值）。
- 当元素的一个 非继承属性 没有指定值时，则取属性的初始值该值在该属性的概述里被指定。
CSS哪些属性能继承:
所有元素可继承：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。
CSS哪些属性不能继承:
不可继承的：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。
3. 如何让块级元素水平居中？如何让行内元素水平居中?
-
行内或类行内元素（比如文本和链接）
行内元素居中:
只需使用text-align: center; -
块级元素:
（前提是已经为元素设置了适当的 width
宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）.没设置宽度就自动拉伸,不存在居中
例子: -
.center-me { margin: 0 auto;}
(这里设置左右外边距为0, 上下自动拉伸,其实这里0可以是任意数字,不影响)
4. 用 CSS 实现一个三角形
代码
.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="pp">
</div>
</body>
</html>
.css文件
.pp{
width:0;
height:0;
border:20px solid transparent;
border-bottom:20px solid red;
}
结果
Snip20170315_247.png
4. 单行文本溢出加 ...如何实现?
.pp{
/*实现这行显示...*/
width:110px;
white-space:nowrap;/*规定段落中的文本不进行换行*/
overflow:hidden;/*设置hidden内容会被修剪，并且其余内容是不可见的。*/
text-overflow:ellipsis;/*ellipsis显示省略符号来代表被修剪的文本。*/
}
Paste_Image.png
5. px, em, rem 有什么区别
- px像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
- IE无法调整那些使用px作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
- EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点
- em的值并不是固定的；
- em会继承父级元素的字体大小。
- REM
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 -
px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
6. 解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
- 解释:
- body里元素字体大小设置为12px, line-height行高为之前1.5的倍,字体样式为tahoma,系统里要是没装这种字体就采用arial样式,没有找到就往后推,直到找到为止,都没有找到,就用系统默认样式sans-serif.
- 加引号:因为单词间有空格,不加会误认为是多个单词,误认为多个样式.其实就这代表一种样式.
-
'\5b8b\4f53':汉字宋体的unicode编码
7. CSS编程5个实例
本节花费:3.5 Day
