DESKTOP-AFRJOQA_20210523-高瑞瑞

0523日志

一、知识总结

1、内边距(填充) 设置四周填充：
padding:value;

padding 如果值超过一个，顺序为上右下左。

盒子模型

 盒模型的各个组成部分 ：（1）Content box: 用来显示内容，大小可以通过设置   

​                   （2）  Padding box: 内容区域外部的空白区域； 

​                   （3） Border box: 边框盒包裹内容和内边距。

​                   （4）Margin box: 外面的区域

（1）标准盒模型 ：实际设置的是 content box
（2）替代（IE）盒模型 ：可通过 box-sizing: borderbox 

display

display属性的值：
（1）block:块元素特征

（2）inline:内联元素特征

（3）inline-block：行内块元素 ，可设置宽高

（4）none:不显示，visibility：hidden隐藏，占用网页空间。  

背景样式：

（1）背景颜色：background-color

（2）背景图片：ackground-image

（3） 控制背景平铺 ：background-repeat 

​          可用的值有：no-repeat — 不重复

​          repeat-x —水平重复 

​          repeat-y —垂直重复

​          repeat — 在两个方向重复。

（4）调整背景图像的大小：background-size 

​           cover —浏览器将使图像足够大，完全覆盖了盒子区，同时仍然保持其高宽比。

​           contain — 浏览器将使图像的大小适合盒子内。

（5）背景图像定位：background-position

（6）背景附加： background-attachment 

（7）设置元素的背景（背景图片或颜色）是否延伸到边框：background-clip

处理不同方向的文本

（1）溢出的内容 

 overflow属性设置： overflow 的默认值为visible ，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。

可选值有： visible 默认值。内容不会被修剪，会呈现在元素框之外。

​        hidden 隐藏掉溢出。其余内容是不可见的。

​        scroll 显示滚动条，即使没有足够多引起溢出的内容 

​       auto 如果内容需要被修剪，则浏览器会显示滚动条以便查看其余的内容

修饰字体文字

color字体颜色

font-size字体大小

font-weight字体粗细

font-famliy字体

font-sstyle字体风格

text-algin字体所处位置

text-shandow 阴影

line-height行高

text-indent首行缩进

vertical-algin元素的垂直对齐方式

透明度 
opacity 用于设置元素的透明度， 值的范围是 0~1。  1 为不透明， 0 为透明

自定义鼠标样式：

cursor ：url（），auto；

二、心得总结

今天学习的内容有点难，练习题2做不出来，好多知识点运用不上。

三、疑问 

将一个图形如何划分横向和纵向