HTML 代码 CSS浮动后 为什么看不到图像后的背景色?

HTML 代码 CSS浮动后 为什么看不到图像后的背景色?,第1张

content里面加一句:overflow: hidden;
记住,基本上99+%的情况下,css浮动了元素,都要进行清理浮动,你这个问题就在于浮动了没清理,外层的父元素无法正确的包裹浮动后的子元素。
float的清理是css里面必须弄懂的一个玩意
在浮动元素的父级宽度已知的情况下,给父级加一句:overflow属性,可以清理浮动。还有其他清理浮动的相关方法,你自己百度下:css 清除浮动

在BootStrap中,关于下列类的说明正确的有
+ show用来显示一个区块
+ hidden用来隐藏一个div而不是hide
+ text-hide将会隐藏掉文字
1
2
3
1
2
3
2 jQuery Ajax中都支持哪些返回类型?
XML HTML JSONP json
1
1
3 可继承的样式属性包括
不可继承的有:
display margin border padding background height min-height max-height width min-width max-width overflow position left right top Bottom z-index float clear table-layout vertical-align page-break-after page-bread-before Unicode-bidi
所有元素可继承:visibility和cursor
内联元素可继承:
letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
块状元素可继承:text-indent text-algin
列表元素可继承:list-style list-style-type list-style-position list-style-image
表格元素可继承:border-collapse
3 iframe的使用场景有?
+ 典型系统结构,左侧是功能树,右侧就是一些常见的table或者表单之类的。为了每一个功能,单独分离出来,采用iframe。
+ Ajax上传文件
+ 加载别的网站内容,例如Google广告,网站流量分析等,例如加载资源。
+ 上传时,不用flash实现无刷新
+ 跨域访问的时候可以用到iframe,使用iframe请求不同域名下的资源。比如与第三方域名下的页面共享cookie
1
2
3
4
5
1
2
3
4
5
4 bootstrap中关于屏幕的尺寸标准
超小屏幕(手机) 小屏幕(平板) 中等屏幕(桌面) 大屏幕(桌面)
5 放在 HTML 里的哪一部分 JavaScript 会在页面加载的时候被执行?
在 HTML body部分中的JavaScript会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被调用时才执行。
6 下列 media queries 的定义方式中,哪一个是适配 iphone6s 的?
.@media(min-device-width:414px) and(max-device-width:736px) and(-webkit-min-device-pixel-ratio:3){}
1
1
7 head 标签中必不可少的是
title
HTML5中不再支持的元素
<noframes>,<frameset>,<frame>,<applet>,<acronym>,<basefont>,<dir>,<tt>,<strike>,<big>,<blink>,<s>,<font>
1
1
HTML5中新增加的标签?
<article>标签定义外部的内容(结构元素)
<aside>定义页面内容之外的内容。 aside的内容与article的内容相关。(结构元素)
<figure>定义一组媒介内容的分组,以及它们的标题。(结构元素)
<section>标签定义文档中的节(section,区段)。比如章节,页眉,页脚或文档中的其他部分(结构元素)
<meter>定义预定义范围内的度量。仅用于已知最大和最小值的度量(内联元素)
<progress>定义任何类型的任务的进度。可以使用<progress>标签来显示javascript中耗费时间的函数的进度(内联元素) <time>定义一个日期/时间 (内联元素)
<audio>定义声音内容。(内嵌元素) audio 元素允许多source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
<video>定义视频。(内嵌元素) Ogg支持firefox35,opera105,chrome30 Mpeg 4 支持chrome30,safsri30 Video也支持多个source元素,链接到不同的视频文件,浏览器将使用第一个可识别的格式 属性值: autoplay=”autoplay”就绪后马上播放 loop=“loop”播放完再次播放
<command>定义命令按钮 (交互元素)
<datalist>定义下拉列表,与input元素配合使用该元素,定义input可能出现的值,datalist的选项不会被显示出来,它仅仅是合法的输入值列表(交互元素)
<details>定义元素的细节 (交互元素)
<canvas>定义图形,绘制路径,矩形,圆形,字符以及添加图像的方法 Canvas元素本身没有绘图能力,所有的绘制工作必须在javascript内部完成 渐变
<dialog>定义对话(会话)dialog元素表示几个人之间的对话。HTML5dt元素可以表示讲话者,HTML5dd元素可以表示讲话内容。(结构元素)
<embed>定义外部交互内容或插件
<event-source>为服务器发送的事件定义目标
<footer>定义 section 或 page 的页脚
<figcaption> 标签定义 figure 元素的标题。
<hgroup> 标签用于对网页或区段(section)的标题进行组合。 对网页或区段的标题进行组合
<keygen>标签提供一种验证用户的可靠方法。keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
<header>定义 section 或 page 的页眉(介绍信息)
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<nav>定义导航链接。
<output>定义输出的一些类型。
<source>定义媒体资源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
要运用css3动画,你需要运用什么规则?
keyframes
关于label属性
label标签只有两个属性for(规定 label 绑定到哪个表单元素。 )
基于以下 HTML 结构,以下关于 main1css 和 main2css 的描述有哪些是正确的?
<head>
<link href="main1css" ref="stylesheet">
<link href="main2css" ref="stylesheet">
</head>
1
2
3
4
1
2
3
4
main1css和main2css同时开始加载,先加载完成的优先解析。
如果main1css和main2css中有相同的选择器规则,那么main2css中的规则将合并main1css的规则
在不涉及样式情况下,页面元素的优先显示与标签选用无关。
CSS 样式,下面哪一个元素能够达到最大宽度,且前后各有一个换行?
Block Element
以下对form表单中input元素的readonly与disabled属性描述正确的是?
设置readonly = true,页面上无法修改内容,但是可以通过JavaScript修改,内容会被提交
设置disabled = true,无法修改内容,也不会被提交
span标签的width和height分别为多少?
<div style=”width:400px;height:200px;”>
<span style=”float:left;width:auto;height:100%;”>
<i style=”position:absolute;float:left;width:100px;height:50px;”>hello</i>
</span>
</div>
1
2
3
4
5
1
2
3
4
5
width = 0px ,height = 200px
下列关于btn标签的说法正确的是
该 class 用于形成基本的按钮组。
btn-group 中放置一系列带有 class btn 的按钮。
btn-toolbar 有助于把几组
结合到一个
中, 一般获得更复杂的组件。
btn-group-lg, btn-group-sm, btn-group-xs 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。
可以在一个按钮组内嵌套另一个按钮组,即,在一个 btn-group 内嵌套另一个 btn-group 。
哪一个不是浏览器默认的天生inline-block标签(拥有内在尺寸,可设置高宽,不会自动换行)?
要理解display:inline、block、inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素。
块级元素 总是另起一行开始; 高度,行高以及顶、底边距都可以控制; 宽度缺省是它所在容器的100%,除非设定一个宽度。 块级元素通常作为其他元素的容器,可以容纳内联元素和其他块元素。
block element的HTML标签如下:
+ address-地址
+ blockquote-块引用
+ center-居中对齐块
+ div-常用块级元素
+ dl-定义列表
+ form-交互表单
+ fieldset-form控制组
+ hr-水平分隔线
+ ol-排序表单
+ ul-非排序列表
+dir-目录列表
+ p-段落
+ pre-格式化文本
+ isindex-input prompt
+ menu-菜单列表
+ table-表格
+ h1…h6-标题
+ noframes-frames可选内容(对于不支持frame的浏览器显示此区块内容)
+ noscript-可选脚本内容(对于不支持script的浏览器显示此内容)
行级元素 和其他元素都在一行上; 高度,行高以及顶、底边距不可改变; 高度就是它所容纳的文字或的宽度,不可改变。 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其他内联元素,内联元素的HTML标签分类如下:
+ a-锚点
+ abbr-缩写
+ acronym-首字
+ font-字体设定(不推荐)
+ b-粗体(不推荐)
+ big-bidi override
+ em-强调
+ br-换行
+ small-小字体文本
+ strong-粗体强调
+ i-斜体
+ img-
+ input-输入框
+ label-表格标签
+ select-项目选择
+ textarea-多行文本输入框
+ u-下划线
+ var-定义变量
+ cite-引用
+ code-计算机代码(在引用源码的时候需要)
+ dfn-定义字段
+ kbd-定义键盘文本
+ q-短引用
+ s-中划线(不推荐)
+ strike-中划线
+ sub-下标
+ sup-上标
+ tt-电传文本 HTML中有些元素是可变元素,可根据上下文语境决定该元素为块元素或者内联元素。 applet-java applet
+ button-按钮
+ del-删除文本
+ iframe-inline frame ins-插入的文本
+ map-区块(map)
object-object对象 script-客户端脚本 display:block就是将元素显示为块级元素,display:inline则将元素显示为行内元素。 display:inline-block将元素显示为行内元素,但是元素的内容作为块元素处理。旁边的内联元素和该对象显示在同一行,并且允许空格,但是该元素具有块元素的特性,可以设置其高度,宽度等属性。在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。 兼容性 CSS中使用display:inline-block;来样式化,在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。但是在早期的IE,比如IE 7,对行内元素设置inline-block无法实现inline-block的效果。只是触发了块元素的layout,而行内元素本身就是行布局,所以触发后,依然是行布局。 对IE8以下的版本,可以采用以下两种方法来实现inline-block的效果: 先用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(原理:这是IE的一个经典bug,如果先定义了display:inline-block,然后再设置display回inline或block,layout不会消失),代码如下: 1 div {display:inline-block;}2 div {display:inline;} 将块元素设置为内联对象(display:inline),然后通过zoom:1触发块元素的layout,代码如下: div {display:inline; zoom:1;}
当表单中包含文件上传控件时,需要将enctype设置为
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地,表单数据会编码为“application/x-><div>
<div style="float:left">abc1</div>
<div style="float:left">abc2</div>
<div style="clear:both;"></div>
</div>
以上代码你应该能懂吧,层里面不管有多少个浮动元素,在最后加个具备clear:both属性的层就可以了。
你可以类似把 clear {clear:both} 这个代码放进CSS文件里,以后就直接用<div class="clear"></div>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/13505899.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-08-21
下一篇 2023-08-21

发表评论

登录后才能评论

评论列表(0条)

保存