第5章漂亮的盒子第6章内容布局（精通CSS）

本文链接：https://blog.youkuaiyun.com/printf_myself/article/details/109167773

5.2.2 简单的背景图片示例

.profile-box{
	width:100%;
	height: 600px;
	background-color:#8da9cf;
	background-image:url(image/bigcat.jpg);

5.3 背景图片语法

		.profile-box{
				width:100%;
				height: 600px;
				background-color:#8da9cf;
				background-image:url(img/big-cat.jpg);
				background-repeat: no-repeat;
				background-position: 300px 300px;
			}

background-position只可以给两个值，一个值表示相对于左侧的偏移量，一个表示相对于顶部的偏移量。
5.3.4 背景大小

.profile-box{
 background-size: 400px 240px
 }

这样可以重新给图片定义一个尺寸。
要想让图片随元素缩放而缩放，必须使用百分比，百分比不是相对于图片原来的大小，而是相对于容器的大小，因此，简单的把图片宽度和高度都设置为百分比，可能会导致图片的变形。
更好的做法是只给图片的一个维度设置百分比值。

.profile-box{
	background-size: 100% auto;
}

也可以把背景大小设置为contain，这个值可以让浏览器尽可能的保持图片最大化，同时不改变图标的宽高比。浏览器会自动决定哪一步使用auto值，哪一边使用100%。

.profile-box{
	background-size:cover;
}

关键字cover会保证图片覆盖元素的每一个角落，并且保证图片不会变形，但是会切掉部分图片。

5.5 边框圆角

通过设置

border-radius: 1em;

可以设置边框为圆角。
5.5.3 边框图片


			.motto{
				border-width: 40px;
				border-style: solid;
				border-image: url(img/picture-frame.png) 40;等同于boder-image url(img/picture-frame.png) 40 40 40 40 stretch:
				text-align: center;		
			}

boder-image中的40表示的是把每边向内40像素的位置切开，拉伸上下左右中段的图片

5.6盒阴影

    .profile-smaller-shadow {
      box-shadow: 1em 1em .5em -.5em rgba(0, 0, 0, 0.3);
    }

这个例子中代码的语法根text-shadow完全一样，头两个值表示x轴和y轴的偏移量，第三个表示模糊半径（阴影边界的模糊程度，值越大模糊度越高），第四个值表示的是扩展阴影的大小，这个值默认为0，即阴影元素和所属元素一样大，增大这个值，阴影相应变大，最后颜色。而且阴影的形状和盒子的圆角也是一致的。
内阴影

box-shadow:inset 1em 1em .5em -.25em rgba(0, 0, 0, 0.3);

把元素当成投影表明，可以创造一种背景被镂空的感觉（感觉挺好看的！哈哈哈哈哈）

5.7 渐变

5.7.2 线性渐变

background-image: linear-gradient(to bottom, #cfdeee 0%,#8da9cf 100%);

linear-gradient沿一条假象线，从元素顶部到底部绘制了一个渐变背景，这条线的角度有这个函数的第一个关键字to来控制，渐变线的方向
使用关键字to，再加上一个表示边（top,right,bottom,left,top left）的关键字来指定。色标用于在渐变线上标出颜色发生变化的位置，在这个例子中，位置为0%的处的颜色为蓝灰色，而位置为100%的位置是深蓝色。

5.8 为嵌入图片和元素添加样式

5.8.1 可伸缩的图片模式
怎么做到让图片伸缩的同时，既不会超出其固有尺寸，又不破坏其宽高比例，可以使用以下这个方法。

img{
	max-width:100%;
}

max-width意味着图片会随着包含它的容器缩小而缩小，但在容器变大时，他不会大到超过自身的固有尺寸。

6.1 定位

元素的初始定位方式为静态定位，意思是块级元素垂直堆叠。
设置为相对定位的元素，可以相对于其原始位置，控制元素的偏移量，同时又不影响其周围的元素，与此同时，这也为该元素的后代元素创造了定位上下文，这一点也是相对定位的真正用处。以前在一些古老的布局中经常要偏移元素，当然现在已经很少这样了。
绝对定位支持精确定位元素，相对于其最近的定位上下文，或者是其非静态定位的祖先元素，或者是html元素。绝对定位会脱离页面流，然后再相对于其定位上下文进行定位。默认情况下，它们
固定定位与绝对定位基本类似，只不过定位上下文被自动设置为浏览器视口。
6.1.1 绝对定位的应用场景
想要把评论向左和向上偏移，把定位到之前段落的旁边。这听起来像是要使用相对定位，但元素不能同时既是绝对定位又是相对定位。此时想要设置正确的偏移量。可以通过负边距来移动元素。

.comment{
	position:absolute;
	width:7em;
	margin-left:-9.5em;
	margin-top"-2.5em;
}

利用以下的代码可以实现评论的尖角

    .comment:after {
      
      content: '';
      display: block;
      width: 0;
      height: 0;
      border: .5em solid #dcf0ff;
      border-bottom-color: transparent;
      border-right-color: transparent;
      position: absolute;
      right: -1em;
      top: .5em;
    }

6.2.2 行内块布局

 <p class="author-meta">
      <!-- image from Jeremy Keith on Flickr: https://flic.kr/p/dwFRgH -->
      <img class="author-image" src="images/author.jpg" alt="Arthur C. Lark">
      <span class="author-info">
        <span class="author-name">Written by Arthur C. Lark</span>
        <a class="author-email" href="mailto:arthur.c.lark@example.com">arthur.c.lark@example.com</a>
      </span>
    </p>

现在auth-meta的段落底部会与图片底部以及文本基线对齐。
接下来，把图片和作者信息转换为行内块。

	.author-info,.author-image{
		display: inline-block;
	}

渲染之后，其实没什么可见的差别，差别只在于现在图片和信息都是块了。
此时，如果想要文字与图片居中，你可能想要这样写。

.author-info{
		vertical-align: middle;
	}

但是得到的结果却是错误的。
在这里插入图片描述

这里是由于关键字middle在给应用给行内块的时候，其含义是“将这个行内快的垂直中心点与这行文本x高度的中心点对齐”。我们的例子中没有行内文字（行内最高的）图片就成为决定行盒子高度以及基线位置的元素。而此时x高度的中性点就在图片底部靠上，要想将作则与图片一块垂直居中，需要让这两个元素都参照一个同一个中心点。

	.author-info,.author-image{
		display: inline-block;
		vertical-align: middle;
	}

对于用行内创建水平布局而言，如果需要垂直对齐，有以下两个要点：
要让行内块沿上方对齐，设置vertical-align：top；
要让两个元素的内容垂直对齐，先把他们都转换为行内块，再对他们应用vertical-align：middle；
2.在容器元素中垂直居中

	.author-meta{
		height: 10em;
		border: 1px solid #ccc;
		text-align: center;
		
	}

这样并不能让作者信息与图片垂直居中对齐，而是仍然沿原来那条假想的文本行对齐，为了实现与容器的垂直对齐，还需要增加一个行内块元素。
3 追究细节：与空白战斗到底

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navbar using inline block — broken</title>
  <script src="js/html5shiv.min.js"></script>

  <style>
    /* force the nav-element to display as block in older non-HTML5 supporting
    browsers (like IE8) */
    nav {
      display: block;
    }

    .navbar ul {
      font-family: 'Avenir Next', Avenir, Corbel, 'Franklin Gothic', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
      list-style: none;
      padding: 0;
      background-color: #486a8e;
    }

    .navbar li {
      text-transform: uppercase;
      display: inline-block;
      text-align: center;
      width: 25%;
      box-sizing: border-box;
      background-color: #12459e;
      outline: 1px solid #fff;
    }
    
    .navbar li a {
      display: block;
      text-decoration: none;
      line-height: 1.75em;
      padding: 1em;
      color: #fff;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/spaceships">Spaceships</a></li>
      <li><a href="/planets">Planets</a></li>
      <li><a href="/stars">Stars</a></li>
    </ul>
  </nav>
</body>
</html>

在这里插入图片描述
这是因为行行盒子内的任何空白符都会被渲染为一个空格，HTML源代码中的换行符被渲染成了空白符，再加上25%的宽度，就导致了折行。我们要解决这个问题的方法也很简单粗暴。（我的浏览器无法使用）
6.2.3 使用表格显式属性实现布局

.navbal ul{
	width:100%;
	display; table;
	table-layout:fixed;
}
.navbal li{
	width:25%;
	display: table-cell;
}

这里表格宽度设置为100%，是为了保证导航条能扩章到与父元素同宽，与常规快不同，不设置宽度的表格会自适应内容宽度，除非内容的单元把它撑开的宽度足以填充父元素。
表格行中的每一列的宽度有两种算法，默认情况下，使用自动算法，根据自身单元格内容所需的宽度来决定整个表格的宽度。
另一种算法是固定表格布局，即使用table-layout：fixed。这种算法下的列宽有表格第一行的列决定。第一行中声明的列宽具有决定性，后续行如果遇到内容较多的情况，只能折行或者溢出。
但是在利用表格来进行布局的时候，必须清楚这样也会引入表格的问题，比如，渲染为表格单元的元素无法应用外边距，给表单元定位是的行为也无法预料。

6.3 Flexbox

Flexbox可以控制弹性项的以下方面：

大小，基于内容以及可用空间；
流动方向，水平还是垂直；
两个轴上的对齐与分布；
顺序，与源代码中的顺序无关；
假如行内快·浮动和表格格式让你觉得很棘手，那么Flexbox很可能适合你。因为它就是为了应对本章前面提到的各类问题而生的。

6.3.2 理解Flex方向：主轴与辅轴
Flex可以针对页面中的某一区域，控制其中元素的顺序、大小、分布以及对齐。这个区域的盒子可以沿两个方向排列，默认水平排列（成一行），也可以垂直排成一列。这个排列方向称为主轴。
主轴垂直的方向称为辅轴，区域内的盒子可以沿辅轴发生位移或者收缩。Flex布局中最重要的尺寸就是主轴方向的尺寸：水平布局时的宽度或垂直布局时的高度，我们称主轴方向的这个尺寸为主尺寸。

.navbar ul{
	display:flex;
}

通过设置row-reverse可以改变排列的方式

.navbar ul{
	flex-direction:row-reverse;
}

6.3.3 对齐和空间
Flex对子项的排列方式，用于指定排布方式的属性是justify-content，其默认值为flex-start，表示按左对齐。改成flex-end，所有项就会挤到右边，靠右对齐。center会居中所有项，多余的空间等分后分配到两侧。space-between多余的空间等分后分放到项与项之间。space-around多余的空间等分后分配到项的两侧。
flex不允许以上这些关键字指定个别项，然而，对flex的外边距设置为auto，而容器在那一侧还有空间，那么该外边距就会扩展占据可用空间。利用这一点，可以创造一项位于一侧，而其他项位于另一侧的布局。
在这里插入图片描述

.navbar li:first-child{
	margin-right:auto;
}

1.辅轴对齐
控制辅轴对齐的属性align-items，其默认值是stretch（拉伸）。也就是说，子项默认拉伸，以填满可用空间。其他关键字还有flex-start，flex-end，center。这三个关键字都会把子项收缩成原有的大小，然后再沿辅轴进行上中下对齐。
最后，还可以使用baseline关键字，将子项文本中的基线与容器基线对齐如果子项大小不一，而你希望它们在辅轴上虽然位置不同，但本身对齐，就可以采用这种方法。
3.Flexbox中的垂直对齐

   .flex-container {
      height: 100%;
      display: flex;
    
	  justify-content: center;
	  align-items: center;
      background-color: #12459e;
    }
    .flex-item {
      max-width: 25em;
      padding: 2em;
      margin: 1em;
      background-color: #fff;
    }