css盒子与布局

盒子模型

属性

content 内容的大小
padding 框线与内容之间距离
border 框线的大小
margin 框线与其他元素之间距离
box-sizing 框线与高度和宽度的关系
- 值描述
  
  content-box 默认值，宽度和高度不包括边框和内边距
  
  border-box 宽度和高度包括内边距和边框

值	描述
`content-box`	默认值，宽度和高度不包括边框和内边距
`border-box`	宽度和高度包括内边距和边框

规则

块级元素独占一行，内联元素按正常流排序。

<div>
    <p class="block">块级</p>
    <p class="block">块级</p>
</div>
<div>
    <span class="inline">内联</span>
    <span class="inline">内联</span>
</div>
<style>
    .block {
        margin: 0;
        background: lightblue;
        border: 2px solid orange;
    }
    .inline {
        margin: 0;
        background: lightblue;
        border: 2px solid orange;
    }
</style>

块级

内联内联

如果希望元素扩大背景颜色的范围或元素可点击的范围，可以使用 padding 。

  <div>
      <span class="box" onclick="hjhcos()">原点击范围</span>
      <span class="box" style="padding: 10px;" onclick="hjhcos()">扩大点击范围</span>
  </div>
  <style>
      .box {
          cursor: pointer;
          display: inline-block;
          margin: 0;
          background: lightblue;
          border: 2px solid orange;
      }
  </style>
  <script>
      function hjhcos() {
          if (confirm("是否跳转到首页")) {
              window.open("https://hjhcos.cn/");
          } else {
              console.log("已经取消跳转");
          }
      }
</script>

原点击范围扩大点击范围

对于块级或内联块级元素，如果两个元素设置了外边距，那么上下外边距出现重叠情况，只会保留绝对值较大的尺寸。

<div class="container">
    <span style="background:lightblue;">下外边距0em</span>
    <span style="background:red;">上外边距0em</span>
</div>
<div class="container">
    <span style="background:lightblue; margin-bottom:1em;">下外边距1em</span>
    <span style="background: red;">上外边距0em</span>
</div>
<div class="container">
    <span style="background:lightblue; margin-bottom: 1em;">下外边距1em</span>
    <span style="background:red; margin-top:2em">上外边距2em</span>
</div>
<style>
    .container>span{
        display: block;
    }
    .container{
        height: 2em; 
        width: 6.5em; 
        display: inline-block; 
        position: relative; 
        margin:0;
    }
</style>

下外边距0em 上外边距0em

下外边距1em 上外边距0em

下外边距1em 上外边距2em

内联元素垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于内联状态的盒子推开；水平方向的内边距、外边距以及边框会被应用且会把其他处于内联状态的盒子推开。

<div style="padding: 2em;">
    <span style="background:red; padding:2em;">span内联元素设置了内边距，内边距为2em.</span>
    <p style="background:lightblue; opacity:0.5;">p块级元素没有设置内边距，设置了透明度50%.</p>
    <span style="background:red; padding-right:2em;">span内联元素设置了内边距，右内边距为2em.</span>
    <span style="background:red; padding-left:2em;">span内联元素设置了内边距，左内边距为2em.</span>
</div>

span内联元素设置了内边距，内边距为2em.

p块级元素没有设置内边距，设置了透明度50%.

span内联元素设置了内边距，右内边距为2em. span内联元素设置了内边距，左内边距为2em.

块级与内联块级元素可以设置宽高，内联元素不可以设置宽高。对于内联块级元素，似乎只有继承了块级设置宽高的特点，其他的属性不会起到作用。

<p class="set-attr">正常p元素 以下统一只设置高度 宽度不设置</p>
<p class="set-attr" style="display: inline;">内联p元素</p>
<p class="set-attr" style="display: block;">块级p元素</p>
<p class="set-attr" style="display: inline-block;">内联块级p元素</p>
<p class="set-attr">正常p元素 如果宽度设置100%那么内联块级元素就会和块级p元素效果一样</p>
<style>
    .set-attr{
        height: 2em;
        text-align:center;
        background:lightblue;
    }
</style>

以下统一只设置高度，宽度不设置

内联p元素

块级p元素

内联块级p元素

如果宽度设置100%，那么内联块级元素就会和块级p元素效果一样

可以使用行高撑大内容与内容或内边距之间的距离大小。

<div class="head-test" onclick="hjhcos()">
    <p style="margin:0;">hjhcos.cn</p>
    <div class="head-time">
        <span id="showTime"></span>
    </div>
