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做不出来,好多知识点运用不上。

三、疑问 

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









标签

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