草庐IT

css宽高自适应

陌一一 2023-10-11 原文

1. 宽高自适应

举个例子看看什么是宽高自适应,

(1)先正常创建一个div标签,有宽和高:

 结果:

(2)去掉div的宽度,观察结果

 结果:

结果占满了整个屏幕,根据两个结果的对比,取消宽度,宽度就占满了全屏,这就是宽高自适应,会根据页面的需求自动调整宽和高,width不设置或者设置为auto,就是自适应,会根据需要的大小自动调整,一般网页都是这样做,如果设置了具体的数值那么宽度就设定死了。

一般宽度自适应经常用在:导航栏、 通栏布局

高度自适应也是不写或者auto,自适应的高度,都是里面的内容撑开的,里面内容多,高度就高,内容少高度就低,但是如果有时候没内容,高度就很低,在某方面不太美观,我们可以给高度设置一个最小高度,这样即使没有内容,也是有一个最小高度在的,属性为:

min-height:

max-height:

min-width:

max-width:

2. 设置浮动元素的父盒子高度自适应

 代码:

我们设置了四个盒子,上面一个盒子,下面一个盒子,上面父盒子里面有两个子盒子,让子盒子浮动起来,

 结果:

 结果可见,上面那个盒子两个子盒子浮动起来了,然后下面那个盒子就上去了,也就是说当上面两个子盒子浮动起来,他们的父盒子的高度就为0了,两个子盒子撑不开父盒子了,所以下面那个盒子就上去了。我们可以通过伪元素来解决这个问题,也就是设置伪元素来解除标签的浮动,从而实现父标签的高度自适应。

我们先介绍一个伪元素:

代码:

结果:

 解释:这个before就是伪元素,伪元素的写法是:“原标签::伪元素{要加的属性}”:上面代码的含义是在div标签内容前面加上下面的属性,也就是加上aaa文本,并且文本内容是红色的。

伪元素的特点:

1.加上的内容是选不中的,就比如上面结果里的aaa,你是选不中他的;

2.伪元素必须依附在标签身上才能用;

除了before伪元素,还有对应的after伪元素,含义是在某个标签后面加上什么东西。

display:none;不占位隐藏          visibility:hidden;占位隐藏 

所以实现父元素的的高度自适应,加上下面的代码即可:

 结果:

 这样父元素就有高度了,第二个盒子就上不去了。

3. 窗口自适应

代码:

 创建一个盒子,高度和宽度都是100%,这里的百分比都是相对于父标签来讲的,也就是body标签,但是body标签的宽度是浏览器横屏,高度为0,没有东西撑开他高度就为0,所以在这里div盒子设置高度为100%是没有意义的,宽度设置100%,它会根据浏览器窗口的大小变化而变化。

结果:

要是想让盒子的高度有意义,需要再加一段代码,实现窗口自适应,这样盒子的宽和高都能随着浏览器的宽和高变化而变化了:

需要加的代码:

结果:

有关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

随机推荐