日志2021.5.23

一.知识点归纳

····盒子模型·····（margin border content）

内填充：padding

·width 宽度
·height 高度
·border 边框
·padding 内边距
·margin 外边距

表示盒子的边框
分为四个方向：
上top、右right、下bottom、左left
border-top、border-right、border-bottom、border-left
每个边框包含三种样式：
border-top-color、border-top-width、border-top-style
border-right-color、border-right-width、border-right-style
border-bottom-color、border-bottom-width、border-bottom-style
border-left-color、border-left-width、border-left-style
样式style的取值：
solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线
简写，三种方式：
·按方向简写：
border-top、border-right、border-bottom、border-left
书写顺序：
border-顺序：width style color
按样式简写：
border-color、border-width、border-style
书写顺序：
border-样式：top right bottom left
必须按顺时针方向书写，同时可以缩写：
border-width:2px;--------->四个边框的宽度均为2px
border-width:1px 2px;
border-width:1px 2px 4px;
规则：如果省略，则认为上下一样，左右一样

盒子模型  box-sizing  ；  border-box

常用属性值

display的值
·block 呈块元素特征，前后带有换行符
·inline内联表元素特征 元素前后无换行
·inline-block 呈行内保持，行高属性，行内块元素
·none 不做呈现，不做显示

background

··跳出本级
background-imag：url（路径）
background-repeat-x/y

font-size 字体大小
font-weight 加粗
font-family 字体样式
font-style 字体显示效果
text align 位置
line-heigh 行高

文字阴影
text shadow     px   px   px   0
                X     Y  模糊度 color
box-shadow  盒子阴影
opcity      0.5 文字颜色整体降低透明度50%
display：inline-block  块元素 不换行
white space：nowrap  隐藏超出部分
overflow：aclipsis 省略号超出长度设置

二.心得体会

盒子模型的学习让我们体会到一门语言的学习并不容易，何以入门，何以掌握，何以熟练运用，这期间需要太多太多努力。

三.疑问

圆角设置的椭圆控件位置在作业中的怎么设置。