css样式1

2017-05-05  本文已影响0人  LeeoZz

块级元素:div,p,h1~h6,form,table,ul,ol,li,blockquote等;
行内元素:em,span,img,a,q,textarea,input等。

特性区别;
1.块级元素无论大小,都会占据一整行的空间,而行内元素则占据其自身大小的空间。从表现上看,块级元素内容前后有换行,行内元素内容与其包含元素的其余内容放在一起;
2.width和height对行内元素不起作用;
3.块级元素可嵌套块级元素和行内元素,而行内元素不能嵌套块级元素;
4.块级元素可以设置margin和padding,行内元素只能设置左右margin和padding。

文档树和家族树一样,有父代和子代。css继承指的是特定的css属性从父代向下传递到子孙后代的现象。
能被继承的属性:font,color,font-family,font-size,font-style,font-weight,line-height,text-decoration,text-transform等。
不能被继承的属性:margin,padding,border,background,bottom,float,clear,display等。

块级元素水平居中可以使用下面的属性:

.box {
    margin: 0,auto;
}

实际上是下面属性的合并:

.box {
   margin-left: auto;
   margin-right: auto;
}

行内元素的居中可以用下面属性:

.box {
    text-align: center;
}

可使用下面的属性

.card > h3{
  white-space: nowrap; /*文本不转行*/
  overflow: hidden; /*当内容溢出元素框时,溢出部分被修剪,且不可见*/
  text-overflow: ellipsis; /*当内容溢出元素框时,显示省略符号来代表被修剪的文本*/
}

具体表现为:


px:pixel,像素的缩写,对元素进行大小设置时的常用单位:

.box {
    width: 200px;
    height:100px;
}  /*对box设置其宽度为200px,高度为100px*/

em:相对度量单位,使用时要指定一个比例因子:

font-size: 1.2em; /*字体大小为父元素字体的1.2倍*/

rem:与em类似,不过其相对于根元素对字体进行设置:

font-size: 1.2rem; /*字体大小为根元素字体的1.2倍*/
body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
} 

对body进行设置,字体高度12px,行高为字体高度的1.5倍;后面则是对body进行字体的选择,选择优先度从左到右依次下降;
加引号是因为字体名称里有空格,去掉引号有可能会误成为另一属性,导致出错;
\5b8b\4f53是Unicode编码,代表的是宋体。

上一篇下一篇

猜你喜欢

热点阅读