CSS基础(三) 个人笔记
来源:互联网 发布:持有 体验 茅台 知乎 编辑:程序博客网 时间:2024/05/21 09:04
超链接的伪类
1.link: 未访问状态。
2.visited:已访问状态。
3.hover:鼠标悬浮状态。
4.active: 鼠标激活选定状态。
事例如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> /*未访问状态*/ a:link{ color:palevioletred; } /*已访问状态*/ a:visited{ color: darkgray; } /*鼠标悬浮状态*/ a:hover{ color: red; } /*鼠标激活选定状态*/ a:active{ color: yellow; } </style> <title>超链接的伪类样式</title></head><body></body><a href="http://www.baidu.com">百度</a></html>
结果如下:
盒子模型
margin:外边距 影响当前盒子和其他盒子的距离
1个值:上右下左采用相同的值
2个值:上下采用第一个 左右采用第二个
3个值: 上 左右 下
4个值:按照上右下左的顺序添加值
padding:内边距 内容与边框的距离
border:边框
contect:内容
外边距 边框和内边框都会影响你内容的宽度。
overflow :规定内容溢出盒子模型
visible:会出现在框外
hidden:会隐藏溢出部分
auto:溢出部分会加一个滑动条
事例(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #id1{ width: 300px; height: 300px; background-color: darkgray; margin: 0px auto; overflow: hidden;/**/ } #id2{ width: 150px; height: 150px; background-color: yellow; margin: 0px auto; margin-top: 75px; border: 2px dashed red ; } </style> <title>LianXi</title></head><body><div id="id1"> <div id="id2"> </div></div></body></html>
结果如下:
事例(二)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #div1{ width: 100px; height: 100px; background-color: red; margin: 0 auto; /*overflow :规定内容溢出盒子模型 visible:会出现在框外 hidden:会隐藏溢出部分 auto:溢出部分会加一个滑动条*/ overflow: auto ; } </style> <title>overflow</title></head><body><div id="div1"> 杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家杰瑞家</div></body></html>
结果:
非标准流
float:属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
事例如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } #header{ height: 150px; background-color: blue; /*border:1px solid red;*/ } #main{ /*height: 350px;*/ background-color: black; /*border:1px solid red;*/ } #footer{ height: 150px; background-color: yellow; /*border:1px solid red;*/ } #cat{ /*float:是元素脱离正常的常规文档流,表现为向左或右浮动*/ float: left; height: 300px; width: 20%; background-color: bisque; } #content{ float: left; height: 300px; width: 40%; background-color:palevioletred; } #sidebar{ float: left; height: 300px; width: 20%; background-color: aquamarine; } /*通过伪类向main中添加一个块级标签,使用clear:both,清除浮动带来的影响(标准写法)*/ .cleanfix:after{ content: ""; display: table; clear: both; } .cleanfix{ zoom: 1;/*开启兼容模式可以使用低版本ie也可以完成清除浮动*/ } /*#bottom{*/ /*height: 50px;*/ /*background-color: #ff6600;*/ /*clear: both;!*清除浮动带来的影响*!*/ /*}*/ </style> <title>非标准流</title></head><body><div> <div id="header"></div> <div id="main" class="cleanfix"> <div id="cat">左</div> <div id="content">中</div><!--父级盒子中的所有盒子都采用浮动形式,若父级盒子未指定高度,则父级盒子高度为0--> <div id="sidebar">右</div> <!--<div id="bottom">底部</div><!–内容受浮动盒子影响–>--> </div> <div id="footer"></div></div></body></html>
结果:
阅读全文
0 0
- CSS基础(三) 个人笔记
- CSS基础(一) 个人笔记
- CSS基础(二) 个人笔记
- CSS基础(四) 个人笔记
- CSS基础(五) 个人笔记
- HTML5基础(三) 个人笔记
- javascript基础(三) 个人笔记
- css基础学习笔记(三)
- HTML/CSS基础笔记三
- 黑马程序员:iOS基础——个人笔记(三)
- CSS基础(三)
- CSS学习笔记--基础(三)
- 慕课网《HTML+CSS基础课程》笔记总结(三)
- 《HTML+CSS基础课程》学习笔记三
- R基础(个人笔记)
- CSS基础(笔记)
- CSS基础(三):选择器
- web之css(个人学习笔记)
- POJ2955 Brackets(区间DP)
- java的几种对象解释
- Parse error: syntax error, unexpected end of file
- OC 内存管理
- 椭圆曲线加密学习的菜鸟入门
- CSS基础(三) 个人笔记
- bootstrap datetimepicker 日期插件超详细使用方法
- Win10系统安装TensorFlow简易教程
- 传智播客-Java学习笔记day15
- POJ 1068 Parencodings <模拟>
- datastage监控平台
- 《谷歌宣布Chrome不再信任所有赛门铁克SSL证书》误读新闻的澄清说明
- Android游戏开发之小球重力感应实现
- FFMPEG中最关键的结构体之间的关系