第三章盒模型，第4章 CSS的基本排版技术（精通CSS）

最新推荐文章于 2024-10-11 19:25:11 发布

printf_myself

最新推荐文章于 2024-10-11 19:25:11 发布

阅读量193

点赞数

分类专栏：精通CSS 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/printf_myself/article/details/109135001

版权

精通CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

3.1.1 盒子大小

默认情况下，元素盒子的width和height属性指的是内容盒子，也就是元素可渲染的宽度和高度，这时候添加边框和内边距不会影响内容盒子的大小。

.box{
	width : 80px;
	padding : 5px;
	boder " 5px solid;
	margin: 10px;

上面这个例子整个元素盒子占据的空间件就是100px。
把box-sizeing的值修改为boder-box；那么width和height的值将包含内边距和边框。
3.2.3 外边距折叠
常规块盒子有一种机制叫做外边距折叠机制，垂直方向上两个外边距相遇的时候，回折叠成一个外边距，折叠后的外边距的高度等于两者中较大的那一个高度。外边距折叠只发生在文档常规文本流中块级盒子的垂直方向上，行内盒子，浮动盒子或绝对定位盒子的外边距不会折叠。
3.2.3 包含快
如果元素的定位方式为静态定位（即不指定position的值）或相对定位，其包含快的边界就计算到最近的一个父元素。
3.2.5 相对定位
把一个元素的display属性设置为relative，此元素仍然会保留在原来的位置，但通过设置元素的top，right，left，top可以使元素平移相对的位置，但是因为元素在文档流保持原来的初始空间，这样做可能会遮挡其它元素。
3.2.5 绝对定位
绝对定位会将元素从文档流中拿出来，因此不会占据原来的空间，与此同时，文档流中的其他元素会重新定位，仿佛绝对定位的那个元素没有存在过一样。绝对定位元素的包含快是距离它最近的定位祖先，也就是display属性设置为static之外任意值得祖先元素，如果没有祖先元素那么他就相当于文档的根元素即html元素定位。
与相对定位的盒子类似，绝对定位的盒子也可以相对于其包含块向上下左右方向平移。
绝对定位的盒子是脱离了常规文档流的，因此可能会遮挡页面上的其他元素。
3.2.6 固定定位
固定定位是由绝对定位衍生出来的，不同之处在于，固定定位元素包含的快是视口，因此，固定定位是用来创建始终停留在窗口相同位置的浮动元素。
3.2.7 浮动
浮动盒子可以向左或者向右移动，指导其外边沿碰到快的外边沿，或接触另一个浮动盒子的外延，浮动盒子也会脱离常规文档流，因此其他文档几乎当浮动盒子不存在一样。
行盒子与清除：
如果浮动元素后面跟着的是常规文档流中的元素，那么该元素的盒子就会当浮动元素不存在一样，该怎么样布局就这么布局，但是，这个元素盒子中的文本内容则会记住浮动元素的大小，并在排布的时候避开他，为其留出相应的空间。
clear属性浏览器会在这个元素的上方添加足够大的外边距，从而将元素的上边延垂直方向向下推动到浮动元素的下方，因此如果你给“以清除”的元素添加外边距，那么除非你的值超过浏览器自动添加的值，否则将不会看到什么效果。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Media Object, no clearing</title>

  <style type="text/css" media="screen">
    /**
    * 1. Notice how this will not show, as the block collapses in height.
    */
    .media-block {
      background-color: gray; /* 1 */
      border: solid 1px black;
	 
	
    }
    .media-fig {
      float: left;
      width: 30%;
    }
    .media-body {
      float: right;
      width: 65%;
    }
	.clear{
		clear: both;
	}
  </style>
</head>
<body>
  <div class="media-block">
    <img class="media-fig" src="img/pic.png" alt="The pic" />
    <div class="media-body">
      <h3>Title of this</h3>
      <p>Brief description of this</p>
    </div>
	<div class="clear"></div>这里是为了让media有高度，使背景颜色能够应用，否则因为浮动元素被拿出文档流，无法在文档流中为它生成高度。
  </div>
</body>
</html>

这样就实现了我们想要的布局，但是也引入了多余的标记。
要改进这个例子，可以使用：after伪类来模拟额外的清除元素，把下面的规则应用给浮动元素的容器div，就会在它内部的末尾生成一个盒子，并且在这个盒子上应用清除规则。

 .media-block:after{
 	content:"";
 	display:block;
 	clear:both;

3.2.8 格式化上下文
没看懂。
4.1.3 字形大小和行高
em是基于继承的大小缩放，更好的选择是rem，rem是始终基于根元素的大小缩放。
垂直对齐：
下面的例子说明了vertical-align的不同参数。
在这里插入图片描述

4.2 版心宽度·律动和毛边

要控制行长，我们可以简单的将article的元素宽度设置为36em，并令其在页面上居中，如果视口缩小到比这个更窄，该元素会自动调整宽度。

article{
	max-width:36em;
	margin:auto;

4.2.3 多栏文本

    article {
        max-width: 70em;
        margin: 0 auto;
        columns: 20em;
		column-gap: 1.5em;
    }

这里的colums属性是column-count和column-width属性的简写形式。如果只设置了column-count属性，浏览器会严格生成指定数量的栏，不管宽度如何，如果同时设置了column-count和column-width，则前者会作为最大栏数，后者会作为最小栏宽。
2 跨栏