2020.8.14王杉

今天的内容:
1.文本格式化:分别是字体属性和文本属性:
比如字体大小的绝对单位像素px和相对父元素的单位em以及相对html根元素rem,其中的区别是绝对单位px
容易被缩放打破布局而相对单位会随着变化不是绝对的相对来说更不容易出问题。
其它的就是字体类型设置(font-family)、字体加粗(font-weight)、字体样式设置(font-style)、
小型大写字母(font-variant)。
文本的属性:字体颜色(颜色的取值方式和用法)、文本对齐方式其中注意点在text-align:center
(内容水平居中:块级元素除外但后代块级元素会继承其属性)和 margin:auto(元素水平居中) 的区别。
行高:使用line-height:height;使文本内容垂直居中;文本线:text-decoration的使用、
首行缩进:text-indent、文本阴影:text-shadow的四个属性分别代表什么。
2.表格:表格的常用属性:(table尺寸、边框、背景、字体、文本、内边距 等有效)、th/td的外边距无效
其他一样、设置单元数据的垂直居中需要:vertical-align。
其他特有属性比如有:边框合并(border-collapse:)、边框边距(border-spacing:水平、垂直)、
标题位置(caption-side:top、bottom)、表格显示规则(table-layout:auto自适应、fixed固定)。
3.列表:列表项类型:list-style-type:none可设置为不可见,常用来做导航栏。
设置列表项为图片:list-style-image:将列表左边部分的区别圆或方形设置为图片。
列表项位置:list-style-position:默认outside、inside可将列表左边标识部分算入。
列表的简写:list-style: type image position;
4.1.背景:常见的有背景颜色的设置、背景图片设置、背景图片的平铺:(默认平铺、不平铺、xy轴的平铺)、
图片的定位:分别是从x y轴考虑、背景图片的尺寸(background-size):具体大小数值/百分比、cover
填充满整个容器没空白、contain让容器包含满可能有空白、auto图片真实大小。
背景图片的固定:background-attachment:scroll图片随滚动条滚动和fixed图片相对于窗口固定。
背景简写:在background:后面隔开分别写上以上内容属性。
4.2.渐变:渐变的因素:色标、渐变位置。
渐变的方式:线性渐变:linear-gradient()、径向渐变:radial-gradient()、重复渐变:分为{重复线性和
径向渐变(repeating-linear-gradient()和repeating-radial-gradient())}
总结:
今天做了些小练习用来熟悉知识点:使用背景图片布置样式效果和位置、背景定位做精灵图、用渐变做轮回眼和彩虹。
总的来说今天的知识点不算太多都能接受,今天进行了许多练习进行熟悉,需要多熟悉到时后需要用时才有印象。

评论