CSS基础3-float、溢出属性

模块回顾

1.浅谈布局

2.音视频标签

一、浅谈布局

1.float属性：可以使对象浮动，引起对象浮动时，对象将被视作块对象(block-level),可应用于非绝对定位的任何元素上。

取值：none不浮动，left向左浮动，right向右浮动。

clear：清除浮动

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<linkrel="stylesheet"href="D6Test01.css">
</head><body>
<divid="d1">我是左</div>
<divid="d2">我是右</div>
<divid="d3">普通div</div>
<divid="d4"><divid="d5"></div><divid="d6"></div>
</div>
</body>
</html>

布局

/*CSS Document*/#d1{background-color:red;width:50px;float:left;
}#d2{background-color:blue;width:100px;float:right;height:100px;
}#d3{background-color:pink;clear:both;height:500px;
}#d4{background-color:aqua;width:500px;height:500px;
}#d5{background-color:blue;width:450px;height:250px;float:left;}#d6{background-color:red;height:100px;width:100px;float:left;}

布局

2.溢出属性：当对象的内容超过其指定高度及宽度时如何管理内容。

visible：不剪切内容。hidden：将超出对象尺寸的内容进行裁剪，将不出现滚动条。scroll：将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。auto：在需要时剪切内容并添加滚动条，此为body对象和textarea的默认值。

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<linkrel="stylesheet"href="D6Test04.css">
</head><body>
<divid="d1">据了解，2014年3月8日，马航MH370自吉隆坡起飞一个小时后，突然失去联系，机上共有239名乘客，大部分为中国公民。马来西亚政府1月10日与美国海底探索公司海洋无限公司(Ocean Infinity)签署合作协议，重启MH370失联客机的搜寻工作。搜索工作引发外界关注。</div>
<divid="d2"><pclass="text">本网讯　1月31日上午，委理论学习中心组举行集体学习，深入学习的精神和省纪委十一届三次全会精神，并就学习贯彻全会精神作出部署。校党委书记吕传毅主持学习会，、胡兴禹、刘国华、张祥云、王立斌、魏修亭、查玉喜、易维明、张金生出席学习会，其他校党委理论学习中心组成员参加学习会。</p><imgsrc="1.jpg"alt=""><pclass="text">兴禹领学了第十九届中央委员会第二次全体会议精神；党委常委、纪委书记张金生领学了山东省第十一届纪律检查委员会第三次全体会议精神。</p>
<br>
<imgsrc="2.jpg"alt="">
</div></body>
</html>

View Code

/*CSS Document*/#d1{width:50px;height:100px;border:1px solid black;
/*overflow: hidden;*/
/*overflow: scroll;*/overflow:auto;}#d2{width:500px;height:500px;overflow:auto;border:1px solid black;align-content:center;text-indent:25px}img{width:500px}

View Code

二音视频标签

<iframe src="" frameborder="" width="" height=""></iframe>

<video src="
" controls autoplay loop></video>
<audio src=""></audio>

<marquee>欢迎光临</marquee>

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<linkrel="stylesheet"href="D6Test04.css">
</head><body>
<!--框架标签：把别人的网页嵌入到你自己的网页-->
<iframesrc="https://www.baidu.com/"frameborder="1"width="1000px"height="300px"></iframe>
<iframesrc="../Day03-HTML/H5homework18.2.2.html"frameborder="1"width="500px"height="200px"></iframe>
<!--音频标签：-->
<videosrc="http://www.yymp3.com/Play/22818/267065.htm
"controls autoplay loop></video>
<audiosrc=""></audio>
<!--飞起来标签-->
<marquee>欢迎光临</marquee>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/LuckyGJX/p/8423153.html

CSS基础3-float、溢出属性相关推荐

CSS基础（6）- 属性值的计算过程
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录属性值的计算过程参考资料属性值的计算过程一个元素一个元素依次渲染,顺序则是按照页面文 ...
css 背景颜色默认,CSS 基础——颜色和背景属性
日常打卡,CSS 基础第二部分:颜色和背景属性.主要介绍了如何使用 CSS 样式设置元素的颜色.背景颜色和背景图像. 1.颜色属性 color color属性用来设置指定元素的颜色,颜色值是一个关键字 ...
CSS基础(part8)--文本外观属性
学习笔记,仅供参考,有错必纠文章目录 CSS 文本外观属性 color:文本颜色 letter-spacing word-spacing line-height test-decoration te ...
CSS基础(part7)--字体样式属性
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS CSS的长度单位字体样式属性 font-size font-family font-weight font-style fon ...
CSS基础:text-overflow:ellipsis溢出文本的显示样式
语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : ...
CSS——灵活布局 float (浮动属性)
目录浮动概述浮动定位 float属性 clear属性 float与overfloat 第一部分 1. 浮动概述浮动定位是指(特点) - 将元素排除在普通流之外,即元素将脱离标准文档流 - 元素将 ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
CSS基础学习--16 Float(浮动)
一.定义 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素的水平方向浮动,意味着元素只能左右移动 ...
CSS基础样式和排版文本段落
一.CSS基础样式 1.字体属性 font-family是字体属性 font-family:后面可以直接打出来字体的样式,或者直接选择 font-family: Times,"Times N ...

CSS基础3-float、溢出属性

CSS基础3-float、溢出属性相关推荐

最新文章

热门文章