蓝鸥零基础学习HTML5第八讲 样式布局二
2016-09-23 10:53
639 查看
蓝鸥零基础学习HTML5第八讲 样式布局二1.定位的属性及特性<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>#box1 {width:400px;height:400px;border:10px solid red;margin:0 auto;position: relative;/*left:300px;*/}#box2{width:100px;height:100px;background: yellow;position: absolute;left:10px;top:30px;}</style></head><body><!--
定位： 把一个元素 按照一定的方式 定到页面的某一个位置 position 相对定位 relative针对自己本身的位置进行定位 绝对定位 absolute针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上有没有定位，如果有，针对父级的父级的原点进行定位，以此类推，如果都没有定位，针对document进行定位温馨小提示：绝对定位即使没有初始值，也一定要设置值left:0px;top:0px; 固定定位 fixed针对页面窗口进行定位温馨提示：IE6 不支持固定定位 偏移量lefttoprightbottom温馨提示left top 比 right bottom 的优先级要高 --> <div id="box1"> <div id="box2"></div> </div></body></html>
2.三种的定位的特性<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>#box1 { background: red;position: absolute;/*float:left;*/}#box2 {width:200px;height:200px;background: yellow;}span {width:100px;height:100px;background: red;position: fixed;left:0px;}.span1 {z-index: 1;}.span2{z-index: 2;}.span4{z-index: 10;}</style></head><body><!-- 定位的三种特性 相对定位 relative1.不影响元素本身的特性2.不使元素脱离文档流 3.提升层级4.无法触发BFC5.针对自己本身进行定位 绝对定位 absolute1.会使元素完全脱离文档流2.内容撑开宽度和高度3.使元素支持所有的CSS样式4.提升层级z-index:数值; 定位层级设置数值越大，层级越高5.绝对定位要和相对定位配合使用6.如果有定位父级，针对定位父级发生偏移，没有定位父级，针对document进行偏移7.如果绝对定位的子级有浮动，可以省略清浮动的操作 固定定位 fixed1.不兼容IE62.针对窗口进行定位3.如果固定定位的子级有浮动，可以省略清浮动的操作 --> <!-- <div id="box1">div1</div> <div id="box2">div2</div> --> <!-- <span>span1</span> --> </body></html> 3.定位和BFC<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div {width:350px;border:10px solid #000;position: relative;}span {width:100px;height:100px;background: red;text-align: center;line-height: 100px;font-size:40px;float:left;}</style></head><body><div><span>1</span><span>2</span><span>3</span><span>4</span></div></body></html>
4.定位的下例子<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div {width:400px;height:400px;border:4px solid #000;background: yellow;position: relative;overflow: hidden;}span {width:400px;height:100px;background: red;position: absolute;top:400px;transition:0.01s;}div:hover span{top:300px;}</style></head><body><div><span></span></div></body></html>
5.派生选择器<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>/*span {border:1px solid red;}*/#box1 span {border:1px solid red;}#box2 span {display: inline-block;width:100px;height:100px;background: yellow;}</style></head><body><!-- 派生选择器是由 id选择器 class选择器 标签名选择器组合而成
id选择器 10000class选择器 100标签名选择器 1#box2 span 10000 + 1 10001 --> <div id="box1"> <span>我是box1的span</span> <span>我是box1的span</span> <span>我是box1的span</span> <span>我是box1的span</span> </div> <div id="box2"> <span>我是box2的span</span> <span>我是box2的span</span> <span>我是box2的span</span> <span>我是box2的span</span> </div></body></html>
6.派生选择器的小例子<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/reset.css"><style>#box1 {width:550px;margin:0 auto;border:1px solid #E4AD7F;}#box1 li {width:100px;height:50px;background: #A5EEA2;float:left;margin-right: 10px;text-align: center;line-height: 50px;font-size:24px;}#box1 li a {color:#E99B1E;}#box1 .cla1{background: red;}#box1 .cla1 a {color:#fff;}/**//*id 10000class 100div 1 #box1 li 10000 + 1#box1 li a 10000 + 1 + 1 #box1 .cla1 10000 + 100#box1 .cla1 a 10000 + 100 + 1*/</style></head><body><div id="box1"><ul><li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li></ul></div></body></html>
定位： 把一个元素 按照一定的方式 定到页面的某一个位置 position 相对定位 relative针对自己本身的位置进行定位 绝对定位 absolute针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上有没有定位，如果有，针对父级的父级的原点进行定位，以此类推，如果都没有定位，针对document进行定位温馨小提示：绝对定位即使没有初始值，也一定要设置值left:0px;top:0px; 固定定位 fixed针对页面窗口进行定位温馨提示：IE6 不支持固定定位 偏移量lefttoprightbottom温馨提示left top 比 right bottom 的优先级要高 --> <div id="box1"> <div id="box2"></div> </div></body></html>
2.三种的定位的特性<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>#box1 { background: red;position: absolute;/*float:left;*/}#box2 {width:200px;height:200px;background: yellow;}span {width:100px;height:100px;background: red;position: fixed;left:0px;}.span1 {z-index: 1;}.span2{z-index: 2;}.span4{z-index: 10;}</style></head><body><!-- 定位的三种特性 相对定位 relative1.不影响元素本身的特性2.不使元素脱离文档流 3.提升层级4.无法触发BFC5.针对自己本身进行定位 绝对定位 absolute1.会使元素完全脱离文档流2.内容撑开宽度和高度3.使元素支持所有的CSS样式4.提升层级z-index:数值; 定位层级设置数值越大，层级越高5.绝对定位要和相对定位配合使用6.如果有定位父级，针对定位父级发生偏移，没有定位父级，针对document进行偏移7.如果绝对定位的子级有浮动，可以省略清浮动的操作 固定定位 fixed1.不兼容IE62.针对窗口进行定位3.如果固定定位的子级有浮动，可以省略清浮动的操作 --> <!-- <div id="box1">div1</div> <div id="box2">div2</div> --> <!-- <span>span1</span> --> </body></html> 3.定位和BFC<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div {width:350px;border:10px solid #000;position: relative;}span {width:100px;height:100px;background: red;text-align: center;line-height: 100px;font-size:40px;float:left;}</style></head><body><div><span>1</span><span>2</span><span>3</span><span>4</span></div></body></html>
4.定位的下例子<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div {width:400px;height:400px;border:4px solid #000;background: yellow;position: relative;overflow: hidden;}span {width:400px;height:100px;background: red;position: absolute;top:400px;transition:0.01s;}div:hover span{top:300px;}</style></head><body><div><span></span></div></body></html>
5.派生选择器<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>/*span {border:1px solid red;}*/#box1 span {border:1px solid red;}#box2 span {display: inline-block;width:100px;height:100px;background: yellow;}</style></head><body><!-- 派生选择器是由 id选择器 class选择器 标签名选择器组合而成
id选择器 10000class选择器 100标签名选择器 1#box2 span 10000 + 1 10001 --> <div id="box1"> <span>我是box1的span</span> <span>我是box1的span</span> <span>我是box1的span</span> <span>我是box1的span</span> </div> <div id="box2"> <span>我是box2的span</span> <span>我是box2的span</span> <span>我是box2的span</span> <span>我是box2的span</span> </div></body></html>
6.派生选择器的小例子<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/reset.css"><style>#box1 {width:550px;margin:0 auto;border:1px solid #E4AD7F;}#box1 li {width:100px;height:50px;background: #A5EEA2;float:left;margin-right: 10px;text-align: center;line-height: 50px;font-size:24px;}#box1 li a {color:#E99B1E;}#box1 .cla1{background: red;}#box1 .cla1 a {color:#fff;}/**//*id 10000class 100div 1 #box1 li 10000 + 1#box1 li a 10000 + 1 + 1 #box1 .cla1 10000 + 100#box1 .cla1 a 10000 + 100 + 1*/</style></head><body><div id="box1"><ul><li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li></ul></div></body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 蓝鸥零基础学习HTML5第八讲 样式布局一
- 蓝鸥零基础学习HTML5第八讲 样式布局一
- 蓝鸥零基础学习HTML5第四讲 CSS的基础样式
- 蓝鸥零基础学习HTML5第六讲 CSS的常见样式
- 蓝鸥零基础学习HTML5第五讲 CSS的基础样式
- 蓝鸥零基础学习HTML5之CSS的基础样式二
- 蓝鸥零基础学习HTML5第四讲 CSS的基础样式
- 蓝鸥零基础学习HTML5第九讲 兼容性五
- 学习《html5.css3.0》网页布局和样式精粹(第一天)
- 【免费学习路线】蓝鸥零基础学习HTML5路线图
- 学习《html5.css3.0》网页布局和样式精粹(第二天)
- 蓝鸥零基础学习HTML5之CSS的基础样式一
- 蓝鸥零基础学习HTML5第九讲 兼容性六
- 【学习路线】蓝鸥零基础学习HTML5免费路线图
- 蓝鸥零基础学习HTML5第九讲 兼容性七
- 蓝鸥零基础学习HTML5第五讲 CSS的基础样式
- 蓝鸥零基础学习HTML5第九讲 兼容性六
- 零基础学习HTML5—html+css基础【蓝鸥出品】
- 【免费HTML5路线图】蓝鸥零基础学习HTML5学习路径
- 何学习HTML5开发 蓝鸥零基础学习HTML5在线学习