</div>
<style>
    .head-test{
        cursor: pointer;
        height: 2rem;
        background: lightblue;
        position: relative;
        z-index: 100;
    }
    .head-test p{
        text-align: center;
        font-size: .8rem;
        line-height: 2rem;
    }
    .head-time{
        position: absolute;
        line-height: 2rem;
        top: 0;
        right: 0.5rem;
    }
    .head-time span{
        font-size: .4rem;
    }
</style>
<script>
    var t = setTimeout(time, 1000);
    function time(){
        clearTimeout(t);
        dt = new Date();
        var y=dt.getFullYear();
        var mt=dt.getMonth()+1;
        var day=dt.getDate();
        var h=dt.getHours();
        var m=dt.getMinutes();
        var s=dt.getSeconds();
        document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s;
        t = setTimeout(time, 1000);
    }
</script>

hjhcos.cn

通过float设置浮动元素，不会去影响上面正常流元素的布局，但会影响下面正常流元素的布局。

1

2

3

1

2

3
官网说在使用flot时，某些元素的display的值会改变为block，但事实上更加类似与inline-block。下面1为span标签，2为div标签。

1
2

注意

虽然在全局设置了边距，但是浏览器用户样式会影响全局设置，再单独给一些元素设置边距，就是为了防止这样的情况发生。

为了解决父级元素因为子级浮动引起的内部高度为0的问题，可以通过在父级尾部添加类似非浮动块级元素撑大父容器使其包括浮动元素。

<div class="normal" style="width: inherit;">
    <p style="margin:0 2px 2px; float:left;">未设置尾部清除</p>
    <p style="margin:0 2px 2px; float:left;">未设置尾部清除</p>
    <p style="margin:0 2px 2px; float:left;">未设置尾部清除</p>
</div>
<div>测试</div>
<div class="clearfix" style="width: inherit;">
    <p style="margin:0 2px; float:left;">有设置尾部清除</p>
    <p style="margin:0 2px; float:left;">有设置尾部清除</p>
    <p style="margin:0 2px; float:left;">有设置尾部清除</p>
</div>
<div>测试</div>
<style>
    .clearfix>p, .normal>p{
        text-align: center;
        line-height: 2rem;
        height: 2rem;
        background: lightblue;
        width: 30%;
    }
    .clearfix:after{
        display: block;
        content: "";
        clear: both;
    }
</style>
<!--你可以通过F12查看两者浮动元素父级之间的区别-->

未设置尾部清除

测试

有设置尾部清除

测试

rem是相对于父级元素字体的大小来定义的。
如果子元素浮动是通过绝对定位或者固定定位，只有通过获取子元素的高度给父级赋值来解决。

布局

首先确定整体布局

就当前页面来说，可以查看 class="post" 的元素节点，就是整体页面呈现的布局分为三个部分：上中下。
再确定局部布局

上：导航条、文章消息

中：主体文章、侧边栏

下：页脚
根据需求增加布局，便于更好显示内容

主体文章下面又有更加深层的布局，包括博客文章、前后博客文章跳转链接、评论区等内容区域的划定。

弹性布局

任何一个容器都可以指定为Flex布局，包括行内元素。

.row{
    display: flex;	/*大部分指定方式*/
    display: inline-flex;	/*行内元素指定方式*/
    display: -webkit-flex;	/*具有Webkit内核的指定方式*/
}

属性

容器属性

属性	值	描述
flex-direction	`row` `row-reverse` `column` `column-reverse`	决定主轴的方向，即容器里面元素的排列方向
flex-wrap	`nowrap` `wrap` `wrap-reverse`	是否换行和换行方式
flex-flow	`<flex-direction>` `<flex-wrap>`	flex-direction属性和flex-wrap属性的简写形式
justify-content	`flex-start` `flex-end` `center` `space-between` `space-around`	容器里面元素在主轴上的对齐方式
align-items	`flex-start` `flex-end` `center` `baseline` `stretch`	容器里面元素在交叉轴上的对齐方式
align-content	`flex-start` `flex-end` `center` `space-between` `space-around` `stretch`	多根轴线的对齐方式

容器里面元素的属性

属性	值	描述
order	`<integer>`	元素的排列顺序，值越小越靠前
flex-grow	`<number>`	元素的放大比例，默认为0
flex-shrink	`<number>`	元素的缩小比例，默认为1
flex-basis	`<length>` `auto`	在分配多余空间之前，元素占据的主轴空间
flex	`none` `<flex-grow>` `<flex-shrink>` `<flex-basis>`	flex-grow、flex-shrink和flex-basis简写
align-self	`auto` `flex-start` `flex-end` `center` `baseline` `stretch`	允许同级容器下当前元素与其他元素不一样的对齐方式，可覆盖align-items属性