- 前言
CSS2.0中的 CSS语法简答,但是理解难度比较大.在 CSS2.0 的时候有很多隐晦的意思,开发者需要理解整个 CSS的布局.在 CSS3 开始之后给这多隐晦的 CSS 有了明确的定义.比如尺寸体系中的内在尺寸和外在尺寸.
从 width:fit-content声明开始理解 CSS3
fit-content关键字的意思就是让元素的内容的宽度就是元素的宽度.实际上,
fit-contet关键字的样式相当于 CSS2 中的 shrink-to-fit,称为包裹性,尺寸的收缩但是不会超出块级元素的尺寸限制.
- 示例:一段文字,字数很少的时候居中显示,字数很多的时候左对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
padding: 1em;
background-color: deepskyblue;
color: #fff;
}
.content {
width: fit-content;
margin: auto;
padding: 20PX;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点西滴滴顶点
</div>
</div>
</body>
</html>
如果内联元素需要收缩的化,可以使用display:inline-block,如果块级元素需要收缩,可以使用 display:table声明.虽然这两个方式和 fit-content的效果是一样的,但是 fit-content还是有以下两点优势
- 保护元素的 display 属性
- 让元素尺寸有明确的值
示例:让元素水平垂直居中
- 使用定位元素进行水平垂直居中
.test1 {
width: 300px;
height: 300px;
position: absolute;
left: 0;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
border: solid deeppink;
}
不足:这种方式需要明确知道居中元素的尺寸
- transform 水平垂直居中
.test2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: solid deeppink;
padding: 20px;
background: deepskyblue;
}
不足:他会占用元素的transform属性
- fit-content
padding: 20px;
background: red;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;
width: fit-content;
height: fit-content;
width:stretch 关键字场景
stretch在实际使用并不常见.stretch 关键字的意思就是给元素的外层嵌套一层普通的块级元素.
min-content
元素的宽度由 content-box ,border-box,padding-box 和 margin-box 组成,其中 padding-box,border-box,margin-box不会随着元素的不同而不同,但是 content-box 不一样,他的内容随着内容的不同而不同.首选最小宽度也会不同
替换元素
按钮,视频和图片等元素属于替换元素,替换元素的首选最小宽度是当前元素内容自身的宽度.
CJK 文字
CJK 文字指的是中文-日语-韩语.min-content在处理 CJK一段没有标点的文字,则首选最小宽度是单个的文字.当处理的文字有标点符号的时候,最小宽度不能包含标点符号,标点符号和单个文字组成最小宽度.
max-content 关键字
max-content 关键字表示最大内容宽度,max-content关键字的作用是让元素尽可能的大,保证内容在一行显示,哪怕最终的宽度超出外部元素
网友评论