草庐IT

HTML&CSS-盒模型运用居中方式合集

566adsasdw55 2023-03-28 原文
方法：定位，外边距，内边距，层级，边框；
一个元素；
两个元素；
三个元素.
<!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>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="father1">
    <div class="son1"></div>
  </div>
方法1
  <div class="father2">
    <div class="son2"></div>
  </div>
方法2
  <div class="father3">
    <div class="son3"></div>
  </div>
方法3
  <div class="father4">
    <div class="son4"></div>
  </div>
方法4
  <div class="father5">
    <div class="son5"></div>
  </div>
  <!-- 前五种为两个元素的居中方式 -->
方法5
  <div class="six"></div>
方法6
  <div class="seven"></div>
  <!-- 后两种为1个元素的居中方式 -->
方法7
  <div class="father8">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>
</div>
  </div>
  <!-- 最后一种为3个元素的居中方式 -->
方法8
</body>
</html>
 
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
清除浏览器默认样式

.father1 {
  width: 400px;
  height: 400px;
  background-color: #fc4;
  position: relative;
}

.son1 {
  width: 200px;
  height: 200px;
  background-color: #f44;
  position: absolute;
  top: 100px;
  left: 100px;
}
/* 第一种居中方式 */
定位

.father2 {
  width: 200px;
  height: 200px;
  background-color: #f77;
  position: relative;
}

.son2 {
  width: 100px;
  height: 100px;
  background-color: #ff7;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
/* 第二种居中方式 */
定位+外边距+百分比

.father3 {
  width: 200px;
  height: 200px;
  background-color: #0f0;
  position: relative;
  /* overflow: hidden; */
  /* 解决margin塌陷问题 */
}

.son3 {
  width: 100px;
  height: 100px;
  background-color: #77f;
  position: absolute;
  margin-left: 50px;
  margin-top: 50px;
}
/* 第三种居中方式 */
定位+外边距

.father4 {
  width: 100px;
  height: 100px;
  padding: 50px;
  background-color: #f44;
}

.son4 {
  width: 100px;
  height: 100px;
  background-color: #0f7;
}
/* 第四种居中方式 */
内边距

.father5 {
  width: 100px;
  height: 100px;
  border: 50px solid #f444;
  background-color: #f444;
}

.son5 {
  width: 100px;
  height: 100px;
  background-color: #4fff;
}
/* 第五种居中方式 */
边框

.six {
  width: 200px;
  height: 200px;
  background-color: #f9f67f;
  border: 100px solid #08c;
}
/* 第六种居中方式 */
一个元素 边框

.seven {
  width: 0px;
  height: 0px;
  padding: 100px;
  background-color: #f78;
  border: 50px solid #99f4;
}
/* 第七种居中方式 */
一个元素 边框+内边距

.box1 {
  width: 200px;
  height: 200px;
  background-color: #f075;
  position: absolute;
  z-index: 1;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: #ff99;
  position: absolute;
  z-index: 2;
  top: 50px;
  left: 50px;
}

.father8 {
  position: relative;
}
/* 第八种居中方式 */
3个元素 定位+层级
amp运用divspancolorHtml/Css

有关HTML&CSS-盒模型运用居中方式合集的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  4. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  5. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  6. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  7. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  8. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  9. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  10. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

随机推荐