HTML3

一.line-height有什么作用?

line-height是用于设置行间的距离的属性,也就是行高,而行高就是指文字的大小与行距的和。当需要设置垂直居中的时候,经常使line-height的值等于height的值。那么line-height行高是怎么产生了高度呢?在inline box模型中,有个line boxes,它的工作就是包裹每行文字。一个文字一个line boxes。line-height的特性都是line boxes表现出来的。下面具体看一下line-height的属性。

  • 用绝对长度px表示
body{
  font-size: 15px;
  line-height: 20px;  
}

这个line-height的长度值20px会被后代元素继承下来,而忽略本身font-size的值,line-height不会随着font-size的值作相应的改变。

  • 用百分比表示
body{
  font-size: 15px;
  line-height: 40%;  
}

其中,计算方法就是用font-size的大小(15px)乘以line-height的百分比(40%)。这个计算出来的值会被层叠下去的元素继承,所有继承元素会使用这个计算出来的值,而忽略本身font-size的值,line-height不会随着相应的font-size作相应比例的缩放。

  • 用normal表示
body{
  font-size: 15px;
  line-height: normal;  
}

桌面浏览器normal的值约为1.2,当然这也取决于元素的 font-family。所以算出来的大小就是用font-size的大小(15px)乘以1.2。所有继承下来的元素不会忽略font-size的值,而使用相应font-size的大小来乘以1.2。line-height会随着font-size作相应的缩放。

  • 用纯数字表示
body{
  font-size: 15px;
  line-height: 1.2;
}

所有继承下来的元素不会忽略font-size的值,line-height将使用相应font-size的大小来乘以1.2。line-height会随着相应的font-size作相应比例的缩放。
一般来说推荐使用无单位数值给line-height赋值。


HTML3_第1张图片
效果对比

下面讲一下line-height的一个重要用途-文本居中。

  • 单行文本
  • 不设置height
    如果不设置height,line-height可以设置为任意数字。


    HTML3_第2张图片
    单行文本垂直居中
  • 设置height
    将line-height值与height的高度值设置成一致就能达到效果(这里一般是在同块元素里面使用)。


    HTML3_第3张图片
    单行文本垂直居中
  • 多行文字
    因为今天学习了如何让图片垂直居中,然后我想如果要让文字达到一样的效果,方法应该是一样的,也就是把文字来当作图片来处理。尝试了一下,真的达到了预期的效果。这里面最重要的步骤就是把这些文字赋予表格元素,应用表格的特性,然后再用vertical-align: middle,达到垂直居中的效果。


    HTML3_第4张图片
    多行文字垂直居中

二 .如何去查CSS属性的兼容性?比如inline-block哪些浏览器支持?

要审查CSS的属性可以使用Can I use进行查询。

HTML3_第5张图片
Can I use

三.a 标签的href, title, target 是什么? title 和 alt有什么区别?如何新窗口打开链接?

  • a标签的属性值
  • href属性
    它指示的是链接的目标,href 属性的值可以是任何有效文档的相对或绝对 URL。如果选择了a标签的内容,浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档。一般来说a标签一定要有href属性,这样鼠标点击的时候才会有一个手的形状表示是一个链接。
  • title属性
    title属性作用是鼠标放置到a标签的时候,显示的提示信息。
  • target属性
    target属性是表示浏览器在何处打开一个新的链接,是打开一个新的窗口还是覆盖本页面。
  • title和alt属性的区别
  • title属性
    title是为该属性的元素提供建议性的信息,它可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。当鼠标放置在选定元素时,大部分可视化浏览器会显示title的提示信息。title属性用途之一就是为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的的时候。还有一个用处就是为图像提供额外的说明信息,比如日期等信息。
  • alt属性
    alt属性只能用在img、area和input元素中,它是为了给那些不能看到文档中图像的浏览者提供文字说明信息,在图片的位置显示内容。

所以说如果要使用额外或者非本质的说明信息就要使用title属性。

  • 在新窗口中打开链接
    要想在新窗口中打开链接,让target赋值为_blank就行。
我是链接
  • 跳转到锚点
    在id上面加一个名字就能跳转到锚点。

点击直接跳转到这里

四.display: none , visibility: hidden, opacity:0有什么作用?有什么区别?

他们的作用都是让元素消失,但在渲染效果上有一定的区别。

  • display:none 表示让元素消失,并且脱离文档流,下面的元素将会上移,占据其位置;
  • visibility:hidden 也是让元素消失,但是并没有脱离文档流,渲染的时候为空白,它所在的位置仍然存在,下面的元素不会上移;

opacity:0 和visibility的作用相似,表示透明度为0,占据的位置仍然保留。

具体的对比效果,可以参考代码

五.如何去除 a 链接的默认样式?直接在 a 链接父容器添加颜色,能否继承到当前 a 链接上?

  • 去除a链接的默认样式
    a链接默认样式下面会有一条下划线,如图:


    HTML3_第6张图片
    a链接默认样式

    要去除它的默认样式,则使用:

a{
text-decoration: none;
}
HTML3_第7张图片
去除默认样式之后

去除默认样式之后我们可以用它用来制作一个按钮:


HTML3_第8张图片
按钮
  • 直接在 a 链接父容器添加颜色,不能继承到当前 a 链接上。除了颜色不继承,其他的都可以继承,比如字体大小。要实现对a链接颜色起作用,必须选中a。


    HTML3_第9张图片
    实现对a链接添加颜色

代码题

1.写个div,边框为1px, #ccc, 宽度为200px, 高度为80px, 内有一行文字这里是饥人谷,文字字体大小14px, 颜色#f0f, 文字在div里垂直水平居中。
代码1
2.对于如下html代码

  • 给.dialog加个边框 1px, #ccc
  • 给header设置高度40px, 左对齐,左内边距10px, 文字16px, 颜色#f00,下边框#ccc 1px。
  • 给content 设置高度100px,内部 a链接去掉下划线,颜色 blue, 鼠标放置上去后颜色变为 red
  • 给footer设置高度50px,内部 btn设置 边框1px #ccc, 圆角3px, 上下内边距4px,左右内边距3px,显示为inline-block, footer哪居中显示;

我是标题

X

欢迎来到 饥人谷

在这个大家庭你能快乐的学到更多前端技能

代码2
3.写一个如下表格

HTML3_第10张图片
表格

记住描述整个表格的属性标记放在里,描述单元格的属性标记放在
里面。哎,写代码的时候我老是会搞不清在哪里描述。还需要注意的问题就是细心啊,一开始的时候表格老是结果不对,原来是tr没有把td和th包裹。下次一定要仔细。
代码3
4.下面代码有什么作用?手抄一遍如下代码,改变浏览器宽度看看效果。



 
   
  

 
   
  
这里是内容

将段落设置成外边距上下为0,左右自动调整。将wrap类的宽度固定,无论浏览器宽度多大都能居中显示。

代码的github链接L6

你可能感兴趣的:(HTML3)