草庐IT

Css 常用布局方式

枕边话 2023-03-28 原文

1.CSS 参考手册

2.元素的分类

首先我们要知道一共有几种元素

1.行内元素(可以与其他行内元素位于同一行,不会以新行开始高度、宽度不能设置)

2.块级元素(每个块级元素都从新的一行开始,其后的元素也另起一行。默认排列方式:从上至下元素的高度、宽度、行高、内外边距都可设置)

3.行内块元素(和其他元素都在一行上元素的高度、宽度、行高、内外边距 都可设置)

3.布局的三大分类

1.float浮动布局

浮动元素的顶部,在标准文档流的底部

  1. 对div2进行浮动:浮动元素的顶部,在标准文档流的底部
  2. 对div3和div3进行浮动:浮动元素会显示在同一行,依次排列
  3. 对div2、div3和div4进行浮动:如果宽度不够,被浮动的元素会自动换行
  4. 对div2、div4进行浮动:浮动元素的顶部,在标准文档流的底部

2.position 定位

1.relative 相对定位:相对原来位置,偏移一定距离

2.absolute 绝对定位:相对于position不为static的父元素,偏移一定距离

父相子绝:父元素relative,子元素absolute

3.fixed 固定定位:相对浏览器定位

4.static 没有定位

3.flex布局

1.父元素属性

row   				行排布
row-reverse			同一行反向排布
column				列排布
column-reverse		同一列反向排布

2.justify-content 主轴子元素排列

flex-start  		从头部排列
flex-end			从尾部排列
center				居中排列
space-around		平分剩余
space-between		两边贴边,平分剩余

3.align-items 侧轴方向,子元素的排列

flex-start			从上到下
flex-end			从下到上
stretch				拉伸(子元素去掉高度)
center				居中

4.flex-wrap属性 子元素是否换行

wrap    换行
no-wrap    不换行

5.align-content属性 子元素整体,在父元素中的对齐方式

flex-start		侧轴头部排列
flex-end		侧轴尾部排列
center			居中排列
space-around	侧轴平分空间
space-between	两侧贴边,平分剩余空间

2.子元素属性

1.flex属性(份数)

flex:1

2.align-self 属性(自己的对齐方式)

stretch			拉伸
center			居中
start			左对齐
end				右对齐

本文转自 https://blog.csdn.net/m0_73302873/article/details/126372410,如有侵权,请联系删除。

有关Css 常用布局方式的更多相关文章

  1. 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

  2. css - 用 watir 检查标签类? - 2

    我有一个div,它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素?开始元素看起来像这样。如果输入不正确,添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目,Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  4. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如,application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文,我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢?我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件?同样,我正在按照一些说明安装TwitterBootstrap(http:

  5. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下,分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  6. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中,所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件,并将这些值传递给其他文件,这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用,变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  7. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签,同时将markdown用于入口文件?例如,当我想突出显示某个段落时? 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说,您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  8. css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2

    我在一台Windows764位机器上使用Sass和Ruby(最新版本),我正在我的家庭服务器上处理一个共享文件夹。(但是,我不得不承认问题本身也出现在服务器上,因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存,检测到变化,我的style.css被直接覆盖。之后,我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改,但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites

  9. ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件? - 2

    是否有一个SASS扩展可以采用SASS样式表,找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动?我真的不想手动创建所有混入,也不想手动编写代码。我确定一定有这样的扩展名,但我找不到它。帮忙? 最佳答案 有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css,因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。 关于ruby-用

  10. ruby-on-rails - 是否有一个库可以自动进行 CSS spriting? - 2

    CSSSpriting确实可以提高性能,但它并不是最容易阅读和维护的东西。是否有任何工具可以让我单独对图像进行编码,然后将它们聚合起来并用正确的蒙太奇子集替换HTML?我特别考虑RubyonRails插件,但如果有其他语言的包,我很乐意移植它。 最佳答案 SmartSprites试一试。 关于ruby-on-rails-是否有一个库可以自动进行CSSspriting?,我们在StackOverflow上找到一个类似的问题: https://stackoverf

随机推荐