前端HTML+CSS查漏补缺——2021-7月19

<!-- 统一改变超链接的行为 -->
<base target="_blank">
跳转锚点:超链接a的href属性设置为锚点,如果锚点是id,就在前面加#。
层级:列表dl,标题dt,标题解释dd。
input type=file 是上传文件
下拉菜单:select - option。其中select加一个 multiple 表示所有的选项都摆出来
斜体:font-style:italic;
双层边框:border:double就行
background-position;百分比,以图片中轴来放。
视觉差:background-attachment:fixed;图片不会随着鼠标滚轮滚动
 
text文字样式复习一下
text-decoration:overline、underline、line-through
text-transform:capitalize首字母大写、lowercase、uppercase
text-indient:2rem;首行缩进
letter-spacing、word-spacing
折行
不强:word-warp:break-word;
强:word-break:break-all;
 
选择器复习一下:
单个:id、class、元素
群组:逗号隔开选择多个
通配:*
层次:1后代:ul li
   2父子:ul>li
   3同级:div~h2
   4相邻:div+p
属性
div[class],
div[class=‘box‘],
div[class^=‘s‘],
div[class$=‘s‘],
div[class=*=‘ea‘],
div[class][name]
伪类
普通元素:hover、active点击下去;before、after前后附加的伪类;focus选中的状态
a:link,hover,active,visited
checkbox:checked被选中的状态,disabled不可选的状态
结构伪类
nth-of-type()可以进行一些简单运算,只计算指定类型的元素
only-of-type只有在唯一的时候起作用
nth-child() 在同辈元素中排行括号里的数,如果类型不一致就没反应
 
盒模型复习一下
margin叠加和传递问题:
只在垂直方向叠加和传递;
给父元素加上border之后,父元素就不跟着子元素移动位置了(也就是不传递了);
父元素加上padding属性,可以把子元素“挤出去”,实质上也是打破了传递
 
块元素和内联元素区别
块:宽度默认父元素宽度。
内联:宽度由内容决定,不写就没有宽度。内联标签之间有空隙,是换行产生的。常用于修饰文本
 
visibility:hidden和display:none
visibility占用空间,display连空间都不占
 
可以直接用cursor:url()来定义手势(鼠标移上去的变化)
 
img是inline-block类型,默认它是基线对齐,除非重新设置底部对齐。
vertical-align:baseline; --> vertical-align:bottom;
 
浮动
/* 每一个浮动元素的新行高度是上一行最后一个元素的高度,如果上一行有东西挡住
就往后移,直到到达能放下的位置。如果上一行高度小于它的新行高度,也只按新行高度来 */
span元素自带float:left属性
清除浮动的四种方式:在父元素上添加
  overflow:hidden 不推荐使用。想溢出的子元素会被隐藏
  display:inline-block 不推荐使用。后面的元素如果是inline-block就不会另起一行了
  clear:both  推荐使用(这个是加在最后一个子元素上)  
  .clear::after {  推荐使用
        content: ‘‘;
        display: block;
        clear: both;
    }
 
一套通用的初始化代码——以后还要完善:
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    img {
        display: block;
    }

    a {
        text-decoration: none;
        color: #666;
    }
    .l {
        float: left;
    }

    .r {
        float: right;
    }

    .clear::after {
        content: ‘‘;
        display: block;
        clear: both;
    }

 

定位position复习一下

脱离文档流

relative块级元素,因为它已经占了一行,即使它被挪到其他位置,它的下一个元素还是会腾出

它的位置。所以relative是不脱离文档流的。

但如果换成absolute就只是相对页面的绝对定位,不会腾出一行,fixed也一样。这两个都让它

和其他元素失去联系。本质上absolute和fixed都是脱离文档流的

脱离文档流之后,内联元素像块元素一样可以设置宽高,块元素会像内联元素那样宽度随内容变。

但这种变化并不是完全的,只是拥有一些特性,但不是所有特性。

absolute相对谁偏移?

  默认相对添加了position属性的祖先元素偏移,如果没有,就相对整个文档偏移(页面)

fixed相对谁偏移?

  浏览器窗口。常见用途:返回顶部、广告栏、弹窗

sticky相对谁偏移?

  在没有滚到规定的位置之前跟着其他元素一起动。到那个位置脱离文档流,类似于fixed了。

如何表示层级?

  z-index:数字; 数字越大越靠上。【注意:后代的层级会被祖先的层级拖累】

下拉选择框的要点:用position:absolute设置ul,背景为白色,可以调整一下位置。

 

添加省略号:在宽度有限的容器内写如下代码

 

        #content {
            width: 200px;
            border: 1px black solid;
            white-space: nowrap; //避免全部显示,不换行
            overflow: hidden;    
            text-overflow: ellipsis; //省略号的写法
          }

 

 

 

 

前端HTML+CSS查漏补缺——2021-7月19

上一篇:十一章 Kubernetes的服务发现插件--coredns


下一篇:同源策略 跨域 JSONP