css相关问题

css相关问题_第1张图片
  1. 块级元素与行内元素的区别:
块级元素 行内元素
独占一行,宽度自动填满父元素 占据大小根据内容改变而改变
能容纳块级元素和行内元素 只能容纳文本或者行内元素
高度,行高,以及边距可控制 高度,行高,以及上下边距不可控

块级元素:div,form,h1,hr,ol,ul,li
行内元素:p,a,input,span,strong

  1. css继承是指,作用在父元素上的css样式,对子元素同样生效。
    不可继承的有margin,padding,border,width,height
    可继承的有color,font-*,

  2. 块级元素水平居中,margin:auto
    行内元素水平居中,text-align:center

  3. css实现三角形,使用块级元素

height:0; 
winth:0; 
border-top:30px
  1. 单行文本溢出加...
{
  white-space: nowrap;//文本不会换行,文本会在在同一行上继续,直到遇到 
标签为止 overflow:hidden; text-overflow:ellipsis;//显示省略符号来代表被修剪的文本 }

多行文本溢出加...

{
  word-break:break-all;//允许在单词内换行
  display:-webkit-box;
  -webkit-line-clamp:2;//限制在一个块元素显示的文本的行数
  -webkit-box-orient:vertical;
  overflow:hidden;
}

-webkit-line-clamp 是一个 不规范的属性,为了实现该效果,它需要组合其他外来的WebKit属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。

  1. px,相对长度单位,相对于屏幕分辨率而言。
    em,相对当前对象内文本的字体尺寸,em会继承父级元素的大小,父级元素大小当前元素大小=浏览器显示大小。
    rem,相对html根元素大小,可以做到只调整根元素字体大小就成比例的调整所有字体大小。
    任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px,为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px
    62.5%=10px, 这样12px=1.2em, 10px=1em。

  2. font:22px/5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    字体大小22px,行高5倍字体大小,字体,\5b8b\4f53宋体,有空格逗号等字符时需要加引号,说明是一种字体

你可能感兴趣的:(css相关问题)