CSS布局模型_如何将模型导入布局

CSS布局模型_如何将模型导入布局CSS布局:Flow,Float,Layer(absolute,relative,fixed),堆叠控制

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

在网页中,元素有三种布局模型:

Jetbrains全家桶1年46,售后保障稳定

1、流动模型(Flow)
default,就是块级元素都自上而下的分布,宽度都为100%。内联元素都从左到右水平分布。

2、浮动模型 (Float)
div、p、table、img 等元素都可以设置为浮动。两个 div 显示在一行的代码如下:
div{
    width:200px;
    height:400px;
    border:2px red solid;
    float:left;
}

3、层模型(Layer)
层模型有三种形式:
(1)绝对定位(position: absolute)
div{
    width:200px;
    height:400px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

(2)相对定位(position: relative)

(3)固定定位(position: fixed)

层模型中,各元素可能出现堆叠。堆叠顺序可以用z-index控制,z-index大者在上。z-index相同时,根据CSS声明顺序,靠后者在上。

[1] http://www.5idev.com/p-css_z_index.shtml

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/219172.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java 中队列的使用

    Java 中队列的使用

    2021年11月16日
    44
  • Win10电脑计算机自己跑,Win10做了这9项优化 电脑运行急速提升「建议收藏」

    Win10电脑计算机自己跑,Win10做了这9项优化 电脑运行急速提升「建议收藏」想让系统更快些,就需要优化它。虽然和之前版本相比,Win10在底层性能上已经不错,但毕竟要照顾不同的使用人群,因此它的很多项目还是偏向于保守和大众化的。其实每个人使用Win10的目的都不同,有选择性地关闭一些服务,就可以让Win10跑得更快!装好Win10必做的优化1、替换自带WindowsDefender具体做法:安装第三方杀软,系统将自动关闭WindowsDefender;虽然微软一直在标榜自…

    2022年6月12日
    32
  • pip设置socks5代理

    pip设置socks5代理在国内的网络环境下 使用 pip 下载一下库的时候 经常网络崩溃 这里通过一种简单的前置代理方案来解决 pip 下载过慢的问题 这里主要使用了一个 socksproxifi 在 pip 命令之前加上该命令 那么所有的 pip 流量都会经过设置好的代理 环境我这里的环境是 Ubuntu16 04 只要是 Linux 环境该方法应该都可以 安装 proxychains sudoaptinsta

    2025年7月10日
    0
  • webpack图片压缩_webpack的cdn

    webpack图片压缩_webpack的cdn图片处理url-loader(webpack5之前的处理方式)在项目开发中,我们时长会需要使用到图片,比如在img文件夹中有图片test1.png,然后在normal.css中会引用到图片body

    2022年7月30日
    3
  • css怎么设置注释快捷键,html中注释的快捷键是

    css怎么设置注释快捷键,html中注释的快捷键是html中注释的快捷键是command或ctrl+/超文本标记语言(HyperTextMarkupLanguage),标准通用标记语言下的一个应用。HTML不是一种编程语言,而是一种标记语言(markuplanguage),是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分,其中“…

    2022年6月9日
    58
  • 计算机病毒445端口,关闭135 445端口_445端口关闭方法_怎么防止电脑中勒索病毒「建议收藏」

    计算机病毒445端口,关闭135 445端口_445端口关闭方法_怎么防止电脑中勒索病毒「建议收藏」关闭135445端口_445端口关闭方法_怎么防止电脑中勒索病毒这几天,永恒之蓝勒索病毒迅速传播,让网友们都担惊受怕。而这种勒索病毒基本上都是通过135,137,138,139,445等端口入侵,关闭445135137138139端口是有效预防入侵的方式之一,同时更新微软最新补丁,及时备份重要数据,才能从容应对病毒侵袭,现在就快和小编一起来看看关闭135,137,138,139,44…

    2022年10月17日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号