css基础学习

一、什么是块级元素？

一个水平流上只能单独显示一个元素，多个块级元素则换行显示。

clear属性可以清除浮动带来的影响。

 

二 display不同属性的理解

值为block的元素叫“块级盒子”

值为inline-block的元素叫“块级容器盒子” 既可以一行显示，又可以设置高度宽度了。

值为inline的元素叫“内联盒子”

 

三 实现表头擎天柱显示

缩小到最小，设置table-layout为auto 就可以实现。

 

四 利用块级元素流的属性【外部尺寸】

可以不设置宽度。display:block,就不需要设置width:100%了。

 

1 绝对定位的宽度表现包裹性，宽度由内部尺寸决定的。

文字少居中显示，文字多，左边对齐css

HTML：
<div class="box">
  <p id="conMore" class="content">文字内容</p>
</div>
<!-- 按钮 -->
<p><button id="btnMore">更多文字</button></p>
CSS：
.box {
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

 五元素尺寸相关

 六 改变文档流的方向

一 writing-mode

二 margin:auto与绝对定位元素的水平垂直居中实例页面

<div class="father">
    <div class="son"></div>
</div>

.father {
    width: 300px; height: 150px;
    background-color: #f0f3f9;
    position:relative;
}
.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
    background-color: #cd0000;
    margin: auto;
}

 七清除浮动和等高

/* 清除浮动影响，不能使用overflow:hidden */
.box:after {
  content: "";
  display: block;
  clear: both;
}

参考https://demo.cssworld.cn/4/4-4.php