CSS浮动_浮动css-程序员宅基地

技术标签: css  html  css3  

一:传统网页布局的三种方式

网页布局的本质–用CSS来摆放盒子,把盒子摆放到相应的位置,css提供了三种传统布局方式,分别是标准流浮动定位三种。


二:标准流

所谓标准流就是标签按照规定好默认方式排列

1.块级元素会独占一行,从上向下排列
常用元素:div, hr, p, h1-h6, ul, ol, dl, form, table
2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘自动换行
常用元素:span, a, i, em等

标准流是最基本的布局方式


三:为什么需要浮动

有很多布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用:可以让多个块级元素一行内排列显示


四:什么是浮动

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:

选择器 {
    
	float: 属性值;
}
属性值 作用
none 元素不浮动(默认)
left 元素向左浮动
right 元素向右浮动

两个左浮动
在这里插入图片描述
在这里插入图片描述
一左浮动一右浮动
在这里插入图片描述


五:浮动特性(重点)

1.浮动元素会脱离标准流(脱标)

设置了浮动的元素最重要特性
(1)脱离标准流的控制移动到指定位置
(2)浮动的盒子不再保留原先的位置
在这里插入图片描述

2.浮动元素会一行内显示并且元素顶部对齐
在这里插入图片描述
注意点
浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多的盒子就会另起一行
在这里插入图片描述
在这里插入图片描述
3.浮动元素会具有行内块元素特性
任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。

1.如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动之后,它的大小根据内容来决定
2.浮动的盒子中间是没有缝隙的,是紧挨着一起的
3.行内元素同理
在这里插入图片描述
在这里插入图片描述


六:浮动元素和标准流父级搭配

为了约束浮动元素位置,网页布局一般采取的策略是:
先用标准流父元素排列上下位置,之后内部子元素采取浮动排列左右位置
在这里插入图片描述
案例:

<div class="box">
        <div class="left"></div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
<style>
        * {
    
            margin: 0;
            padding: 0;
        }
        .box {
    
            width: 1380px;
            height: 690px;
            background-color: aqua;
            margin: 50px auto;
        }
        .left {
    
            width: 260px;
            height: 690px;
            background-color: brown;
            float: left;
        }
        .right {
    
            width: 1120px;
            height: 690px;
            background-color: blueviolet;
            float: left;
        }
        .right div {
    
            width: 260px;
            height: 330px;
            float: left;
            background-color: chartreuse;
            margin-left: 20px;
            margin-bottom: 30px;
        }
    </style>

在这里插入图片描述


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Czc1357618897/article/details/122980847

智能推荐

i2c 驱动工作_i2c burst write-程序员宅基地

文章浏览阅读884次。在新版芯片(fpga)上写驱动:1. 新版sx_i2c burst write

今日头条的核心架构解析-程序员宅基地

文章浏览阅读84次。今日头条创立于2012年3月,到目前仅4年时间。从十几个工程师开始研发,到上百人,再到200余人。产品线由内涵段子,到今日头条,今日特卖,今日电影等产品线。一、产品背景今日头条是为用户提供个性化资讯客户端。下面就和大家分享一下当前今日头条的数据(据内部与公开数据综合):5亿注册用户2014年5月1.5亿,2015年5月3亿,2016年5月份为5亿。几乎..._用今日头条的实战复盘,教你大厂都在用的「信息降噪」方

boost regex 正则表达式使用学习_eeexfindregexboost-程序员宅基地

文章浏览阅读7.3k次。什么是正则表达式?正则表达式是一种用来描述一定数量文本的模式。Regex代表Regular Express。如果您不知道什么是正则表达式,请看这篇文章http://blog.csdn.net/begtostudy/archive/2007/11/11/1879206.aspx有了正则表达式的基础,问题是如何使用。我们以boost::regex来说先看一个网上经典的例子。#i_eeexfindregexboost

C语言:float、double表示范围_c语言浮点型范围-程序员宅基地

文章浏览阅读7.8k次,点赞3次,收藏13次。float:1bit(符号位) 8bits(指数位) 23bits(尾数位)double:1bit(符号位) 11bits(指数位) 52bits(尾数位)所以,float的指数范围为 -127 ~ +129,而double的指数范围为 -1023 ~ +1024,并且指数位是按补码的形式来划分的。  其中负指数决定了浮点数所能表达的绝对值最小的非零数;而正指数决定了浮点数所能表达的绝对值最大的数,也即决定了浮点数的取值范围。  float的范围为-2^128 ~ +2^128,也即-3.40E_c语言浮点型范围

