css基础(三)
2017-02-23 本文已影响0人
赫鲁晓夫的玉米棒子
1. 行内元素与块级元素
常见块级元素
div
h1
h2
h3
h4
h5
h6
hr
p
ul
li
address
form
ul
ol
dl
hr
menu
table
fieldset
常见行内元素
a
span
img
em
strong
br
img
input
label
select
textarea
cite
行内元素与块级元素的特性
- 块级元素会充满整个父元素,可以设置宽度、高度,会计元素可以设置marging和padding。每个块级元素独占一行。
- 行内元素可以设置左右的maging。可以使用padding撑开行内元素的高度和宽度,但是不能影响父元素的高度和宽度。
- inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。。
2. CSS继承——哪些属性可以继承,哪些不能
css继承:父元素设置样式后,子元素的样式与父元素样式相同。
可继承元素:列表相关(list),文字相关(font),文本相关(text)
不可继承元素:display,width,padding,marging,height
3. 实现居中
块级元素居中:
设置宽度后,marging-left:auto;marging-right:auto;
行内元素居中:
使用代码:text-align:center
4. CSS实现三角形
将内容区width: 0;height: 0;
,再在元素的一条边上加上较粗的边框,即可显示如一个三角形的样子。
例
5. 单行文本溢出变为……
white-space: nowrap; 文本空间:不折叠
overflow:hidden; 超出部分:隐藏
text-overflow:ellipses; 文本超出:省略号
6. px em rem
px:像素,固定宽度,
em:相对单位,相对于父元素或自身设定的字体大小
rem: 相对于HTML(body)的字体大小
** 问题:**解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
两个单词表示一种字体时,使用引号包裹表示这两个单词一起解读。
'\5b8b\4f53'表示宋体,在国外查看该网站时,浏览器也许不能解读'宋体'中文字体。使用'\5b8b\4f53'能让浏览器正确解析。