继续做页面
- 遇到的难题:: 图片背景 色泽难以统一,体验不好
- 做banner 背景图想要设计一样的图,可以通过浏览器下载,这就考验工具的使用
- 开发者工具Network选项是处理请求的,然后点击一下漏斗,它是过滤作用,可以更加细化请求选项,选择img选项,就可以查看当前网页请求到的所有图片信息,从中找到自己要的,就可以下载任意网站看到的美丽图片了~~~豁豁豁,然后右击,open in new tab 然后把它下载到自己的文件
- vscode 文件产生变化记得刷新一下,有时候文件改动变化会滞后
- 如果不喜欢这个图片可以去wallhaven找美丽的壁纸
做banner的时候就触及到一个css的核心知识:一个元素的高度由什么决定的??
- div的高度是由其内部文档流元素的高度总和决定的,不一定相等,因为有的情况是不相等的
- 那文档流是什么?//文档内元素的流动方向:内联元素从左往右,遇到阻碍,从下面继续流;块居元素,每一块占一行从上往下
- 注意一点,内联元素有border而且刚好到了换行的时候,元素不会切分成两个,而是切分成两半
- 如果内联元素有文字是一串很长的英文,即使到了换行的时候,也不会换行,因为英文默认连在一起的是一个单词~~~ 奇怪的盎克鲁撒克逊民族,因为说英语的人,词语都是连读的~~~,如果想让它和中文一样,会换行,就用一个属性:word-break 如果忘记了可以利用开发者工具,里面的style选项,在那里写元素和属性,都有提示,避免忘记了不会写;除外break all就是页面上无论中英文,或者哪国文字都是换行打断
bug:如果想让块元素横向布局,就用浮动,千万别用display:inline-block这是巨大的bug衍生地~~~inline-block就是css史上最大的bug
重大知识点来了:font-size:100px 是什么意思?
一个元素有纯文本内容:你好,hug. 它的font-size:100px 什么意思?是你好两个字的最高和最低的距离?还是hug这个单词的h最高点+g最低点的距离???
//答案就是后面那个选项,font-size:100px;的高度原来指的是小时候小时候写在我们英文作业本里面的英文单词高度那样子算的~~~
//除外,字体是存在一个'建议行高的',每个字体的建议行高都不一样,如果一个元素,只有字体而且有font-size属性,它的高度是由'建议行高'来决定的,字体不一样,'建议行高'也是不一样的,那么我们如何写确定的高度呢?
//直接用line-height 行高属性来设置,就能固定高度
结论:元素的高度由行高属性决定,如果没有写行高,就由字体的建议行高决定,而字体的font-size指的是写在英文线谱的英文字体高度,而非汉字
//如果有多个span(内联元素在一行里面),是由最高的span元素的高度决定的~~~
块元素高度:由它内部的文档流元素的高度总和决定的
既然提到文档流,那就不得不说脱离文档流了,浮动和定位都会使得元素脱离父亲的文档流,之前提到一个块元素的高度是由其内部的文档流元素高度总和决定的,那么他里面有一个元素脱离了文档流,那么这个父亲元素的高度是不是就少了一个子元素的高度啊~~~!!!
//在实际的页面开发中,div(块元素)布局,经常要使用到脱离文档流~~
- 在写banner图的时候,为了避免受到nav布局影响,用了position:fixed;来脱离文档流,这里会出现bug,一旦用了position:fixed;div就会收缩起来,那么就得要用宽度100%,这是一个非常坑的bug,和高度一样,元素不要设死高度,宽度不要100%,这两个是非常恶心的bug,在css调试的时候,会出现各种恶心问题就他们两个引起的,还有一个,子元素高度超出天际,高过父元素,或者宽过父元素是问题的
//如果遇到必须宽100%怎么办呢? 在父子之间用一个div包裹,隔层这里的改动会影响到css代码.这里就说到之前一个知识点,css的选择器> 和 空格的关系: >是直接子级元素,空格是子级孙子级都没关系,只有是后代就行
//css调试就恶心在这些地方,牵一发而动全身
继续往下写
- mask 遮罩层效果写法:在一个banner子级加一个div专门来做mask;样式高度和banner一样,宽度不用给,因为是自适应的,然后给mask一个rgb黑色背景色,然后调一下深浅度
- 背景图片的显示效果不理想~~~:怎么办?//
/background-position:center center 两个居中属性,左右上下,这样子就可以使得背景图片居中了~~~
/background-size:cover 属性就可以让图片随着窗口变化自适应,这样就可以有很好的体验效果~~~ - 同样的道理,宽度也别写死,userCard的元素的宽度别写死,这样体验不好~~用max-width宽度,这样的宽度是自适应的,图片会一直显示在你的中间
- 小知识点:用margin做居中;利用margin 上下,左右 auto属性,来做居中
题外话:img和background-image区别区别如下：
- 是否占位
background-image是背景图片，是css的一个样式，不占位
<img />是一个块状元素，它是一个图片，是html的一个标签，占位
2.是否可操作
background-image是只能看的，只能设置background-position, background-attachment, background-repeat
<img />是一个document对象，它是可以操作的。比如更换img src的路径可以达到更换图片的目的，也可以移动它的位置，从document中移除等等操作。所以如果是装饰性的图片就使用background-img，如果和文体内容很相关就使用img。
-
加载顺序不同
在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。
继续写
- span是不接受宽高的,或者说,内联元素是不接受宽高的~~~!!!!
- 不要写死宽高,用line-height+ padding 来自适应宽高,一旦需求改变,这样就不用改,如果写死,需求一改就可能衍生bug
用css写三角形//其实就是学css的套路
- 写css的样式,多看别人写的套路就行,拿过来直接用~~自己工作之余再玩玩
- 三角形套路
div{
border:10px solid transparent;
width:0;
border-left-color:green;
border-top-width:0;
}//用span嵌套span别用div不然很容易产生bug
//其中实现wecome效果span的时候用到了绝对定位,绝对定位什么时候用的呢?就是脱离文档流,但是还要定位~~在子元素上鞋position:absolute
在父元素上写position:relative
