1.1HTML/CSS面试题

(HTML/CSS面试题)

1. 行内元素(行级元素、内联元素)、行内块元素、块元素各有什么区别。

行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一样,设置个背景貌似人家又认了,但是他周围的元素当他设置的上下间距不存在,所以在以后的项目中,不给行内元素设置上下的margin和padding了
总结:想让自己独占一行就会块级元素(div,dl,dt,dd,ul,li...),想让元素和其它元素在一行就用行内元素(span,a,img),他们之间可以通过样式来转换disply:block;display:inline;
另一个属性:
display:inline-block;
将对象呈递为内联元素,与其它的元素同处一行,但是内部又呈现出块级元素,也就是可以设置宽和度,打破了块级元素和内联元素的区别,此属性,IE8,FF3,其它的标准浏览器都识别,IE6,IE7,FF2不识别此属性,但是在IE6,7下面使用又好像识别了,是因为他触发了IE的haslayout,(类似于zoom:1),所以从表现上来说他们支持这个属性.(可以拿块级元素来试验,块级元素使用了这个属性就没有相应的功能了),FF2{display:moz-inline-box}//有可能会导致文本对齐问题
如果块状元素(div..)表现这种属性,与外部沟通是内联,内部又是块状的可以这样设置(display:inline;zooom:1)或 div{display:inline-block;//先触发layout}div{display:inline;}这两个顺序不能颠倒了,不然就失效了
 1.块级元素总是独自占一行,前面和后面就好像有个换行符,内联元素总是和其它的内联兄弟占一行
2.块级元素可以设置宽和高度值,内联元素就不行了,他们的宽和高总是随着自身的内容自动扩大和缩小
3.块级元素的margin和padding都正常,内联元素左右maring和左右padding正常,上下不正常不识别,也就是说不能通过margin-top和padding-top来改变行高
html元素的分类

块状元素、内联元素和内联块状元素。

2. 清除浮动有哪些方法

1. 使用空标签清除浮动

<ul>
<li>SSS</li>
<li>OOO</li>
<li>SSS</li>
<br style="clear:both">
</ul>

2. 使用overflow属性

<ul style="overflow:auto;zoom:1">
<li>SSS</li>
<li>OOO</li>
<li>SSS</li>
</ul>

3. 使用after伪对象清除浮动
after伪对象非IE浏览器支持,所以并不影响IE/WIN浏览器。具体的写法可以参照以下的示例,但需要有几点的注意。
1.该方法中必须为需要清除浮动元素的伪对象中设置height:0;否则该元素会比实际高出若干像素。
2.content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content设为"."

<style type="text/css">.listinfo:after:{display:block;clear:both;content:"";visibility:hidden;height:0;}c<class="listinfo">/
<li>SSS</li>
<li>OOO</li>
<li>SSS</li>
</ul>

3. 盒子模型有哪些常用的属性,如何使用这些属性。

1. margin
margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。

属性描述
margin简写属性。在一个声明中设置所有外边距属性。
margin-bottom设置元素的下外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。
语法结构
margin:5px auto;意思上下为5,左右平均居中
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距
margin-left: 20px; 左外边距
margin:1px 四边统一边距
margin:1px 1px 上下边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距

注释:允许使用负值。

2. padding
CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见。如果想调整盒子的大小可以调整内容区,内边距,边框。CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
有两种方法可以设置盒子内边框的大小,第一种是分别设置四个方向的内边距,第二种是使用简写属性可同时设置多个方向的内边距(要注意设置的顺序)
一、使用单独属性设置各个方向的内边距

  1. padding-top 上内边距的宽度
  2. padding-left 左内边距的宽度
  3. padding-right 右内边距的宽度
  4. padding-bottom 下内边距的宽度

代码如下(示例)

<style>
#box1{
padding-top:10px; 
padding-left:20px;
padding-right:30px; 
padding-bottom:40px;
overflow: hidden;
width: 100px;
height: 150px;

background-color:#bcf

border:20px skyblue solid;

}
</style>
<div id="box1">
</div>

简写属性(使用padding可以可以同时设置四个边框的样式,规则和border-width一样,按照 top-right-bottom-left的顺序)
指定四个值,分别设置给上10px,右20px,下30px,左40px。顺时针方向;
padding-width:10px 20px 30px 40px;
指定三个值,第一个值10px设置给上,第二个20px设置给左和右,第三个30px设置给下内边距;
padding-width:10px 20px 30px;
指定两个值,第一个值10px设置给上下内边距,第二个值20px设置给左右内边距;
padding-width:10px 20px ;
指定一个值,四个内边距使用同一个值,上下左右都是10像素;
padding-width:10px ;
3. border
(一)值复制(简写样式)

指定四个值,分别设置给上,右,下,左。顺时针方向;
div{border-style:soild;border-width:10px 20px 30px 40px}
指定三个值,第一个值10px设置给上边框,第二个值设置给左边框和右边框,第三个值设置给下边框;
div{border-style:soild;border-width:10px 20px 30px}
指定两个值,第一个值设置给上下边框,第二个值设置给左右边框;
div{border-style:soild;border-width:10px 20px}
指定一个值,四个边框使用同一个值
div{border-style:soild;border-width:10px}
(二)单独属性设置边框宽度

  • border-top-width 顶部边框宽度
  • border-left-width 左面边框宽度
  • border-right-width 右面边框宽度
  • border-bottom-width 底面边框宽度

4. box-sizing

box-sizing :border-box 无需时刻关注padding 与 边框线。 表示了包含padding 和border 。
box-sizing :content-box 表示content 的宽高(默认)
box-sizing :inherit 继承

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值