css学习笔记

最新推荐文章于 2024-10-01 23:20:42 发布

白梵野火

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量215

点赞数

分类专栏： css 文章标签： css ruby html5

本文链接：https://blog.csdn.net/a754629011/article/details/120409147

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

display

元素的属性：

block

inline

none

display 值还有

例如 list-item 和 table 。

inline-block 和 flex 。

    where 
    <display-outside> = block | inline | run-in
    <display-inside> = flow | flow-root | table | flex | grid | ruby
    <display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
    <display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
    <display-box> = contents | none
    <display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

outside 、 inside 、listitem 、 internal 、box、 legacy

每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

block是块级元素

一个 block 元素通常被叫做块级元素

div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

一个 inline 元素通常被叫做行内元素。

span 是一个标准的行内元素。一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none

display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

翻译：
letter-spacing: 1px;
padding-top: 10px;

字母间距：1px；
填充顶部：10px；

margin: 1px;

边距：1px；

border-radius: 7px;

边框半径：7px；

nav 导航

container 容器

font-family: helvetica, arial, sans-serif; 字体系列：黑体、宋体、无衬线；

article span 文章跨度

设置宽度

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。

 {
  width: 600px;
  margin: 0 auto; 
}

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

 {
  max-width: 600px;
  margin: 0 auto; 
}

宽度相关的盒模型

当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。

{
  width: 500px;
  margin: 20px auto;
}

{
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

请添加图片描述

两个相同宽度的元素显示的实际宽度却不一样，是因为元素的边框和内边距会撑开元素。

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

请添加图片描述


.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

想要页面上所有的元素都有如此表现，可以确保所有的元素都会用这种更直观的方式排版。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

*所有

不过 box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。

一个“positioned”元素是指 position 值

{
  position: static;
}

position 属性。它有一大堆的值

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

一个“positioned”元素是指 position 值

{
  position: relative;
}

{
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative 表现的和 static 一样，除非你添加了一些额外的属性。

可以设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。

和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。移动浏览器对 fixed 的支持很差

{
  position: relative;
  width: 600px;
  height: 400px;
}

这个元素是相对定位的，如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。

{
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

这个元素是绝对定位的。它相对于它的父元素定位。

absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。

如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

.container {
  position: relative;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 120px;
}

section 的 margin-left 样式确保了有足够的空间容纳 nav 元素。

如果容器比nav元素低，那么nav会溢出到容器的外面

另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片

｛
  float: right;
  margin: 0 0 1em 1em;
}

1、浮动有时会造成环绕包围覆盖效果，是不太好的

section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且 section 元素包围了整个元素。

<div class="box">...</div>
<section>...</section>

.box{
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

clear 属性被用于控制浮动。

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

2、使用浮动，图片比包含它的元素还高，而且它是浮动的，于是它就溢出到了容器外面！

img {
  float: right;
}

清除浮动（clearfix hack） 可解决问题

 {
  overflow: auto;
}

clearfix 清除浮动这水很深

 {
  overflow: hidden;
  zoom: 1;
  display: block;
}

 {
  overflow: hidden;
  display: inline-block;
  display: block;
}

。。。（来源：https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use ）

有些独特的浏览器需要“额外的关照”，如果你想要支持IE6，你就需要再加入如下样式

{
  overflow: auto;
  zoom: 1;
}

What methods of ‘clearfix’ can I use? 我可以使用哪些“clearfix”方法？

在您使用 clearfix 之前，这些现代 css 解决方案可能很有用：

css 弹性盒 Flexbox
css网格 Grid

css 弹性盒
css网格

完全使用 float 来实现页面的布局是很常见的。

    nav {
      float: left;
      width: 200px;
    }
    section {
      margin-left: 200px;
    }

我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 nav 比非浮动的内容还要高时就需要了。

float中的其他小技巧

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。

{
  float: right;
  width: 50%;
}

你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！

额外：

你可以用百分比做布局，但是这需要更多的工作。
nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}
当布局很窄时， nav 就会被挤扁。更糟糕的是，你不能在 nav 上使用 min-width 来修复这个问题，因为右边的那列是不会遵守它的。

Responsive Design 响应式设计

是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

举例：

媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列

@media (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media (max-width:599px) {
  nav li {
    display: inline;
  }
}

调整大小能进行缩放

在MDN文档中你还可以学到更多有关媒体查询的知识。

使用 meta viewport 之后可以让你的布局在移动浏览器上显示的更好。

使用 inline-block 来布局

注意：

vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
}
.column {
  display: inline-block;
  vertical-align: top;
  width: 75%;
}

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单

请添加图片描述

使用 float （较困难）

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

使用 clear，所以不会浮动到上面那堆盒子的旁边。

可以用 display 属性的值 inline-block 来实现相同效果。

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西，你只需要知道那是用来支持旧浏览器的。

新的CSS属性，可以帮助你很轻松的实现文字的多列布局。

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

请添加图片描述

CSS columns是很新的标准，所以你需要使用前缀

并且它不被IE9及以下和Opera Mini支持。

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。

使用 Flexbox 的简单布局

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

请添加图片描述

更加厉害的布局：

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

请添加图片描述

使用flexbox的居中布局：

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

请添加图片描述

每个人都清楚这一点：“Flexbox”（更具体地说：CSS 弹性框布局模块）在过去三年中发生了很多变化。对规范和浏览器已实现的内容进行了更改。

**如果你谷歌一下 Flexbox，你会发现很多过时的信息。**以下是您可以快速判断的方法：

如果您正在查看有关 Flexbox 的博客文章（或其他内容），并且看到display: box;或属性box-{*}，那么您正在查看旧的 2009 版 Flexbox。

如果你正在看一篇关于 Flexbox 的博客文章（或其他任何内容），并且看到了 Flexboxdisplay: flexbox;或flex()函数，那么你看到的是 2011 年的一个尴尬的 tweener 阶段。

如果您正在查看有关 Flexbox 的博客文章（或其他任何内容），并且看到了display: flex;和flex-{*}属性，那么您正在查看当前（在撰写本文时）规范。