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

最新推荐文章于 2024-05-07 07:18:22 发布
最新推荐文章于 2024-05-07 07:18:22 发布
阅读量116 收藏
点赞数
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/LiLihongqiang/p/7191913.html
版权

2.1标准流(文档流)

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

让两个盒子在一行显示

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.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 class="one">

 

</div>

<div class="two">

 

</div>

</body>

</html>

 

 

一个靠左边,一个靠右边

2.2浮动

Float: left/right

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

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

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

 

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

 

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

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

 

实现导航栏一: 

代码: 

 

 

<!DOCTYPE html>

 

<html>

 

<head>

 

<meta charset="utf-8" />

 

<title></title>

 

<style type="text/css">

 

 

 

/*文字宽度不一样,不建议给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>

<div class="nav">

<ul>

 

<li>

 

<a href="">百度</a>

 

</li>

 

<li>

 

<a href="">百度一下</a>

 

</li>

 

<li>

 

<a href="">么么哒</a>

 

</li>

 

</ul>

 

 

 

</div>

 

</body>

 

</html>

 

 

实现导航栏二:

代码: 

 

 

<!DOCTYPE html>

 

<html>

 

<head>

 

<meta charset="utf-8" />

 

<title></title>

 

<style type="text/css">

 

*{

 

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;

 

}

 

 

 

a{

 

height: 55px;

 

display: inline-block;

 

padding: 0 10px;

 

}

 

a:hover{

 

background: yellowgreen;

 

}

 

</style>

 

</head>

 

<body>

 

 

 

<div class="nav">

<ul>

 

<li>

 

<a href="">智能手机</a>

 

</li>

 

<li>

 

<a href="">智能手机</a>

 

</li>

 

<li>

 

<a href="">智能手机</a>

 

</li>

 

 

 

</ul>

</div>

  </body>

</html>

 

网页布局

案例一: 实现以下效果: 

 

代码: 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

{

/*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 class="box">

文字

<!--头部-->

<div class="header">

 

</div>

<!--内容部分-->

<div class="container">

<!--内容里面有两个盒子-->

<!--内容盒子左边-->

<div class="contet">

 

</div>

<!--内容盒子右边-->

<div class="sidebar">

 

</div>

 

</div>

<!--尾部-->

<div class="footer">

 

</div>

 

</div>

</body>

</html>

 

案例二:实现以下效果:

 

实现思路: 

 

 

 

实现代码: 

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

/*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 class="box">

<!--头部-->

<div class="header"></div>

<!--主体部分-->

<div class="content">

<!--主体-左边-->

<div class="left"></div>

<!--主体-中间-->

<div class="middle">

 

<div class="m-top"></div>

<div class="m-bottom"></div>

</div>

<!--主体-右边-->

<div class="right"></div>

</div>

<!--尾部-->

<div class="footer"></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)

 

 

 固定定位不占位置

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

 

转载于:https://www.cnblogs.com/LiLihongqiang/p/7191913.html

a359798678
关注
前端VUE【实战】—— antd tree树形控件进行增删改查父子节点
2401_84447362的博客
04-27 1046
具体的效果图如下：直接上代码vue组件新增一级目录
c语言定义64位的变量,李洪强-C语言9-C语言的数据,变量和常量
weixin_42112685的博客
05-19 2153
一、数据图片文字等都是数据，在计算机中以0和1存储。(一)分类数据分为静态数据和动态数据。①.静态数据：一些永久性的的数据，一般存储在硬盘中，只要硬盘没坏数据都是存在的。一般以文件的形式存储在硬盘上，电脑关机重启后依然存在。②.动态数据：程序运行过程中，动态产生的的临时数据，一般存储在内存中，内存的存储空间一般较小，计算机关闭后这些数据就会被清除。软件或者电脑关闭则这些临时数据会被清除。③....
前端之浮动布局
weixin_46372074的博客
03-14 974
前端之浮动布局引入浮动图片浮动段首字母下沉多列浮动布局两列布局三列布局清除浮动浮动问题box-sizing修复下图问题 最初,文本内浮动图像,文字环绕在它的左边或右边. 之后,任何东西都可以浮动,出现了drop-cap（首字下沉）. 现在,被看作传统的布局方法。 引入浮动 图片浮动 <style> /* 浮动图片 图片向左浮动,此时文本会包围过来,然后用图片外边距向右推开文本,留出间隙 */ img { float: left; margin-right: 30px; } &l
【前端初学者】【案例】之CSS浮动布局：简单网页布局练习——附代码实操（下）
HY_Sophie的博客
11-23 748
【前端初学者】【案例】之CSS浮动布局：简单网页布局练习——附代码实操（下）
【前端初学者】【案例】之CSS浮动布局：简单网页布局练习——附代码实操（上）
HY_Sophie的博客
11-23 704
【前端初学者】【案例】之CSS浮动布局：简单网页布局练习——附代码实操（上）
2024年最全css网页布局之浮动及其实战案例（超详细）(1)，花费近一年时间整理的前端核心知识清单
最新发布
2401_84437095的博客
05-07 628
1，盒模型2，如何实现一个最大的正方形3，一行水平居中，多行居左4，水平垂直居中5，两栏布局，左边固定，右边自适应，左右不重叠6，如何实现左右等高布局7，画三角形8，link @import导入css9，BFC理解。
高速公路不良天气条件下最高车速限制合理取值_李洪强.pdf
08-29
为解决这些问题，论文提出了一个计算模型，以制动反应时间和制动距离之和小于能见距离为前提，推导出不良天气下最高车速限制的计算公式。根据这个公式，作者给出了不同能见度、附着系数和纵坡条件下，雾天、雨天和...
html中行高是指字的高度嘛,CSS行高line-height的理解
weixin_35645077的博客
06-28 2160
一、行高的字面意思“行高“顾名思义指一行文子的高度。具体来说是指两行文子间基线间的距离。基线是在英文字母中用到的一个概念，我们刚学英语的时候使用到的那个英语本子每行有4条线，其中底部第二条线就是基线，是a,c,z,x等字母的地边线。————————顶线(top line)——————————————————————————中线(middle line)———————————————————————...
全寿命周期费用分析法在区域供冷系统中的应用
"区域供冷系统经济参数研究，蔡勤龙，李洪强，采用全寿命周期费用分析法（LCC）研究区域供冷系统的经济效益，考虑电力价格、管道流速、供回水温差和用户负荷密度等因素对系统经济性的影响，计算经济供冷半径和经济...
飞思卡尔电磁组技术报告
07-02
"飞思卡尔电磁组技术报告"是针对第九届"飞思卡尔"杯全国大学生智能汽车竞赛的一份技术性文档，由大连工业大学的星海一号I团队制作，成员包括周文韬、李洪强和丁相海，指导教师为李宝营和祁建广。报告遵循了竞赛规定...
前端基础第6天（CSS 浮动布局）
qq_39380737的博客
07-18 213
文档流的定义： 元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。 浮动布局的定义 浮动布局 float: left | right 特点： ★元素浮动之后不占据原来的位置（脱标） ★浮动的盒子在一行上显示 ★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block...
浮动布局+案例
lv_suri的博客
07-10 404
html元素分类：要背块元素：可以设置宽度和高度，独立成行h1-6、p、div、ul、li行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span行内块元素：可以设置宽度和高度，不独立成行img、input、buttondisplay属性：block：转换为块元素，inline转换为行内元素 none隐藏元素转换成块元素 设置添加浮动 空div清除浮动效果clear：both 如果比较多要清除浮动，可以用以下方法：......
百度前端学院第七、八天案例（浮动方法）
shanshanerchuan的博客
11-19 197
百度前端学院第七、八天案例（浮动方法） 素材图： （一）浮动布局 注： （1）由于主导航栏布局中第一个盒子没有下边框，就导致整个导航栏区域不能直接设置下边框，这个问题比较头疼，我才用的是左中右三个盒子，左右两个盒子只设置一个下边框，但是感觉还不是特别好的方法，如果有同学有比较好的方法可以在评论区留言，看到了一定及时回复。 （2）内容区域是十个大小不等的li，要是一个个弄起来非常浪费时间，我就简化为9个大小相等的盒子了。 html文件： <!DOCTYPE html> <html lang
前端打卡--12浮动布局，定位布局
qq_41083616的博客
11-02 144
明天继续加油！
web前端-CSS-浮动
jinchenpeng的博客
05-30 300
值得注意的是：
浮动案例--常用的网页布局
一夜奈何梁山
02-01 699
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
CSS浮动布局案例
weixin_33701564的博客
09-05 379
CSS浮动布局案例 这里介绍下float布局的几种常见布局方式，如果对基础知识有疑问可以去看一下上一篇文章CSS浮动基础知识 流体布局 顾名思义流体布局就是布局格式可以随着窗口大小的变化而变化，具体实现如下 代码演示(后续CSS代码均在此代码基础上进行修改) <body> <div class="container clearfix"> &l...
css浮动案例
前端小99的博客
04-13 2175
彼此相邻的浮动元素清除浮动 - 使用 clear元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。事例案列：&lt;style&gt;* {    box-sizing: border-box;}body {    ma...
【CSS】浮动 ④ ( 浮动布局案例 - 电商布局模块 | 案例分析 | 布局测量摆放 | 浮动布局代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-22 873
一、案例效果 二、案例分析 三、布局测量摆放 四、完整摆放效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值