css基础知识汇总6

高度塌陷

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1{/*为box1设置一个边框*/border: 10px red solid;}.box2{width: 100px;height: 100px;background-color: blue;/** 在文档流中，父元素的高度默认是被子元素撑开的，*     也就是子元素多高，父元素就多高。* 但是当为子元素设置浮动以后，子元素会完全脱离文档流，*  此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。*     由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。* * 所以在开发中一定要避免出现高度塌陷的问题,*  我们可以将父元素的高度写死，以避免塌陷的问题出现，*    但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。*//*为子元素设置向左浮动*/float: left;}.box3{height: 100px;background-color: yellow;}</style></head><body><div class="box1"><div class="box2"></div></div><div class="box3"></div></body>
</html>

解决高度塌陷1

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1{border: 10px red solid;/** 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context*  简称BFC，该属性可以设置打开或者关闭，默认是关闭的。* 当开启元素的BFC以后，元素将会具有如下的特性：*  1.父元素的垂直外边距不会和子元素重叠 *   2.开启BFC的元素不会被浮动元素所覆盖*   3.开启BFC的元素可以包含浮动的子元素* * 如何开启元素的BFC*     1.设置元素浮动*       - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失*           而且使用这种方式也会导致下边的元素上移，不能解决问题*  2.设置元素绝对定位*     3.设置元素为inline-block*        - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式*     4.将元素的overflow设置为一个非visible的值*  * 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。    *//*overflow: hidden;*//**但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。* 在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，* 该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题* 开启方式很多，我们直接使用一种副作用最小的：*   直接将元素的zoom设置为1即可* *//** zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍* zoom:1表示不放大元素，但是通过该样式可以开启hasLayout* zoom这个样式，只在IE中支持，其他浏览器都不支持*/zoom:1;overflow: hidden;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}.box3{height: 100px;background-color: yellow;}</style></head><body><div class="box1"><div class="box2"></div></div><div class="box3"></div></body>
</html>

