css学习（二）

Ailzac
236 阅读4分钟

CSS盒模型

  • content-box(不包括内边距)、border-box
  • 外边距折叠，相邻的顶部和底部边距会折叠，左右边距不会折叠
  • 防止外边距折叠
    • 对容器使用overflow:auto或者visible
    • 在外边距之间加上边框或者内边距
    • 浮动元素、内联块、绝对定位和固定定位时不会折叠
    • flexbox和网格布局不会折叠
    • 当元素显示为table-cell时不具备外边距属性，因此它们不会折叠。此外还有table-row和大部分其他表格显示类型，但不包括table、table-inline、table-caption

CSS浮动布局

  • 双容器居中

  • 众多的元素浮动到同一侧，如果每个浮动盒子的高度不一样，布局也会千变万化。

  • BFC ( 块级格式化上下文,block formatting context )

    • BFC里的内容不会跟外部的元素重叠或者相互影响。如果给元素增加clear属性，它只会清除自身所在BFC内的浮动。如果强制给一个元素生成一个新的BFC，它不会跟其他BFC重叠

    • 给元素添加一下属性值都会创建BFC

      • float: left或right，不为none即可

      • overflow:hidden、auto或scroll，不为visible即可

      • display:inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。拥有这些属性的元素称为块级容器

      • position:absolute或position: fixed

.column-1 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 8.3333333333%;
}

.column-2 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 16.6666666667%;
}

.column-3 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 25%;
}

.column-4 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 33.3333333333%;
}

.column-5 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 41.6666666667%;
}

.column-6 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 50%;
}

.column-7 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 58.3333333333%;
}

.column-8 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 66.6666666667%;
}

.column-9 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 75%;
}

.column-10 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 83.3333333333%;
}

.column-11 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 91.6666666667%;
}

.column-12 {
  float: left;
  padding: 0 0.75em;
  margin-top: 0;
  width: 100%;
}

.row {
  margin-left: -0.75em;
  margin-right: -0.75em;
}

.row::after {
  content: " ";
  display: block;
  clear: both;
}

:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Arial, Helvetica, sans-serif;
}

body * + * {
  margin-top: 1.5em;
}

.container {
  max-width: 1080px;
  margin: auto;
}

header {
  padding: 1em 1.5em;
  color: #fff;
  background-color: #0072b0;
  border-radius: 0.5em;
  margin-bottom: 1.5em;
}

.main {
  padding: 0 1.5em 1.5em;
  background-color: #fff;
  border-radius: 0.5em;
}

.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}

.clearfix::after {
  clear: both;
}

.img,
.img2 {
  float: left;
  width: 3em;
  height: 4em;
  margin-right: 1.5em;
  background: linear-gradient(rgba(0, 1, 1, 0.5), #000001);
}

.img2 {
  height: 3em;
}

.media {
  padding: 1.5em;
  background-color: #eee;
  border-radius: 0.5em;
}

.media-body {
  overflow: auto;
  margin-top: 0;
}

.media-body h4 {
  margin-top: 0;
}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Franklin Running Club</h1>
      </header>
      <main class="main clearfix">
        <h2>Running Tips</h2>
        <div class="row">
          <div class="column-6">
            <div class="media">
              <div class="img"></div>
              <div class="media-body">
                <h4>Strength</h4>
                <p>
                  Strength training is an important part of injury pevention.
                  Focus on your core&mdash;especially your abs and glutes.
                </p>
              </div>
            </div>
          </div>
          <div class="column-6">
            <div class="media">
              <div class="img2"></div>
              <div class="media-body">
                <h4>Strength</h4>
                <p>
                  Strength training is an important part of injury pevention.
                  Focus on your core&mdash;especially your abs and glutes.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="column-6">
            <div class="media">
              <div class="img2"></div>
              <div class="media-body">
                <h4>Strength</h4>
                <p>
                  Strength training is an important part of injury pevention.
                  Focus on your core&mdash;especially your abs and glutes.
                </p>
              </div>
            </div>
          </div>
          <div class="column-6">
            <div class="media">
              <div class="img"></div>
              <div class="media-body">
                <h4>Strength</h4>
                <p>
                  Strength training is an important part of injury pevention.
                  Focus on your core&mdash;especially your abs and glutes.
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>

FlexBox

  • flex-basis flex布局下元素所占比例大小

    • 值可以是任意的width值，无单位数值时，数值越大占宽度比越大
    • 值为auto时，根据元素本身宽度，非auto时忽略元素本身的宽度属性

  • flex-grow 容器有剩余空间时，数值越大占比越高

  • flex-shrink 在内容溢出容器时，数值越大被裁剪的比例越高

  • flex-direction 决定了容器内部元素排列的顺序

  • flex-wrap 容器内是否多行换行显示，当启用多行显示时flex-shrink将不会生效，超出容器宽度的会换行显示

  • justify-content 容器未被填满时，设置子元素的在主轴方向排布方式。任意子元素flex-grow不为0，或者外边距值为auto时，设置失效。

  • align-items 在副轴方向没被填满时，设置子元素在副轴方向的排布方式。

  • align-center 开启多行时，子元素在副轴方向时的排列方式，和justify-content用法类似。

  • align-self 与align-items效果相同，只是针对单个的子元素。

  • order 值越大越排到最后渲染，不建议使用，这样和html编写顺序不同，不易维护。

  • flex bugs github.com/philipwalto…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
  	<div class="container">
    	<div class="divflex">
        	<div class="div1"><p>1</p></div>
        	<div class="div2"><p>2</p></div>
        	<div class="div3"><p>3</p></div>
      	</div>
    </div>
  </body>
</html>

:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #709b90;
  font-family: Arial, Helvetica, sans-serif;
}

body * + * {
  margin-top: 1.5em;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
}

.divflex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 500px;
  color: white;
  text-align: center;
  background-color: white;
  justify-content: center;
  align-items: center;
}

.div1,
.div2,
.div3 {
  flex: 35% 0 0;
  margin-top: 0rem;
  font-size: 4rem;
}

.div1 {
  background-color: red;
  align-self: flex-start;
  flex-grow: 1;
}

.div2 {
  background-color: blue;
  flex-grow: 2;
}

.div3 {
  background-color: green;
}
avatar
文章
阅读
粉丝