CSS浮动、定位总结

一、CSS 浮动
1、 CSS 浮动属性简介
CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧
float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动
掌握CSS基础属性
float 属性的常用值包括:
left 靠左浮动
right 靠右浮动
none 不浮动

2、CSS 浮动应用

3、CSS 左右浮动
3.1html正常文档

3.2CSS 靠左浮动

4、CSS 清除浮动

（注意理解清除浮动后box的位置）

二、CSS定位
1、CSS 定位属性简介
CSS 中 position 规定了元素的定位方式
CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置
position 属性的可选值包括:
relative 相对定位
absolute 绝对定位
fixed 固定定位
static 默认值

2、CSS 相对定位
不脱离文档流布局，只改变自身的位置，文档流原位置遗留空白区域，定位的起始位置为此元素原文档流的位置

3、CSS 绝对定位
脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素(position不为static)，否则为Body文档本身

三、CSS完成《自适应布局》练习
1、实例代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>宽度自适应布局</title><style>.clearfix:after {clear: both;display: block;}.left {float: left;width: 110px;background:mediumpurple;height: 80px;}.right {float: right;width: 110px;background: palegreen;height: 80px;}.center {background:lightsalmon;margin-left: 110px;margin-right: 110px;height: 80px;}</style></head><body><div class="wrap clearfix"><div class="left">第一个元素中的内容。</div><div class="right">第二个元素中的内容</div><div class="center">第三个元素中的内容</div></div></body>
</html>

2、实现效果

四、完成《阿里巴巴注册》练习
1、实例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.first {height:110px;background-image: url(图片3.png);}.div1 {   margin-left:90px;}.last {height:70px;background-image: url(图片2.png);}</style>
</head>
<body><div class="first"></div><div class="div1"><form action=“#” method=“post”><table align="center"><tr><td>电子邮箱： </td>           <td><input type="text" name="username"></td></tr><tr><td>会员登录名： </td>           <td><input type="text" name="username"></td></tr><tr><td>密码： </td>           <td><input type="text" name="username"></td></tr><tr><td>再次输入密码： </td>           <td><input type="text" name="username"></td></tr><tr><td>会员身份：</td>           <td>         <input type="radio" name=”gender" value="male" checked>买家<input type="radio" name=”gender" value="male" checked>卖家<input type="radio" name=”gender" value="male" checked>两者都是 </td></tr><tr><td>验证码： </td>           <td><input type="text" name="username"><img src="图片4.png"width=70px height="22"><a href="#end1">看不清？换一张 </a></td></tr><tr><td></td> <td><img src="图片1.png"/></td></tr><tr><td></td> <td> <textarea name= "myBrief" cols="40" rows="6">欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。</textarea></td></tr><tr><td ><br><br><br><br><br><br></td></tr></table></form></div><div class="last"></div>
</body>
</html>

2、实现效果

五、CSS思维导图

（喜欢的请给个关注哦）

CSS浮动、定位总结相关推荐

CSS浮动定位与背景样式
CSS浮动定位与背景样式 1.浮动与定位 1.1 浮动的基本概念本质功能 : 实现块元素并排布局使用要点 : 1.要浮动,并排的盒子都要设置浮动2.父盒子宽度足够,否则会被迫换行3.子盒子会按顺序 ...
Python学习 Day 042 - css 浮动定位
主要内容 1.css浮动转载于:https://www.cnblogs.com/wcx666/p/9924717.html
css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行,并 ...
css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
前端学习（2846）：css浮动和定位布局
<< 我们一起来做秒杀 >>一.css浮动 float none left rightclearnone both left right二.css定位#div_test{pos ...
CSS排版练习小作业，文字围绕图片显示，基本的float浮动定位
简单的css排版基本的float浮动定位文字围绕图片显示 css代码,float分成两块 <style type="text/css">div.float1{flo ...
CSS浮动、定位及显示隐藏元素
一.CSS浮动 1.标准流(普通流/文档流:即标签按规定默认排列方式) 块级元素独占一行,从上到下排列. 行内元素会按顺序,从左至右排列,碰到父级元素边缘则自动转行. 2.为什么浮动? (1)多个块级 ...
CSS表格与浮动定位
一.表格 1.表格的常用属性 1.边距属性:padding 2.尺寸属性:width,height 3.文本格式化属性: font-* text-align,color,text-i ...
经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

CSS浮动、定位总结

CSS浮动、定位总结相关推荐

最新文章

热门文章