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;
}
  1. 背景颜色
    background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。

5.背景图片
background-image 属性允许在元素的背景中显示图像.

6.渐变背景

渐变——当它用于背景时——就像图像一样,也可以使用 background-image 属性设置.

  1. background-clip

border-box 背景延伸至边框外沿(但是在边框下层)
padding-box 背景延伸至内边距( padding )外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区(content box)外沿
text 背景被裁剪成文字的前景色(这是一个实验性的 API,请尽量不要在生产环境中使用它。)

8.溢出

8.1 overflow属性

visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条,即使没有足够多引起溢出的内容
auto 如果内容需要被修剪,则浏览器会显示滚动条以便查看其余的内容。

二、心得体会

通过老师一天的讲解,老师讲的内容较多,自己掌握的内容太少。

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1