DESKTOP-5M73HIM_日志2021.5.23 刘兴旺

日志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 省略号超出长度设置

二.心得体会

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

三.疑问

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

标签

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