19-21日作业(问答题)

1.内联元素如何转化成为块元素

style="display:inline">块变内联

style="display:block">内联变块

2.元素类型有哪些?他们的特征分别是什么?

a块元素

块元素默认占据一行,宽度与父容器一致,高度为内容+padding的高度。

块元素可以通过设置margin和padding的值来控制块元素与其他元素的边距以及自身边框与内容的留白(内边距)。

块元素可以设置宽度和高度。

块元素设置高度,padding,margin会撑大父容器的文档流,当然这要在父容器没有设置固定高度的前提下。

b行内元素

对行内元素设置高度相关的都是没有效果的,如设置margin-top,margin-bottom,padding-top,padding-bottom,height这些属性都是无效的。

对行内元素设置宽度也是无效的,行内元素的宽度只有左右内边距和内容宽度来决定。

c行内块元素

行内块元素对其设置高度,宽度,padding和margin都是有效果的。

行内块元素不会独占一行,如果该行内块元素在设置完宽度、padding、margin之后,父容器后面的宽度还能够容的下第二元素,那么第二个元素就会与第一个元素同行显示,否则,另起一行。

两个同行显示的行内块元素,对其上下的元素的间隔距离,以其中最大的间距为主。

3.清浮动有哪些方法?你最喜欢哪个?为什么

a.父级div定义height

优点:简单、代码少、容易掌握

b.结尾处加空div标签clear:both

优点:简单、代码少、浏览器支持好、不容易出现怪问题

c.父级div定义overflow:hidden

优点:简单、代码少、浏览器支持好

d.父级div定义overflow:auto

优点:简单、代码少、浏览器支持好

e.父级div也一起浮动

f.结尾处加br标签clear:both

我最喜欢结尾处加空div标签clear:both,比较方便。

4.什么是BFC?如何才能得到一个BFC

5.Positon的值有哪些?

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者z-index声明)。inherit规定应该从父元素继承 position 属性的值。

6.说一下绝对定位,相对定位和固定定位的区别

1、相对定位不会失去文档流中的位置,而绝对定位和固定定位都会失去原来在文档流中的位置而被下面的替代;

2、无论是相对、绝对还是固定定位,当偏移量超出上面、左边浏览器窗体(或者说超出可视区域)的时候,超出的内容都会被隐藏;而超出下面和右边的时候,相对定位和固定定位会隐藏超出的部分内容,而绝对定位会出现滚动条。

3、相对、绝对和固定定位都会浮在正常文档流的上面,如果遮盖了正常显示的文档流,可以设置z-index来消除。

7.怎么改变一个div的层级,无标题文档body{margin:0;}#div1{width:50px;height:50px;background:red;position:absolute;z-index:1;top:50px;}#div2{width:50px;height:50px;background:yellow;position:relative;}div1div2

无标题文档body{margin:0;}#div1{width:50px;height:50px;background:red;position:absolute;z-index:1;top:50px;}#div2{width:50px;height:50px;background:yellow;position:relative;}无标题文档body{margin:0;}#div1{width:50px;height:50px;background:red;position:absolute;z-index:1;top:50px;}#div2{width:50px;height:50px;background:yellow;position:relative;}

8.如何实现层叠的DIV1与DIV2,上面DIV1不透明下面DIV2透明?


9.合并行属性,合并列属性

colspan  属性规定单元格可横跨的列数

rowspan  属性规定单元格可横跨的行数。

合并的数量+剩余的数量=总数

一行合并删当前行,跨行合并删除当前行的其他行

10.让DIV水平垂直居中

margin:50%;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,683评论 1 92
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,577评论 0 5
  • 1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 概念:在CSS当...
    饥人谷_任磊阅读 3,994评论 0 3
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,572评论 0 1
  • 在看了知乎的神文——《普通人离千万富翁有多远》之后,突然感觉自己满身鸡血淋漓尽至,仿佛离身边的千万富翁又近了一步,...
    1982年的填空阅读 1,417评论 0 0