SDNU-OJ:1095.Ignatius and the Princess IV-程序员宅基地

文章浏览阅读370次。SDNU-OJ:1095_1095.ignatius and the princess iv

聊聊H5与JS近几年的黑科技_世界h5黑科技-程序员宅基地

文章浏览阅读6.7k次,点赞3次,收藏16次。聊聊H5与JS近几年的黑科技自ajax技术的诞生,编程界兴起了一股WEB开发热,facebook,Twitter等众多大佬级企业都在网页应用上大放异彩,这十年我们见证了前端技术的崛起。这期间产生了众多脱离了浏览器的JS和H5开发的黑科技。移动端的react native,cordova,native.js;PC端的Node.js,NW.js;当然还有前端本身的众多框架,vue.js,jquer..._世界h5黑科技

随便推点

DefaultTableModel设置可选中但不可编辑_defaulttablemodel 值不可编辑-程序员宅基地

文章浏览阅读1.9k次。要想设置DefaultTableModel设置可选中但不可编辑,必须重写isCellEditable方法,把true改为false;代码如下:/*** 重写方法*/tableModel = new DefaultTableModel(action.findCharge(), action.head){public boolean isCellEditable(int ..._defaulttablemodel 值不可编辑

MySQL Cluster管理节点配置文件-数据节点4G内存_ndb cluster 需要多大内存-程序员宅基地

文章浏览阅读1w次。自己测试机器上搭建使用,大家可以参考一下[NDBD DEFAULT]#TotalSendBufferMemory = 256MNoOfReplicas=2DataMemory=2500MIndexMemory=256MDataDir=/var/lib/mysql-cluster#FileSystemPath=/data/dbdata#Redo logFragmentLo..._ndb cluster 需要多大内存

\t\tlinux学习之安装ttylinux(世界最小的linux操作系统)(转载)_bootcd-i486-8.1.iso.gz下载-程序员宅基地

文章浏览阅读2k次。一、资源平台: 虚拟机:Oracle公司的virtual Boxttylinux镜像源文件,官方下载(选第一个下载)http://linux.yosh.se/ttylinux/二、安装:第一步,用WinRAR解压缩bootcd-i486-8.1.iso.gz,变成,bootcd-i486-8.1.iso镜像文件备用。第二步,在Virtual Box中新建一个虚拟电脑,并指定内存大小和硬盘大小,我们_bootcd-i486-8.1.iso.gz下载

element-ui 的el-tooltip的样式修改及添加事件_elementui tooltip 添加点击事件-程序员宅基地

文章浏览阅读2.1k次。<el-tooltip placement="bottom-end" effect="light" popper-class="testtooltip"> <div slot="content" @click="$router.push('/')" class="content" >实物商品</div> <div slot="content" @click="$router.push('/shopMall/integralShop.._elementui tooltip 添加点击事件

vs扩展emacs插件_visualstudio 怎么用emacs扩展-程序员宅基地

文章浏览阅读1.2k次。安装微软官方插件下载地址【free】目前只提供vs2010下载:http://visualstudiogallery.msdn.microsoft.com/09dc58c4-6f47-413a-9176-742be7463f92vs2012安装需要对下载到的东西进行处理,此处提供可用于vs2012的插件下载或者自己对下载到的官方插件进行修改修改方法:修改插件后缀名为.zip,解_visualstudio 怎么用emacs扩展

Linux系统编程 —— 回收子进程 wait_while(wpid = waitpid(-1,null,0))-程序员宅基地

文章浏览阅读305次。孤儿进程一个父进程运行结束,其某些子进程还在运行,这些子进程则为孤儿进程。这些孤儿进程将被init进程(进程号为1)所收养,并由init进程对它们完成状态收集工作。僵尸进程进程终止,父进程尚未回收,子进程残留资源(PCB)存放于内核中,变成僵尸(Zombie)进程。wait函数// 成功:清理掉的子进程ID; 失败:-1(没有子进程)pid_t wait..._while(wpid = waitpid(-1,null,0))

推荐文章

热门文章

相关标签