HTML面试题(2)

行内元素有哪些

//行内元素
<span></span>
<img/>
<input/>
<select/>
<strong></strong>

块级元素有哪些

//块级元素
<div></div>
<ul></ul>
<ol></ol>
<dl></dl>,<dt>,<dd>
标题标签h1~~h6系列

display:block和display:inline的区别

• [block元素的特点]

/*
1.处于常规流中时，如果width没有设置，会自动填充满父容器
2.可以直接设置宽高，margin值和pading值
3.在没有设置高度的情况下，会kuoz-高度以包含常规流中的子元素
4.独占一行
5.忽略vertical-align
*/

• [inline元素的特点 ]

/*
1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/heigth属性对非替换行内元素无效，快递由元素内容决定
6.非替换行内元素的行框高由line-heigth确定，替换行内元素的行框高由heigth,margin,padding,border决定
7.浮动或绝对定位时会转换block
8.vertical-align属性生效
*/

行内元素和块级元素有什么区别

1.行内元素不可以设置宽高，宽高由内容撑开，不独占一行
2.块级元素可以设置宽高，高度默认由内容撑开,独占一行

盒子塌陷的原因，解决方法

原因一：浮动元素无法撑开标准流的父元素，导致父元素高度塌陷
解决方法：
1.直接给父元素设置高度
2.使用额外标签法清除浮动
3.使用单伪元素清除法
4.使用双伪元素清除法
5.给父元素设置overflow-hidden
///-----------------------------------------
原因二:互相嵌套的块级元素，给子元素设置margin-top,父子元素的margin-top就会合并,父元素会一起往下移动
解决方法:
1.给父元素设置border-top
2.给父元素设置padding-top
3.设置浮动
4.转换成行内块元素
5.给父元素设置overflow-hidden

什么是盒子模型，包含哪些属性

css盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边框，边距，填充和实际内容。盒模型允许我们在其他元素和周围元素边框之间的空间放置元素

margin(外边距)-清除边框外的区域，外边距是透明的

border(边框)-围绕在内边距和内容外的边框

padding(内边距)-清除内容周围的区域，内边距是透明的

content(内容)-盒子的内容，显示文本和图像

css的盒模型

所有HTML元素都可以视为方框，在css中，在谈论设计和布局时，会使用术语 “盒模型” 或 “框模型”。CSS框模型实质上是一个包围每个HTML元素的框。它包括：外边距，边框，内边距以及实际内容。
//---------------------------------------
内容区(content)：它呈现了盒子的主要信息内容，这些内容可以是文本，图片等多种类型

内边距(padding):内边距是内容区和边框之间的空间

边框(border):边框是环绕内容区和填充的边界

外边距(margin):外边距位于盒子的最外围，是添加在边框外周围的空间