发表于： 2020-03-13 23:30:43
1 1366
一.今日完成的内容和收获：
（一）将图片重新进行切图，并调整自己的页面
1.常用到的属性：border-radius，transform（旋转：rotate，缩放：scale，倾斜：skew，移动：translate）等属性来实现
.triangle {
width: 0;
height: 0;
border: 50px solid blue;
border-color: transparent transparent blue transparent /*对应顺序为上右下左，想显示那个方向的三角形，让其他方向的颜色为透明色*/
}
.trapzoid {
width: 40px;
height: 0;
border: 50px solid blue;
border-color: transparent transparent blue transparent /*对应顺序为上右下左，想显示那个方向的三角形，让其他方向的颜色为透明色*/
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: black;
}
.ellipse {
width: 200px;
height: 100px;
border-radius: 50%;
background-color: blue;
}
.semicircle {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background-color: blue;
}
.parallelogram {
width: 10rem;
height: 5rem;
background-color: orange;
transform: skew(-30deg); /*deg代表度，可以取正值也可以取负值*/
}
1.line-height：设置行间的距离（行高）
（1）该属性会影响行框的布局，在应用到一个块级元素的时候，它定义了该元素中基线之间的最小距离（即最小行高），具有继承性
（2）行内框：line-height与font-size的计算之差，分为两半，分别加到文本内容的顶部和底部，来构成行内框。比如：font-size: 15px; line-height: 21px; 它们的计算之差为6px，将6px一分为二，分别加到内容区的顶部和底部来构成了21px的行内框
（3）当line-height小于font-size是，行内框实际是小于内容区的
（1）normal：默认。通常为字体大小（font-size值的1.2倍）
（2）number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距
（3）length：设置固定的行间距
（4）%：基于当前字体尺寸的百分比行间距
（5）inherit：规定从该父元素继承line-height属性的值
3.css中line-height:15px,line-height:1.5em,line-height:150%,line-height:1.5,有什么区别?
假设字体大小font-size：24px；
（1）line-height：15px ；行高为15px；
（2）line-height：1.5em ；网页的字体元素通常是16px，也就是1em=16px。但是我们在这里设置了字体大小为24px，所以1.5em=1.5*24px=36px。
（3）line-height：150% ；它的计算结果与1.5em的计算结果是一样的，也为36px
（4）line-height：1.5 ；1.5*字体大小：36px； 也称为因子方式，可以避免文字重叠的现象
（1）该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
（2）允许指定负长度值和百分比值
（3）不具有继承性
（1）baseline：默认，元素放置在父元素的基线上。
（2）sub：垂直对齐文本的下标
（3）super：垂直对齐文本的上标
（4）top：把元素的顶端与行中最高元素的顶端对齐
（5）text-top：把元素的顶端与父元素字体的顶端对齐
（6）middle：把此元素放置在父元素的中部。
（7）bottom：把元素的顶端与行中最低的元素的顶端对齐。
（8）text-bottom：把元素的底端与父元素字体的底端对齐。
（9）length
（10）%：使用line-height属性的百分比值来排列此元素。允许使用负值
（11）inherit：规定从父元素继承vertical-align属性的值
（1）inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐方式是基线对齐(基线对齐在原理上相当于图像底边与匿名文本大写英文字母X的底边对齐)；
空隙就是由line-height和vertical-align 共同作用的结果而产生的
（2）消除空隙
方法一：display：block ；
因为垂直对齐只能作用于替换元素和行内元素，更改为块级元素，会使其失效
使匿名文本与行框的距离为0
方法三：vertical-align：top/middle/bottm
1.title与h1的区别
title是网站的标题，告诉搜索引擎和用户这个网站是关于什么的主体和内容，显示在网页Tab栏里。 h1是文章标题，面对用户，指向页面主体信息，是显示在网页中的。
但从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签
建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em
alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方
title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了
4.src与href的区别
src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用
href是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。
三.明天的计划安排
1.将任务五剩下的深度思考完成
2.学习任务六的内容
返回列表
评论