LAPTOP-J6J2CAOQ_20210523 李霞英

日志

一、知识总结

盒子模型:

CSS中组成一个块级盒子需要:
Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属性
设置。

盒子模型包括标准盒模型,替代盒模型,内联盒模型.

display:

display 属性规定元素应该生成的框的类型。
display属性的值:
block:元素呈现块元素特征,此元素前后会带有换行符
inline:元素呈现行内元素特征,元素前后没有换行符
inline-block:元素呈现行内并保持宽和高的属性,行内块元素
none:元素不做呈现,不占网页空间。与visibility:hidden不同,visibility不显示但占用网页空间。

3.背景样式:

background-color(背景颜色)

background-image(背景图片)

background-repeat(控制背景平铺)
no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

background-size (调整图片大小)
cover —浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况
下,有些图像可能会跳出盒子外。
contain — 浏览器将使图像的大小适合盒子内。在这种情况下,如果图像的长宽比与盒子的长宽
比不同,则可能在图像的任何一边或顶部和底部出现间隙。

background-position( 背景图像定位)

渐变背景,属性如下:

​ linear-gradient 线性梯度渐变,延伸到整个盒子上
​ radial-gradient 有一个固定的大小,因此会重复

writing-mode( 书写模式)

​ 三个值分别是:
​ horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
​ vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
​ vertical-lr : 块流向从左向右。对应的文本方向是纵向的。

overflow溢出:

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

4.CSS的值

长度

阴影度

透明度

鼠标样式(可选值有: pointer 、 wait 、 help 、 copy 、 crosshair)

列表样式:

list-style(列表属性)
list-style:none; 没有点的呈现
list-style: disc; 呈现圆点
list-style: circle; 空心圆
list-style: square;正方块

二、心得体会

今天上的内容比较多,但是知识点都比较简单,而且自己在练习过程中的成功率也比较高,但是,今天晚上在做作业的过程中,遇到的一些问题比较棘手,容易把一些操作混淆(例如:在一个容器中嵌套的东西太多,而且嵌套的东西都不太一样的时候)。

三、疑问

1.Typora中如何将文字居中?

2.Typora中如何将文本进行首行缩进?

标签

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