DESKTOP-ALQOPKI_实习日志 2021年05月23日 张金虎
实习日志
一、知识总结
1.内边距：padding 属性设置元素的填充，内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。
1.1设置四周填充：
padding：value
padding:value1 value2 ……
2.盒子模型
2.1 CSS中组成一块级盒子需要：
Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性
设置。
2.2标准盒模型
在标准模型中，如果给盒设置 width 和 height ，实际设置的是 content box。 padding 和 border
再加上设置的宽高一起决定整个盒子的大小。
2.3盒子模型和内联盒子
<head>
<meta charset="utf-8">
<title></title>
<style>
span {
margin: 20px;
padding: 20px;
width: 80px;
height: 50px;
background-color: lightblue;
border: 2px solid blue;
}
</style>
</head>
<body>
<p>
I am a paragraph and this is a <span>span</span> inside that paragraph.
A span is an inline element and so does not respect width and height.
</p>
</body>
3.display的属性：
block:元素呈现块元素特征，此元素前后会带有换行符
inline:元素呈现行内元素特征，元素前后没有换行符
inline-block：元素呈现行内并保持宽和高的属性，行内块元素
none:元素不做呈现，不占网页空间。与visibility：hidden不同，visibility不显示但占用网页空间。 display: inline-block 是一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
4.背景样式
.box {
background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1)
96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat, rebeccapurple;
}
- 背景颜色
background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。
5.背景图片
background-image 属性允许在元素的背景中显示图像.
6.渐变背景
渐变——当它用于背景时——就像图像一样，也可以使用 background-image 属性设置.
- background-clip
border-box 背景延伸至边框外沿（但是在边框下层）
padding-box 背景延伸至内边距（ padding ）外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区（content box）外沿
text 背景被裁剪成文字的前景色(这是一个实验性的 API，请尽量不要在生产环境中使用它。)
8.溢出
8.1 overflow属性
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条，即使没有足够多引起溢出的内容
auto 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容。
二、心得体会
通过老师一天的讲解，老师讲的内容较多，自己掌握的内容太少。
近期评论