导航条

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>导航条</title><style type="text/css">/** 清除默认样式*/*{margin:0;padding:0;}/** 设置ul*/.nav{/*去除项目符号*/list-style: none;/*为ul设置一个背景颜色*/background-color: #6495ED;/*设置一个宽度*//** 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout*/width: 1000px;/*设置元素居中*/margin: 50px auto;/*解决高度塌陷*/overflow: hidden;}/*** 设置li*/.nav li{/*设置li向左浮动*/float: left;width: 12.5%;}.nav a{/*将a转换为块元素*/display: block;/*为a指定一个宽度*/width: 100%;/*设置文字居中*/text-align: center;/*设置一个上下内边距*/padding: 5px 0;/*去除下划线*/text-decoration: none;/*设置字体颜色*/color: white;/*设置加粗*/font-weight: bold;}/** 设置a的鼠标移入的效果*/.nav a:hover{background-color: #c00;}</style></head><body><!-- 创建导航条的结构 --><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body>
</html>

清除浮动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{width: 100px;height: 100px;background-color: yellow;/** 设置box1向左浮动*/float: left;}.box2{width: 200px;height: 200px;background-color: yellowgreen;/** 由于受到box1浮动的影响，box2整体向上移动了100px* 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能* clear可以用来清除其他浮动元素对当前元素的影响* 可选值：*       none，默认值，不清除浮动*       left，清除左侧浮动元素对当前元素的影响*       right，清除右侧浮动元素对当前元素的影响*      both，清除两侧浮动元素对当前元素的影响*               清除对他影响最大的那个元素的浮动*//** 清除box1浮动对box2产生的影响* 清除浮动以后，元素会回到其他元素浮动之前的位置*//*clear: left;*/float: right;}.box3{width: 300px;height: 300px;background-color: skyblue;clear: both;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>

解决高度塌陷2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{border: 1px solid red;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}/** 解决高度塌陷方案二：*  可以直接在高度塌陷的父元素的最后，添加一个空白的div，*     由于这个div并没有浮动，所以他是可以撑开父元素的高度的，*    然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，*     基本没有副作用* * 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。*/.clear{clear: both;}</style></head><body><div class="box1"><div class="box2"></div><div class="clear"></div></div></body>
</html>

解决高度塌陷3

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{border: 1px solid red;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}/*通过after伪类，选中box1的后边*//** 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，*  这样做和添加一个div的原理一样，可以达到一个相同的效果，*    而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用*/.clearfix:after{/*添加一个内容*/content: "";/*转换为一个块元素*/display: block;/*清除两侧的浮动*/clear: both;}/** 在IE6中不支持after伪类,*   所以在IE6中还需要使用hasLayout来处理*/.clearfix{zoom:1;}</style></head><body><div class="box1"><div class="box2"></div></div></body>
</html>

开班信息

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*清除默认样式*/*{margin: 0;padding: 0;}/*统一页面中的字体*/body{font: 12px/1 宋体;}/*设置outer的大小*/.outer{width: 300px;/*height: 473px;*//*background-color: #bfa;*//*设置outer居中效果*/margin: 50px auto;}/** 设置title的边框*/.title{/*设置上边框*/border-top:2px #019e8b solid ;/*设置盒子的高度*/height: 36px;/*设置背景样式*/background-color: #f5f5f5;/*设置title的行高*/line-height: 36px;/*设置title的内边距*/padding: 0px 22px 0px 16px;}/*设置title中的超链接* */.title a{float: right;/*设置字体颜色*/color: red;}/*设置h3*/.title h3{font: 16px/36px "微软雅黑";}/*设置内容*/.content{border: 1px solid #deddd9;/*设置内边距*/padding: 0px 28px 0px 20px;}/*设置内容中的超链接*/.content a{color: black;/*去除超链接的下划线*/text-decoration: none;/*设置字体大小*/font-size: 12px;}/*为超链接添加一个hover伪类*/.content a:hover{color: red;/*为超链接添加下划线*/text-decoration: underline;}/*设置内容中的标题*/.content h3{margin-top: 14px;margin-bottom: 16px;}/** 设置右侧的a的样式*/.content .right{/*设置向右浮动*/float: right;}/*设置ul的样式*/.content ul{/*去除项目符号*/list-style: none;/*为ul设置一个下边框*/border-bottom: 1px dashed #deddd9;}/*取消最后一个ul的边框*/.content .no-border{border: none;}/*设置内容中的红色字体*/.content .red{color: red;font-weight: bold;}/*设置内容中的li*/.content li{margin-bottom: 15px;}</style></head><body><!--创建一个外层div，容纳整个内容--><div class="outer"><!-- 开班信息的头部 --><div class="title"><a href="#">16年面授开班计划</a><h3>近期开班</h3></div><!-- 开班信息的主要内容 --><div class="content"><h3><a href="#">JavaEE+云计算-全程就业班</a></h3><ul><li><a class="right" href="#"><span class="red">预约报名</span></a><a href="#">开班时间：<span class="red">2016-04-27</span></a></li><li><a class="right" href="#"><span class="red">无座，名额爆满</span></a><a href="#">开班时间：<span class="red">2016-04-07</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-03-15</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-02-25</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2015-12-26</span></a></li></ul><h3><a href="#">Android+人工智能-全程就业班</a></h3><ul><li><a class="right" href="#"><span class="red">预约报名</span></a><a href="#">开班时间：<span class="red">2016-04-10</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-03-17</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-02-20</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2015-12-23</span></a></li></ul><h3><a href="#">前端+HTML5-全程就业班</a></h3><ul class="no-border"><li><a class="right" href="#"><span class="red">预约报名</span></a><a href="#">开班时间：<span class="red">2016-05-10</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-03-16</span></a></li></ul></div></div></body>
</html>

css基础知识汇总6相关推荐

CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}
1.CSS的作用: 通过css达到美化网页的效果 2.选择器: ✔ 基础选择器(重点) ◆标签选择器(重点学习) ◆类选择器(重点学习) ◆ID选择器 ◆通配符选择器 ✔ 复合选择器(重点) ◆后代选 ...
关于前端的HTML+CSS基础知识汇总（较为全面）
这里写目录标题初识空元素的两种写法元素之间的嵌套标准的文档结构(告诉浏览器当前使用的 HTML 标准是 html5.) 语义化什么是语义化? 为什么需要语义化? 文本元素 h p span( ...
前端html+css基础知识汇总（个人学习内容总结，希望对你有帮助内含部分代码）
*小知识点 0.定位和浮动做布局,移动transform做效果例如;京东盒子上升效果快捷键:ctrl+f 快速查找 ctrl+g 快速跳转行号 1.text-aline:center可以让什么元素 ...
脑科学与脑电基础知识汇总
点击上面"脑机接口社区"关注我们更多技术干货第一时间送达脑科学与脑电基础知识汇总该部分汇总了社区分享的部分脑科学.EEG.fNIRS.BCI.人机交互等相关知识. 脑电与情绪 ...
python基础知识资料-Python基础知识汇总
原标题:Python基础知识汇总 1.Anaconda的安装百度Anaconda的官网,下载左边的Python3.X版本然后是设置路径,最后给出Jupyter notebook.具体参考: 猴子: ...
python基础知识资料-学习Python列表的基础知识汇总
千里之行,始于足下.要练成一双洞悉一切的眼睛,还是得先把基本功扎扎实实地学好.今天,本喵带大家仔细温习一下Python的列表.温故而知新,不亦说乎. 当然,温习的同时也要发散思考,因为有些看似无关紧要 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...

css基础知识汇总6

高度塌陷

解决高度塌陷1

导航条

清除浮动

解决高度塌陷2

解决高度塌陷3

开班信息

css基础知识汇总6相关推荐

最新文章

热门文章