李洪强和你一起学习前端之(8)浮动,网页布局,定位

2.1标准流(文档流)

块级元素独占一行显示,标准流的显示方式

让两个盒子在一行显示

<!DOCTYPE html>

<html>

<head>

.one{

width: 100px;

height: 100px;

background-color: red;

/*让两个盒子在一行显示*/

display: inline-block;

}

.two{

width: 100px;

height: 100px;

background-color: greenyellow;

display: inline-block;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

一个靠左边,一个靠右边

2.2浮动

Float: left/right

设置了浮动的元素,不在原来的位置(脱标)

设置可以浮动可以让块级元素在一行上显示

浮动可以将行内元素转化为行内块元素

模式转化的过程中,能用display就用display

浮动用来解决文字图片的环绕问题

浮动的第二个作用: 制作导航栏

实现导航栏一:

代码:

<!DOCTYPE html>

<html>

<head>

/*文字宽度不一样,不建议给a设置宽度*/

.nav{

height: 50px;

background-color: pink;

/*让文字垂直居中

放在这里也可以,发到下面,因为可以继承*/

line-height: 50px;

}

li{

list-style: none;

/*设置在一行上显示*/

float: left;

}

li a{

/*不起作用行内元素

高度是盒子的高度50px 不起作用,因为是行内元素

需要转化为行内快元素*/

height: 50px;

display: inline-block;

padding: 0 10px;

}

li a:hover{

background-color: yellowgreen;

padding: 0 10px;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

实现导航栏二:

代码:

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

.nav{

height: 55px;

background: url(img/head_bg.jpg);

border-top: 1px solid red;

/*这是为了设置垂直居中

可以继承*/

line-height: 55px;

}

.nav li{

/*这是设置去掉点*/

list-style: none;

/*在一行显示*/

float: left;

/*背景默认在左边显示*/

background: url(img/li_bg.png) no-repeat right;

/*padding-left: 10px;*/

/*padding-right: 10px;*/

}

ul{

margin-left: 390px;

}

height: 55px;

display: inline-block;

padding: 0 10px;

}

a:hover{

background: yellowgreen;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

网页布局

案例一: 实现以下效果:

代码:

<!DOCTYPE html>

<html>

<head>

{

/*CSS初始化*/

h1,h2,h3,h4,h5,h6,body{

margin: 0;

padding: 0;

}

.box{

width: 980px;

height: 200px;

background-color: #DBDBE0;

margin: 0 auto;

}

.header{

height: 50px;

background-color: black;

}

.container{

height: 600px;

background-color: red;

}

.contet{

width: 680px;

height: 600px;

background-color: blue;

float: left;

}

.sidebar{

width: 300px;

height: 600px;

background-color: palegoldenrod;

float: right;

}

.footer{

height: 50px;

background-color: fuchsia;

}

</style>

</head>

<body>

文字

</div>

</div>

</div>

</div>

</body>

</html>

案例二:实现以下效果:

实现思路:

实现代码:

<!DOCTYPE html>

<html>

<head>

/*css初始化*/

h1,h2,h3,h4,h5,h6,body{

margin: 0;

padding: 0;

}

.box{

width: 980px;

height: 700px;

background-color: goldenrod;

margin: 0 auto;

}

.header{

height: 50px;

background-color: black;

}

.content{

height: 600px;

background-color: palegreen;

}

.left{

width: 90px;

height: 600px;

background-color: blue;

float: left

}

.right{

width: 90px;

background-color: blueviolet;

height: 600px;

float: left;

}

.middle{

width: 800px;

background-color: pink;

height: 600px;

float: left;

}

.m-top{

width: 800px;

height: 300px;

background-color: hotpink;

}

.m-bottom{

width: 800px;

height: 300px;

background-color: seagreen;

}

.footer{

height: 50px;

background-color: red;

}

</style>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

2.3清除浮动

清除浮动不是删除浮动

清除浮动指的是清除浮动的影响

注意:

当子元素设置了浮动,父元素没有高度的时候,造成页面混乱

这种情况下进行清除浮动

/*清除浮动一*/

.clearfix{

clear: both;

}

/*清除浮动方式二*/

/*overflow: hidden;*/

/*清除浮动方式三:*/

/*.clearfix:after{

content:'';

display: table;

clear: both;

height: 0;

/*line-height: 0;*/

/*visibility: hidden;*/

/*}*/

2.4清除浮动的几种方式

使用: clear: left/right/both

在要清除浮动的元素后面添加一个标签

给父盒子设置overflow:hidden

如果父盒子中有定位的元素,一般不推荐使用该种方式清除浮动

使用伪元素清除浮动

2.5 Overflow的使用

hidden: 将超出的部分进行隐藏

auto

如果内容超出盒子,那么给盒子设置滚动条

如果内容没有超出盒子,那么不显示滚动条

scorll

3.定位

方位名称:

left right top bottom

3.1静态定位(static)

用法:

Position:static

静态定位就是元素标准流的显示方式

3.2 绝对定位(absolute)看脸型

用法:

　　Position: absolute

特点:

1. 当给一个单独的元素设置绝对定位,以浏览器左上角(body)为

基准设置定位的

2. 当盒子发生嵌套关系的时候,如果父盒子没有设置定位,子盒子设置

定位以浏览器的左上角为基准设置定位

3. 当盒子发生嵌套关系的时候,如果父盒子设置定位,子盒子设置定位的

时候,会以父盒子左上角为基准,设置定位

4. 给盒子设置了绝对定位,该盒子不占位置(脱标)

5. 给行内元素设置绝对定位后,该元素转化为了行内块元素

注意: 元素设置了绝对定位后,通过具体的方位名称可以随便设置元素的

位置

3.3 相对定位(relative)(自恋型)

元素设置了相对定位后占原来的位置

设置相对定位,以自己的位置为参照设置位置

相对定位不能进行元素的模式转换

子绝父相(子元素设置绝对定位,父元素设置相对定位)

3.4固定定位 (fixed)

固定定位不占位置

将行内元素转化为行内快元素

李洪强和你一起学习前端之(8)浮动,网页布局,定位相关推荐

李洪强和你一起学习前端之面试题
前言本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性.上面没有答案,我就整理了一下,从网上找了一些相关问题的答案.里面有一部分问题的答案我也没有进行考证 ...
李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作 ...
李洪强经典面试题146-网络
李洪强经典面试题146-网络网络 http请求方式? 通常,HTTP的请求方式有3种,分别是:POST.GET.HEAD.POST和GET方法是用于数据发送的. POST:它将要发送的数据单独放 ...
李洪强iOS经典面试题37-解释垃圾回收的原理
李洪强iOS经典面试题37-解释垃圾回收的原理问题我们知道,Android 手机通常使用 Java 来开发,而 Java 是使用垃圾回收这种内存管理方式. 那么,ARC 和垃圾回收对比,有什么优点 ...
李洪强iOS开发本人集成环信的经验总结_01环信SDK的导入
李洪强iOS开发本人集成环信的经验总结_01环信SDK的导入 01 - 直接在项目中导入SDK和一些静态库这个时候,没有错误的编译没有错误的话,就说明SDK已经配置成功还有一种方法是用cocoap ...
李洪强iOS经典面试题144-数据存储
李洪强iOS经典面试题144-数据存储数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...
李洪强iOS经典面试题153- 补充
李洪强iOS经典面试题153- 补充补充有空就来解决几个问题,已经懒癌晚期没救了... UML 统一建模语言(UML,UnifiedModelingLanguage)是面向对象软件的标准化建模 ...
和李洪强一起学设计01 PS第一天
和李洪强一起学设计01 PS第一天
李洪强iOS开发之RunLoop的原理和核心机制
李洪强iOS开发之RunLoop的原理和核心机制搞iOS之后一直没有深入研究过RunLoop,非常的惭愧.刚好前一阵子负责性能优化项目,需要利用RunLoop做性能优化和性能检测,趁着这个机会深入研 ...

李洪强和你一起学习前端之(8)浮动,网页布局,定位

李洪强和你一起学习前端之(8)浮动,网页布局,定位相关推荐

最新文章

热门文章