1. 块级元素和行内元素
常见的块级元素
div,h1~h6,p,ul,ol,li,dt,dd,form,hr还有html5中新增的header,footer,section,article等
常见的行内元素
span,img,a,input,label(增大控件的触发范围),selcet,button,textarea,em,strong等
块级元素的特性:
- 块级元素都是独占一行
- 块级元素可以设置宽高
- 块级元素可设置边距
- 块级元素可包含块级元素、行内元素和文本
行内元素的特性:
- 行内元素并排排列,一行的宽度不够才会换行
- 行内元素不可设置宽高,
- 行内元素不可设置上下边距(padding和margin),左右边距可以
- 行内元素只能包含行内元素和文本
2. css继承,可以继承的属性和不能继承的属性
css继承是指不给元素设置样式,元素与父元素保持一致的样式,我们称这些样式属性发生了继承。
可继承的属性:
- 字体属性
font、font-family
规定元素的字体系列、
font-weight、font-size、font-style
定义字体的风格 - 文本系列属性
text-indent
文本缩进
text-align
文本水平对齐
line-height
行高
word-spacing、letter-spacing
文本间隔
text-transform
文本大小写
direction
文本的书写方向
color
文本颜色 - 列表相关的属性:
list-style-image, list-style-position,list-style-type, list-style
等
不可继承的属性:
display,margin,border,padding,background,width,height,min-height
max-height,min-width,max-width,overflow,position,left,right,top,bottom
z-index,float,clear,table-layout,vertical-align等
3.块级元素和行内元素的居中
块级元素居中可对其设置margin:0 auto
即可居中
行内元素居中可对其父元素设置text-algin:center
即可居中
4.单行文本溢出用...代替
单行文本用y溢出用...代替的 代码如下:
p{
width:100px;
white-space:nowrap; /*规定段落中的文本不进行换行*/
overflow:hidden;
text-overflow:ellipsis;
}
5.px em rem的区别
- px是固定单位,像素单位,1px即一像素;用px设置字体大小,比较精确;
- em是相对单位,相对于父元素所设置的字体大小,1em即父元素字体大小的1倍;
- rem也是一个相对单位,与em不同的是rem是基于根元素的,html中即html
6.实例
body{
font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
上面一段代码详细写法是
body{
font-size:12px;
line-height:1.5;
font-family:tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
加引号是因为字体中出现了空格,如果不加引号,则会被误认为是多个字体,\5b8b\4f53 是字体的unicode编码,表示宋体,对于中文字体,使用字体编码这种方式设置能更有效的让浏览器解析到正确的字体。
网友评论