CSS布局——元素浮动与定位篇

el/2024/4/13 14:01:29

一、元素浮动(float)

定义:浮动是基于CSS现代Web设计用到的主要功能之一,它可以用来创建多列的网页布局。

1、属性值:none(不浮动)、left(向左)、right(向右)

注:fioat属性可以应用于任何元素

2、行为

  • 当float不等于none引起元素浮动时,元素将被视作块级,等于设置display: block
  • 当浮动一个文本类型元素时,必须指定其width宽度,如果不设置,内容折叠到最小宽度
  • 浮动元素不会穿过父级元素的padding区域
  • 浮动元素的magin是不会重合的
3、清除浮动影响(clear)
定义:阻止一个元素出现在浮动元素的后面
属性值:none:允许两边都有浮动
left:不允许有左边有浮动
right:不允许右边有浮动
both:不允许有浮动
注:clear属性只能应用于块级元素

二、定位
1、定位类型

通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

position 属性值的含义:

static

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原

来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身


元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。







http://www.ngui.cc/el/4466111.html

相关文章

JavaScript编程--任意输入一个数判断是不是闰年,数列求和练习

&#xfeff;&#xfeff; 1、任意输入一个数判断是不是闰年&#xff1a; (1).能被4整除&#xff0c;但同时不能被100整除的年份都是闰年 (2).能被400整除的年份是闰年 相应代码如下&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta…

JvaScript--使用js添加数据,点击按钮,将内容放入表格中

&#xfeff;&#xfeff; 题目要求&#xff1a; 创建一个Student类&#xff0c;有name、age属性和方法showInfo()&#xff0c; 在页面上显示&#xff1a; <p>姓名 | 年龄</p> <div> </div> <input type"button" value"显示下一…

JavaScript--利用setInterval或setTimeout实现背景颜色轮播

Window属性---暂停和定时器 暂停 var timeoutObj = setTimeout("执行程序",毫秒) setTimeout(引用,1000)setTimeout("执行程序",1000)clearTimeout(timeoutObj) 定时器 var intervalObj = setInterval(("执行程序",毫秒) setInterval(引用,…

JavaScript--点击颜色,为主题更换背景颜色

鼠标点击颜色块&#xff0c;指定区域背景颜色更换 完整代码&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style type"text/css">div, ul {margin: 0;…

JavaScript--简单实现按回车键,光标跳转到后一文本框中和表单提交

功能: 1、按回车键,光标跳转到下一文本框中 2、验证表单,若用户名或密码为空,后面出现提示信息 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style type="text/css…

JavaScript+CSS实现图片动态轮播dynamic_slider

基本功能&#xff1a; 1、图片自动轮播&#xff0c;当鼠标移动在图片上时&#xff0c;图片停止播放 2、点击左右键显示上一张图片或下一张 3、当鼠标放在12345这几个数字上时&#xff0c;显示数字所对应的图片 完整代码如下&#xff1a; <!DOCTYPE html> <html>…

CSS--利用CSS实现一个简易的二级菜单(仿京东)

功能&#xff1a;仿照京东首页&#xff0c;利用CSS简单实现一个二级菜单 完整代码&#xff1a; <pre name"code" class"javascript"><!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><…

JavaScript--点击按钮实现复选框全选和反选功能

功能实现&#xff1a; 1、点击全选和反选按钮&#xff0c;实现复选框全选和部分选的功能 2、点击全选复选框&#xff0c;实现子复选框全选或全不选功能 完整代码&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF…

JavaScript--点击按钮实现选中选项移动到指定位置(下拉框)或全部选项移动

功能实现: 现有4个按钮:向左,向右,全向左,全向右。点击按钮实现所对应功能,将选中选项移动 完整代码: <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style type="…

XHTML5 ----- 拖拽事件 (拖拽一段文字和图片案例)

1、拖拽一段文字 功能实现: 拖拽一段文字到一个区域,复制进去 #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} <div id="div1" ></div> <br /> <p id="drag1">这是一段可移动的段落。请把该段落拖…