学习笔记 --css基础-流、元素与基本尺寸一

最新推荐文章于 2022-06-07 14:43:20 发布

chujinmaolu

最新推荐文章于 2022-06-07 14:43:20 发布

阅读量213

点赞数

分类专栏： css学习笔记文章标签： css

本文链接：https://blog.csdn.net/chujinmaolu/article/details/116884596

版权

css学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

学习笔记 --css基础-流、元素与基本尺寸一

1、父元素没有设置height时，子元素height:100%无效，而width是有效的，但当子元素是绝对定位时，父元素没有设置，子元素设置为100%，是有效的。
例：父width不设置，子设置100%的结果：
在这里插入图片描述

最终父元素的宽度为图片展开宽度加上文字宽度，而span继承父元素100%，它的元素宽度为和父元素一致，这是因为浏览器渲染时是自上而下，自外而内的，所以渲染父元素时，子元素的100%还未生效，这时父元素就是子元素自然占用的宽度，而父元素渲染完，子元素渲染，按照父元素的宽度设置100%。

<div class="box">
  <img src="1.jpg">
  <span class="text">红色背景是父级</span>
</div>
.box {
  display: inline-block;
  white-space: nowrap;
  background-color: #cd0000;
}
.text {
  display: inline-block;
  width: 100%;
  background-color: #34538b;
  color: #fff;
}

2、请看这个需求：页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？核心CSS代码如下：

.box {   text-align: center; } 
.content {   display: inline-block;   text-align: left; }

3、首选最小宽度
首选最小宽度的意思就是元素一定有一个最小宽度，即使父元素宽度设置的是width:auto，它的本身的宽度很小，但是子元素还是会展示容纳它自己的最小宽度：如
在这里插入图片描述

<span class="ao"></span>
<span class="tu"></span>

.ao,
.tu {
  display: inline-block;
  width: 0;
  font-size: 14px;
  line-height: 18px;
  margin: 35px;
  color: #fff;
}
.ao:before,
.tu:before {
  outline: 2px solid #cd0000;
  font-family: Consolas, Monaco, monospace;
}
.ao:before {
  content: "love你love";
}
.tu {
  direction: rtl;
}
.tu:before {
  content: "我love你";
}

4、box-sizing:border-box,默认是content-box;border-box包括padding和border,不包括margin,元素尺寸是包括border,padding的。子元素的width：100%，继承的是父元素的content-box。前面说到父元素设置高度不设置，子元素height设置100%无效，但在绝对定位中有效，但计算规则与正常元素不一致，绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在内。