自学前端第三天:html+css注意点

最新推荐文章于 2023-05-17 15:18:46 发布

AKA俄语人Лев

最新推荐文章于 2023-05-17 15:18:46 发布

阅读量937

点赞数

分类专栏：前端HTML+CSS基础文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_47592060/article/details/116387681

版权

前端HTML+CSS基础专栏收录该内容

34 篇文章

订阅专栏

鄙人总结HTML+CSS注意点:

1.代码属性可以重复写,但不会有叠加效果,只会谁写在后面就实现谁的.
2.p/li段落标签如果是借用父盒子长度,则宽度永远是跟着父盒子的原始width走,不会受padding+border影响而改变.
3.写CSS样式的时候一定注意不要乱给"空格" , 特别是 ":冒号"前后 ,乱给空格样式就会失效. a:hover { }
3.px没有零点几的说法,而em(1em就等于当前字号大小间距) 和透明度alpha 有零点几的说法
4.多个相同的标签一样的样式推荐类名/后代选择器, 多个不同的标签一样的样式推荐多类名选择器,给通用样式即可.
5.inline行内元素a/span也能转行内块元素/块元素设置宽高的,不要想着一定要块元素才能有宽高
(行内元素如何变为块元素设置宽高: 1.套一个块盒子在外面 2(推荐).自身变为block,然后自身就能加宽高了,特别是a有自身默认样式,不能继承嵌套盒子的样式)

6.不管是行内元素sapn还是p块元素还是img置换元素,只要浮动起来就都是显示为block块元素,因此什么元素在浮动之后都能设置"宽高"了,变为block了.
(还有浮动是对外的浮动,子浮动在父的两侧,如果父盒子浮动,则是去浮动到父盒子的父亲盒子的两侧)

7.E::before和E::after默认的展现模式是 inline 行内元素,一般需要设置为display:block才能设置宽高显示出来
或者inline行内元素可以通过间接方法变为block块元素,比如给元素加浮动float或者定位position,不管什么类型元素都一会变为block块元素可设置宽高.

8.千万注意在浏览器量量图多宽多高的时候,一定记得除去padding和border.才是原始width

9.overflow：hidden是对父盒子使用的，然后效果是对内的，即父盒子下面的子盒子内容超过该写了overflow的父盒子则会截取掉，看不到了

10.千万注意img图片和背景图片的区别,img是行内元素,如果img没填满装它的盒子,因为是行内元素则可以用text-aglin和line-height行高来水平和垂直居中,

11.文本自身内容也有宽度的,一旦超出标签宽度或者父盒子宽度或者自定义宽度则会自动换行.(直到盒子面积撑不下)
(同时注意:全是英文文本则不会自动换行,得中文才会自动折行)

12.容器的宽高单位不是只有具体的px像素值,在必要的时候使用百分比继承父盒子宽度时也很方便的
比如:一张img图片/背景图片要放进父盒子容器当中时,如果你想占满整个盒子可以图片宽高都给100%即可.

13.html和body高度100%的意思是，不随着内容撑大body高度,一致继承浏览器可视窗口的高度.
在这里插入图片描述

14.body标签也会在原始盒子没有加bor或pad时出现外边距穿透,用html,body { height:100%即可解决}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ewogOJVL-1620071290774)(C:\Users\tuyue\AppData\Local\Temp\1613408015535.png)]

15.margin 和 position 和 transform:translate 和 flex 都能改变元素对齐位置.

16.如果标签属性名内嵌套别的标签时,如下图 iframe 的srcdoc属性= "其他标签内容 " ,可以引进html文本内容,则进入标签时,标签内的属性则只能用单引号,否则内外会冲突,无法识别.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yg6ODB9V-1620071290777)(C:\Users\tuyue\AppData\Local\Temp\1614066095540.png)]

1.注意缩进(html和css的页面中都要注意2em的缩进)

2:CSS具体样式属性和选择器也得有缩进:

##3.字体名称如果是中文,要加,双引号.

##4: 选择器和{}之间要有一个空格;!

5.文本隐藏有利SEO爬虫：

6.选择器注意点:

①给属性CSS样式命名时候最好不要带上标签名

5:  ①.类名1.类名2是指多类名: 类名中含有类名1和2的一个多类名标签.... 
   (这种其实专业是叫交集选择器,标签为类名1的类名2标签)

    ②.类名1 .类名2是指:后代选择器,类名1下面的类名2..
    
    ③.类名1 > .类名2是指:子代选择器,类名1下面的子类名2..

    ③ .类名1,.类名2是指:并集选择器,类名1和类名2一起两个标签生效

②如果只是单纯用的是基础类名选择器,直接使用".类名"方式即可. 不要在前面加上标签选择器.(并集选择器不推荐用)
除非你用的是后代或者子代的时候,想要精准定位可以考虑一下交集选择器

ul li p a {
    	 color: red;     /*后代第一种写法: 给所有 ul的后代li的后代p的后代的a标签,赋予样式 */
      }

    ul.slide p a {          /*后代精准第二种写法: 只给类名为slide的ul标签 的后代p的后代的 a标签样式*/
      color: black;
    }

     ul a {              /*后代暴力第三种写法(推荐): 所有ul的后代下的a标签样式  
                            直接跳过中间代,直接就祖先-后代*/
      color: black;
    } */

   ul.slide  a {          直接跳过中间代,直接就祖先-后代
      color: black;
    }

③不能用important的权重器.
④优先级技巧:1.少数服从多数,先合并多数相同的样式先,再去合并少数相同的样式.
2.整体到局部,先合并整体相同的样式先,再去合并局部相同的样式
3.局部或者少数很小可以考虑(行内样式style或者内部html语义标签等)

##7.颜色:hexagon 16进制该缩写必须缩写,rgb要加rbg() 里面放颜色值

在这里插入图片描述

8.vscode的巧妙一次性生成代码:

12：

14：注意：span和p是父子关系

15：注意：span 和p是同级兄弟关系

16： h100 w100

17：如果想修改一段代码中的相同代码单词，鼠标选中 ctrl+d 一直按，直到选中需要修改的所有代码段

写完记得先去除最后一个符号,然后vscode才会显示,补全的指令出来

8.学会巧妙利用多类名选择器: (大多用于提取多数属性共同的文字文本样式)

1.如果有很多段或者很多标签的样式都一样,比如下面的第一张图和第三张图的分别的p标签中,字体文本的格式都一样的,因此这时很多人都会说,那就分别设置一个单独设置p{ } 把这些字体样式都集中起来吧???

虽然这样也可以,但是这样每个p的里面的不同细节比如margin或者padding或者有些字span不一样该如何是好呢?

2.因此我们这是选择多类名选择器,就是把相同的文本样式单独写出来,再分多个不同类名聚集在p标签的类名class中.

优点1: 高内聚,解耦合 (通过多类名方式将CSS格式拆分写,随拿随用,要什么我们就给什么放进去,有利于维护)
( 且不用在CSS注意样式书写顺序,在属性类名放对就行,真就随拿随用)

优点2:可以留着p这个标签选择器去设置别的东西 ,但是得用子代继承器,因为有太多不同样式p段落了.不能直接了p{}
(比如:.header > h2 /.header > p / .content>p 等等和指定p{}标签是一样的效果,可以去另外单独去各自不同的margin/padding或者border等其他样式 )

优点3: 可以被其他标签(想要一样效果的)重复使用或者子标签继承 (和继承然后覆盖性有关,不是所有都继承)
①(恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color颜色属性))0
②所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可,然后子类如果有特殊还能在子类单独写然后就会覆盖父类了.

比如:第一张图的全部文字的CSS文本格式为什么不设置在span中,就是因为可以继承了p标签的文本格式,因此全部聚集在p标签,然后继承过来之后如果子标签想有自己的效果也可以,就利用层叠性即JAVA的子类覆盖实现自己独有需求,就可以再一次span中设置自己独特的样式.
第二张图可以看出,继承父类全部和子类独特覆盖的好处!!

4.总结:多使用多类名选择器:(前提是很多相同标签都有一样属性才这么干)
①共有的都放在父标签多类名选择器上,这样可以被子类继承和子类覆盖,(不影响自己使用子代选择器干自己的段落不共有的事情)
②然后子类自己特有的CSS样式属性可以额外再具体写自己的特有类名放进去子类的类名去代替覆盖父类的. ③总之第一张和第二张图把多类名发挥的淋漓尽致!!!
④如果只是单标签的属性,则还是原来一样,文本文字边框都堆在一起写即可 (如下图的.header > h2 只有h2这一条标签且样式没有相同的就全部东西自己写,或者有和上面多类名相同的话也可以把多类名重复使用到这里来哦即 h2 class=xx xx xx)

5.注意:多类名选择器和类名并列id选择器区别:

   <div class="header">  单类名选择器(div通常不多类名,用来设置大盒子宽高内外边距)
  <p class='fz12 c666 lh36'>  多类名选择器 (多用于p/li装文本的小盒子)
  <p class='fz12 c666 lh36' id="only">  类名并列id选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>homework 0612</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }


    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .fz12 {
      font-size: 12px;
    }

    .fz14 {
      font-size: 14px;
    }

    .c666 {
      color: #666;
    }

    .lh24 {
      line-height: 24px;
    }

    .lh36 {
      line-height: 36px;
    }

    .tl {
      text-align: left;
    }

    .tr {
      text-align: right;
    }

    .indent2x {
      text-indent: 2em;
    }

    .mr20 {
      margin-right: 20px;
    }

    .mr12 {
      margin-right: 12px;
    }

    .cb60 {
      color: #b60c0c;
    }

    .c045 {
      color: #0454a7;
    }

    /* 
    .hit {
      font-size: 12px;
      color: #666;
      line-height: 36px;
    } */

    .container {
      width: 640px;
      margin: 100px auto;
      padding: 10px 20px 30px;
      border: 1px solid #bbb;
      border-top: 3px solid #0454a7;
      font-size: 14px;
      line-height: 24px; /*也是穿透里面让里面所有的文本行高为24,并不是让盒子之间距离为24*/
      text-align: center; /*也是可以穿透里面让里面所有的文本都居中*/
    }

    .header {
      border-bottom: 1px solid #ccc;
    }

    .header>h2 {
      font-size: 22px;
      line-height: 35px;
      color: #333;
      font-weight: 400;
    }


    .inset-pic {
      width: 558px;
    }

    .content {
      text-align: left;
      padding: 0 20px;

    }

    .content>p {
      margin-bottom: 22px;
    }

    .inter-news {
      width: 560px;
      padding: 10px;
      margin: 0 auto 20px;
      border: 1px dashed #666;
    }

    .keywords>a {
      color: #0454a7;
    }

    .bottom {
      display: inline-block;
      width: 518px;
      height: 28px;
      border: 1px solid #0454a7;
      background-color: #dee2f3;
    }

  </style>
</head>

<body>

  <div class='container'>
    <div class="header">
      <h2>最美逆行 除夕夜青岛这名医生奔赴疫情一线</h2>
      <p class='fz12 c666 lh36'><span class="mr20">2020年01月25日 01:00</span><a href="#" class="mr12 cb60">新浪新闻综合</a><span
          class="mr12">微博</span><a href="#" class="mr20 c666">我有话说(<span class="cb60">7,370</span>人参与)</a>
        收藏本文</p>
    </div>
    <img class="inset-pic" src="img/img.jpg" width="677" height="504" alt="最美逆行">
    <p class='fz12 c666 lh36'>最美逆行！除夕夜，青岛这名医生奔赴疫情一线，向她致敬！</p>


    <div class="content">
      <P class="indent2x fz14 lh24">
        “你这傻孩子，医院那么多医生咋就非你去不可？好好在家过个年不行么！”面对父亲的“质问”，秦文只是笑笑没说话。作为一名青大附院院感科医生，她知道这场源发于武汉的疫情意味着什么，如果连医生都选择逃避，那只会让更多人的健康失去保护；但作为女儿，她也明白父亲的话并非真埋怨她傻，毕竟哪个做父母的愿意看见自己的孩子冒险？
      </P>

      <div class="inter-news">
        <p><span class="c045">疫情新闻资讯：</span>#疫情#大年三十接到通知：武汉需要你。“其实疫情爆发的时候我就有心理准备，但是没想到会这么突然。</p>
        <p class="tr fz12 c666">2020-01-30 12:54 来自UC浏览器 转发(349) | 收藏 | 评论(50)</p>
      </div>

      <P class="indent2x fz14 lh24">
        作为青大附院院感科的医生，秦文一直密切关注着这场疫情，而作为一名医疗工作者，她也明白自己的使命，“一旦情况需要，我可以马上去武汉！”。不同于其他科室，院感科的主要职责是保证医院及医护人员免受病毒感染，尤其是面对新型病毒，由于对病毒习性、耐药性等指标的不确定，预防工作就会显得极其重要。
      </p>

      <P class="indent2x fz14 lh24">
        秦文说，这个问题家人们问过她很多遍，作为感染防护的专业人员，秦文曾经在国家卫生健康委医政医管局借调，主要就是负责感染防护类的工作。此次武汉爆发疫情，除了医疗类的各种物资，最缺的就是从事感染防护医护人员，看似是一道选择题，但是对于秦文来说，这道必答题的答案只有一个。
      </p>

      <p class="keywords">文章关键词： <a href="#">疫情</a> <a href="#">疫情</a> <a href="#">疫情</a> <a href="#">疫情</a></p>

    </div>

    <p class="bottom"><a href="#">点击下载【新浪新闻客户端】，最新新闻资讯尽在掌握</a></p>
  </div>
</body>

</html>

<!--

9.img元素

一.标签定义及使用说明

<img> 标签定义 HTML 页面中的图像
<img> 标签有两个必需的属性：src 和 alt
强烈推荐在开发中每个图像中都使用 alt 属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说，alt 属性通常是他们了解图像内容的唯一方式

二.`<img />`究竟是什么元素

`<img />` 是行内元素还是块级元素？

<img /> 标签没有独占一行，所以是行内元素，这没啥问题.
扩展:如何判断行内和块元素?

判断是不bai是块状元素，很简du单就看它会不会占具一整zhi行(即写了dao这个元素zhuan，其他的都会被挤到下一行。块状元素一般有div，p,h1~6等等)
当然还有一个特例：inline-block,具有2者的特性，可以设置宽高、padding等等属性，还不会独占一整行。不过只兼shu到IE7（可以通过一下小技巧让IE7也兼容），

三.既然是行内元素为什么能够设置宽高呢？

这个问题就要引申出下面，<img /> 标签属于置换元素，具有内置的宽高属性，所以可以设置，具体解释看下面。

1.元素的定义

从元素本身的特点来讲，可以分为不可替换元素和替换元素

2.不可替换元素(非置换元素)

(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端(例如浏览器)
如：<h1>我是标题</h1>

3.可替换元素(置换元素)

浏览器根据元素的标签和属性，来决定元素的具体显示内容
例如浏览器会根据 <img> 标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据 <input> 标签的type属性来决定是显示输入框，还是单选按钮等
(X)HTML中的 <img>、<input>、<textarea>、<select>、<object> 都是替换元素。这些元素往往没有实际的内容，即是一个空元素
如：<img src="tigger.jpg"/>、<input type="submit" name="Submit" value="提交"/>
可替换元素的性质就如同设置了display:inline-block的元素一致

4.特殊的可替换元素

<img>属于可替换元素
<img>同时具有行内元素，行内块，和块级元素的特性
因为置换元素一般有内在尺寸，所以具有 width 和 height可以设定
- 例如你不指定 <img> 的 width 和 height 时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度
- 对于表单元素，浏览器也有默认的样式，包括宽度和高度
- <img>、<input>属于行内替换元素。height/width/padding/margin均可用。效果等于块元素

5.①img 原始地方不要加单位

②为什么多个div装img图片变为一行时,有间隙
因为你从多个div块元素图片内,变为了行内块元素就又会,就会产生白色间隙换行符.

③为什么图片和文字行内块对齐时,图片下面有白色间隙,因为vertical-aglin文字默认对齐是基线. 要设置不是默认值,比如居中 vertical-aglin:middle即可

一、去除元素间的空白
通过将上一个元素的闭合标签与下一个元素的开始标签写在同一行，可以去除元素间的空白，或者将两个inline-block元素间加上空白注释，或者不写元素的闭合标签等，例如这么写：

1
<ul>
    <li>one</li  
    ><li>two</li  
    ><li>three</li>
</ul>
<!-- or -->
<ul>
    <li>one</li><!--  
    --><li>two</li><!--  
    --><li>three</li>
</ul>
 

二、父元素设置font-size为0，子元素单独再设置字体大小
如下所示：

.layout.inline-block .left-center-right {
    font-size: 0;
}
.layout.inline-block .left-center-right > div {
    font-size: 16px;
}
 

三、设置margin-right为负值
用margin负值来抵掉元素间的空白，不过margin负值的大小与上下文的字体和文字大小相关，并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以这个方法并不通用，也相对比较麻烦，因此不太推荐使用。

四、给inline-block元素加float或者flex
让行内块元素浮动起来，或者给父盒子加上display: flex; 都可以解决空白间隙的问题，不过这样处理的三栏式布局也就没必要用inline-block啦。

五、设置字符间距或单词间距
这两个方法的原理有点像二所用的font-size，具体做法是给父元素一个letter-spacing或者word-spacing的负值，子元素再调整为0即可，具体使用字符间距还是单词间距其实大同小异。
/* letter-spacing */
.layout .left-center-right{
     letter-spacing: -0.5em;
}
.layout .left-center-right>div{
     letter-spacing: 0;
}
 
/* word-spacing */
 
.layout .left-center-right{
     word-spacing: -0.5em;
}
.layout .left-center-right>div{
     word-spacing: 0;
}

(具体看:https://www.cnblogs.com/showcase/p/10469361.html)

③img特殊对待:(img为行内元素和置换元素可以设置宽高,且水平padding/margin生效)

[1]img如何居中
A.img为行内和置换元素,如果没规定大小,则可以设置图片width和父级盒子一样width宽,

然后再让父级盒子各两边扩充肌肉padding即可间接居中了.

B.img如果规定死了图片太小,不能让他和父级盒子一样宽,则使用text-aglin了,让其作为文本去居中对齐父盒子.

[2]img图片标签如何自动比例缩放
给设置具体继承100%宽度后可以给高度设置为 auto(自动) 值让其实现等比例自动计算

10.background-image 和 img 的区别 . (一个是CSS样式,一个是HTML标签)

区别1:

background-image是背景图片，是css的一个样式
<img /->是一个行内和置换元素，它是一个图片，是html的一个标签

即background是CSS3的样式
img 是HTML的标签，两者之间存在本质的区别

区别2:

background-image是只能看的一种配图而已 (上面能够覆盖写文本,但是仅仅装饰意义)
img 是一个document对象，它是可以操作的。(充当实际文本补充意义 , 视觉上告诉你文本想要描述的是什么,最后img和文本内容一起组成一个产品展现给你看)

区别3:

一般来说，如果是装饰性的图片就使用background-img，如果要经常更新和文体内容描述很相关就使用img
比如更换img src的路径可以达到更换图片的目的，也可以移动它的位置，从document中移除等等操作

区别4:

在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。

二.实际开发怎么区分bc背景 / img图片 / icon字体图标

①小小个的一定是字体图标 /或者是背景精灵图
②很大的,上面能写文字,一半都是背景图片
③图片和文字一起上下或者左右不覆盖的去排列的一般是图片

三.具体怎么插入bc背景 / img图片 / icon字体图标呢?

①背景bc因为是CSS样式,因此一定是单独写即可的

**②图片img可以在html页面内单独插入img标签, **
或者使用伪元素content: url插入img也是可以的,也是行内元素.(下面有案例,切一定记得写上img属性)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0frpKNIW-1620071290788)(C:\Users\tuyue\AppData\Local\Temp\1614674687723.png)]

③字体图标/精灵图最好是是伪元素before/after来做. (因为伪元素是虚拟标签,不用多开一个真标签去插一个图标,节约空间)
(但要考虑目标元素是谁,在哪个元素放before和after,因为一般要用ab绝对定位或者float 或者变为块/行内块来translate来调整位置的.)

(复习: before和after伪元素默认是行内元素.

目标E元素是行内元素,则其前后伪元素, 是并排前后关系)

目标E元素是块元素,则其前后伪元素,则是各占一行上下关系,但是变为ab/float/inline-block ,变为父子嵌套

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3ooMRa1-1620071290789)(C:\Users\tuyue\AppData\Local\Temp\1614592961913.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gu3aojEQ-1620071290790)(C:\Users\tuyue\AppData\Local\Temp\1614596268277.png)]

这里不转换模式是因为li给flex了,flex下的所有元素变为盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2zAYE7MG-1620071290792)(C:\Users\tuyue\AppData\Local\Temp\1614248412044.png)]

当然也可以在图标的位置,单独放入一个span 或者 i 标签, 可以因此不用伪元素,用具体标签代替.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQvPVIjZ-1620071290794)(C:\Users\tuyue\AppData\Local\Temp\1614615942847.png)]

下面会讲为什么用i标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Q2Ql93o-1620071290795)(C:\Users\tuyue\AppData\Local\Temp\1614596523805.png)]

10.html5里为什么经常用i标签+伪元素来作为小图标使用

这个不是H5特有的情况，只是设计师习惯性用法zhi，用i表示icon图标，便于他人理解。例子：



<ul>
<li><i class="ico1"></i>首页</li>
<li><i class="ico2"></i>关于我们</li>
</ul>

<style>
    .ico1,.ico2{background:url(test.png) center left no-repeat; width:15px; height:15px}
</style>

为什么大家都用i标签用作小图标?

用 i 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）；
i 比 span 短，但 gzip 后差异很小，不过打字可以少按三个键；
多数图标用的是空 <i//> 元素，配合 ::before /after伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。

1.基本语法:

:before 和 :after 伪元素编码非常简单(和大多数的css属性一样不需要一大堆的前缀)。这里是一个简单的例子。

#example:before {
  content: "#";
}

#example:after {
  content: ".";
}

这个例子中提到了两件事情，第一，我们用#example:before和#example:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素。

第二，在内容模块中提到，伪元素如果没有设置“content”属性，伪元素是无用的。

在这个例子中，拥有属性id的元素将有一个"哈希符号"放置内容之前，和一个"句号"在内容之后。

2.语法笔记

你可以设置content属性值为空，并且仅仅把他当做一个内容很少的盒子。像这样:

#example:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
}

然而，你不可以完全的移除content属性，如果你移除了，伪元素将不会起作用。至少，content属性需要空引用作为它的值(即:content:“”)。

你也许注意到，你也可以用两个冒号(::before 和 ::after) 写伪元素，这个我以前讨论过的。简短的解释是，对于这两种语法没有什么不同，仅仅一点的不同是，伪元素(双冒号)，css3中的伪类是（单冒号）

最后就语法而言。从技术上讲，你可以普遍的应用伪元素，不是放在特殊的元素上，像这样：

:before {
  content: "#";
}

虽然上面是有效的，但是它十分的没用。代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了标签和它的所有内容，你仍会在页面上看见两个散列符号：一个在里，另一个在标签里，浏览器会自动创建哪一个。

3.伪元素插入内容的特点

正如前面提及的，插入的内容在页面的源码里是不可见的，只能在css样式里可见。

同时，插入的元素在默认情况下是内联元素（或者，在html5中，在文本语义的类别里）。因此，为了给插入的元素赋予高度，填充，边距等等，你通常必须显式地定义它是一个块级元素。

这会是对如何设计伪元素的一个简要的说明，看我下面文本编辑器的这幅图

pseudo element

在这个例子中，
①我高亮的样式将被应用到元素里插入到目标元素内容的前面和后面。

②还要注意的是典型的CSS继承规则适用于插入的元素。例如，你有字体系列黑体，宋体，无衬线字体应用到body元素里，然后伪元素会像其他元素一样继承这些字体系列。

③同样的，伪元素不会继承没有自然继承自父元素(如 padding and margins)的样式。

伪元素会怎么注入到目标元素中？

你的直觉是：before和：after伪元素可能是插入的内容会被注入到目标元素的前或后注入？但是，正如上面提到的，不是这样的。

注入的内容将是有关联的目标元素的子元素，content指向的内容会被置于子元素的“前”或“后”。

为了证明这一点，看看下面的代码。首先，在HTML：

<p class="box">Other content.</p>

下面是插入伪元素的css：

.box {
  width: 300px;
  border: solid 1px white;
  padding: 20px;
}

.box:before {
  content: "#";
  border: solid 1px white;
  padding: 2px;
  margin: 0 10px 0 0; 
}

在此html里，你所看的一段文字带有的是一个类的box，还有这样的文字“Other content”在里面（像你所会看到的一样，如果你看见了首页的源代码）。在css中，这段内容被设置了宽度，以及一些padding和可见的边框

然后我们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容之前。随后css给了它一个边框以及一些padding和margins。

这里是浏览器中查看的结果：

pseudo element

外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。

4.伪元素可以插入非文本内容.( content: url(image.jpg)用url地址插入小图片/图标 )

我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的

p:before {
  content: url(image.jpg);
}

注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。

当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。

你还可以选择attr(X)中的函数的形式。此功能，根据规范，“把X属性的值以字符串的形式返回”

下面是一个例子：

a:after {
  content: attr(href);
}

attr（）函数的功能是什么？它得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的<a`>元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。

你也可以用这个函数去获取元素的title属性，或者甚至是microdata的值。当然，并不是所有的例子都符合自己的实际，但根据不同的情况，一个特定的属性值作为一个伪元素可以是实际的。

然而，获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。记住伪元素必须是被应用元素的子元素。图像，这是void(或者是空元素)，没有子元素，所以它在这个列子中不可用，同样也适用于其他空元素，例如：<input`>。

5.可怕的浏览器兼容性

任何前端技术的发展势头，第一个问题就是浏览器的支持。在这种情况之下，它不是个很大的问题。

浏览器支持:before 和 :after 伪元素栈，像这样：

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
几乎所有的移动浏览器。

唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。所以，如果你的爱好者是在良好合适的web开发（或者其他具有较低IE版本的市场），你可以继续自由地使用伪元素。

伪元素不是决定性的

幸运的是，缺少伪元素不会造成大问题。大多数情况下，伪元素一般修饰（或者帮助）内容，不会给不支持的浏览器造成问题。所以，如果你的支持者具有较高的IE版本，你仍然可以在某种程度上使用它们。

一些提醒

正如前面提到的，伪元素不会出现在DOM中。这些元素不是真正的元素。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。

另外一件需要记住的是，开发工具，例如火狐，不要用伪元素显示内容。所以，如果使用了，伪元素会造成难以维护和调试缓慢。

（更新：在评论中提到的，你可以使用谷歌的开发工具来查看一个伪元素相关联的风格，但不会出现在DOM元素里。同时，火狐在1.8版加入伪元素支持它。）

你所需要用有的理念是用这个技术以创造出实用的东西。与此同时，将来进一步研究CSS伪元素，一定要看看我们已经链接的一些文章。

10. 行高line-height详解:

(line-height可以文本垂直居中,vertical-aglin(变为行内块)是文字对齐图片)

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。(px像素)
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

1、行高和行间距的区别:
line-height 属性设置行间的距离（行高），而行间距的尺寸分配是line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容(文本顶部+文本+文本底部)的最小框就是行框(line-box)，

2.line-height应用: ①调整多文本行距,(行距不等于段落距)
②调整单行段落比如h3/p/li和其他段落盒子的距离(大盒子之间的距离建议margin)
③让单段文本在盒子中垂直居中.(扩充文本上下两端类似padding)

3.如果是多行文本,如何测量行高,上一行顶线到下一行顶线就是行高.
(因为行高是会扩充自身文本的相等上下端类似padding,因此行距是包含上一行下底端和下一行文本的上顶部
又因为上下端是一样距离,因此行高就转化为上一行顶线到下一行顶线,原本是当前文本的上下端和文字自身尺寸)

在这里插入图片描述

**3.如果是只有一行文本则怎么测量行高?通常是: **
(单/多文本都是,自己预判文字两边宽不宽,也有可能是padding,多文本去可以看两行之间的顶线距离看有没有行高)
[1]如果没加行高则默认:文本自身尺寸+1-2px,且默认行高会随着字体尺寸而越来越大几px.
[2]如果加了行高:则可以去浏览器看盒子,(没加pad和bor)则整个文本框就是行高哦
此时,①如果是仅仅想扩充单行文本内部上下边的距离,建议使用line-height(下面的红盒子是没有的)或者padding .
②如果是想整个有border线条或者背景颜色的盒子整体移动就margin,不能line-height了
如果没有border线条或者背景颜色,看不出是盒子,则可以line-height间接充当扩大当前文本盒子和其他盒子的距离

如何计算一行文本上下各扩充多少: ( line-height行高(文本顶+文本+文本底) - 字体尺寸) / 2
例如:35px - 12px=23px 即上下两端各约扩充12px.
(切记这不是所谓的行距,单行文本才一行,无法体现行距,真正行距看下面多文本)

4.如果是多行文本在一段里面,则行高line-height可以通过上一行顶线到下一行顶线就是行高. 如图就是36px分毫不差
但注意:①多文本的行距是:当前行文本的下底部 + 下一行文本的顶部组成的,只是两者值是相等均分的.
②例如下面段落的第一行上顶部和下底部就各为: (36-14)/2 = 11 ,而真正的行距(第一二行距离):就约为11*2 = 22px.
③不过真正开发中,一般行高比字体大8-10即可,是看起来比较舒服的,一行的上下段各扩充4-5px左右.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qbBunGm-1620071290802)(C:\Users\tuyue\AppData\Local\Temp\1611479922258.png)]

因此这里是25px: 每行的上下顶部各留:(25px-14px) / 2 = 约6px ,而行距约为11px即可 (你可以自己现在用截图工具量,分毫不差)
在这里插入图片描述

2.总结行高超级重点!!!
①一行段文本不存在行距,使用line-height就是类似padding扩充文本上下的距离而已.

②一段多文本行才存在行距,是由一行的下底部 + 下一行上顶部组成的,可间接转化为:行高-字体尺寸 = 行间距.

③在设计图时,如果上下文本分别是两段毫不相关的段落,那么你该如何设计两段之间的文本距离呢??
这挺复杂的:这里排除padding和border来处理,有的话另外去考虑即可.
(1) 在设计图上先量出这两段的总距离(因此两段的行高字体不同的,因此分配的空间也不同的).
(2)计算出:上一段的文本下底部扩充了多少或者下一段上顶部扩充了多少 .然后再用总距离减去即可
(通常多行文本比较好计算,因为通过测量上一行顶线到下一行顶线就是行高 , 然后行高减去字尺寸 /2即可得出上或者下扩充了多少,最后总距离减去就得出另一段的底/顶部扩充了多少, 扩充部分2+字尺寸就等于另一段的行高了,完美处理)
**举例:上一张图, 不看右下角我们自己量出行高(25px -14px)/2 = 约6px ,即文本上端扩充了6px(此处有可能有pad+bor要减去),则再量两段文本总距离为20px(有可能包含padd+bor要减去),则20px-1px(bor)-6px = 13px ,说明另一段下边扩充了13px,则另一段line-height行高为13px2 + 12px = 38px (最佳设计完美,有可能和实际误差5px以内正常的)**

(3)因此如果下一段文本设置了另外的行高,则两者之间段落距会更大,所以不用着急在上一段就想着设置好两段的距离,
可以和下面一段也设置line-height行高后扩充的上顶部配合一起组成两端的真正的距离,或者嫌麻烦直接margin也行)

11.a标签的讲解:

1.浏览器支持

所有主流浏览器都支持标签。

2.标签定义及使用说明

<a`> 标签定义超链接，用于从一个页面链接到另一个页面。

元素最重要的属性是 href 属性，它指定链接的目标。

在所有浏览器中，链接的默认外观如下：

link未被访问的链接带有下划线而且默认colar是蓝色的
visited已被访问的链接带有下划线而且默认colar是紫色的
active活动链接带有下划线而且默认colar是红色的

3.提示和注释

提示1; 如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。

提示2; 默认通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。

提示3; 请使用 CSS 来改变a链接的样式。

4.HTML 4.01 与 HTML5之间的差异

①在 HTML 4.01 中，标签既可以是超链接，也可以是锚。
②在 HTML5 中，标签是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符。
HTML5 有一些新的属性，同时不再支持一些 HTML 4.01 的属性。

5.a标签的内部具体属性

New ：+HTML5 中的新属性。

属性值描述
charset char_encoding HTML5 不支持。规定目标 URL 的字符编码。
coords coordinates HTML5 不支持。规定链接的坐标。
downloadNew filename 指定下载链接
href URL 规定链接的目标 URL。
hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNew media_query 规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name section_name HTML5 不支持。规定锚的名称。
rel alternate author bookmark help license next nofollow noreferrer prefetch prev search tag 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev text HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape default rect circle poly HTML5 不支持。规定链接的形状。
target _blank _parent _self _top framename 规定在何处打开目标 URL。仅在 href 属性存在时使用。_blank：新窗口打开。_parent：在父窗口中打开链接。_self：默认，当前页面跳转。_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
typeNew MIME_type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME = Multipurpose Internet Mail Extensions。

##6.a标签注意点:

①因为a标签默认就有样式，就像li盒子默认自带list-style-type,
(而我们知道,样式的优先级:默认样式>父级样式的),所以不会继承父级的样式，
因此如果需要更改A标签的样式，那么就必须定位到a标签,比如：.sale ul li a{color:#fff};

②同样的道理，为什么a标签无法继承父级样式，理由就是自带的默认样式肯定比父级样式优先级高，**同样的,a本身自带了link、visited、hover、active等样式，在你继承之前，它们都已经存在。**且顺序为link–visited–hover-active

③a是浏览器唯一强制指定了默认的color和font-size等属性的标签，（历史问题，早期a仅仅代表链接且当时css不存在，想要快速创建网页a标签的这些样式就被直接规定了，后来这规则就约定俗成了，浏览器一直这么解析）而标签样式直接指定导致其无法继承父级的样式。因此样式覆盖规则，父级样式继承在此也就没有意义了

④我在补充一点，a标签是内联元素，有的块级元素属性就是对它不起作用，例如宽度和高度。
除非进行元素转换,即加上display:block就可以设置高度宽度了。(行内元素的margin和padding只有水平才有效)

属性	值	描述
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码。
coords	coordinates	HTML5 不支持。规定链接的坐标。
downloadNew	filename	指定下载链接
href	URL	规定链接的目标 URL。
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNew	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name	section_name	HTML5 不支持。规定锚的名称。
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev	text	HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape	default rect circle poly	HTML5 不支持。规定链接的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。_blank：新窗口打开。_parent：在父窗口中打开链接。_self：默认，当前页面跳转。_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
typeNew	MIME_type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME = Multipurpose Internet Mail Extensions。

7.扩展:a下面的hover增长横线小技巧:

**(1.不用定位写,则默认是中间向两头展开的) **

(2.在横线处+上绝对定位+left即可从左开始移动, 上right即可从右…
一旦加上position绝对定位就只能从左或者右开始增长,不能从中间向两头,因为绝对定位生效一定要写偏移量)

在这里插入图片描述

开发小技巧的综合案例:

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于运动方向的技巧</title>
  <style>
 

    a {
      color: #222;
      text-decoration: none;
    }

    .nav {
      padding-top: 70px;
      text-align: center;
    }

    .nav a {
      position: relative;
      display: inline-block;
      font-size: 14px;
      margin: 0 10px;
    }

    .nav a:after {
      content: '';
      position: absolute;  /*这里只写写display:block也行的,只是只能从左往右了*/
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background-color: orange;
      transition: .3s;
    }

    .nav a:hover:after {
      width: 100%;
    }

  
  </style>
</head>

<body>
  <div class="nav">
    <a href="#">首页</a>
    <a href="#">新闻资讯</a>
    <a href="#">体育资讯</a>
    <a href="#">今日看点</a>
    <a href="#">更多消息</a>
  </div>
  <div class="wrap">
  <div class="line"></div>
</div>
</body>

</html>

12 总结块级元素和行内元素居中的方式

一.简述元素分类:

1.一般来说，在页面中需要进行水平居中的元素，大致分为两种:一种是块级元素，即display:block，一种是行内元素display:inline-block;

2.块级和行内具体分类举例:
块级元素包括:div，ul，p,以及所有的h类标签。
行内元素又叫内联元素，a，img，input是最常见的。(img和input又称行内块元素)
这些行内元素，都可以可以通过display:block转换成块级元素或者display:inline-block行内块元素。

3.块级和行内和行内块的区别???
行内元素自身没有宽度,随文本自适应宽度,可以在一行显示，
而块级元素自身默认独占整行宽度,高度随内容自适应,
而行内块元素综合大赢家即可以多个一行显示,也可以设置宽高.

**4.①行内元素文字居中:**让行内元素水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。

②块级元素水平居中: 为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的，也就可以在是水平方向上居中了。(注意:text-aglin是对内的,margin:0 auto;是对外的)

③行内块元素居中:是inline-block就对其父级元素添加text-align:center，是块级元素就对其本身添加margin:0 auto(行内块使用margin:0 auto不能居中)

④总结: inline行内元素想要变为盒子居中有两种:一种变为块元素对其本身添加margin:0 auto,一种是变为行内块对其父级元素添加text-align:center.(看哪个方便并且不会冲突到别的样式.)

二.升级水平居中方式:

1.行内元素如何居中？
inline行内元素用text-align:center;

2.行内块元素居中？
inline-block就对其父级元素添加text-align:center即可。

3.块级元素如何居中？(四种方式)
第一用 margin:0 auto;

第二水平居中定位用定位：

position: absolute;
            left:50%;
            right: 50%;
            transform: translate(-50%)
 translate 如果第二个参数不填的话，默认是0
 transform: translate(-50%,-50%) 这种是中心居中

结果如下：

绝对定位第二种:另一种方法比较省事:(让margin外边距自己去算,自己去拉扯元素四边的位置进行平衡)

	1.中心居中: top left right bottom 四个方向设置为0   + margin:auto;

	2.水平居中: left right 方向设置为0 + margin:auto/margin:0 auto; (让margin左右为难自己拉扯)

	3.垂直居中: top bottom 方向设置为0 + margin:auto/margin:auto 0;(让margin上下为难自己拉扯)

第三用浮动：

float: left;
            margin-left: 50%;
            margin-right: 50%;
            transform: translate(-50%);

结果如下：

第四种flex布局：

   html{
          display: flex;
          justify-content:center; (水平居中)
		 aglin-items:center; (中心居中加上这个即可)
        }

       .div1{
           width: 200px;
           height: 200px；
           background-color: blanchedalmond;
       }

结果如下：

五.PS:flex是设置在父盒子中对内的,是让内部子元素居中,而absolute是设置在子盒子中对外的,让自身居中在外部父盒子,因此千万注意使用位置

如下图出现混用(flex+ab)情况: (一个让子居中,一个让自身居中,可以混用的)
儿子紫盒子要在父蓝盒子中居中,因此flex写在父亲蓝盒子,
而同时父蓝盒子又要在浏览器爷爷那里居中,写ab.(此时蓝盒子又出现混用了)

13.伪元素E::after和E::before的细节(冒号不能有空格否则失效)

1.伪元素默认是inline内联元素,伪元素需要将其设置为块级元素或者块级内联元素才能设置盒子宽高尺寸

2.伪元素一定要记得:加上content属性,否则一定百分百失效!!!

3.E:before/after 必须加上content:’ ‘; 才能生效, 但是切记不要弄混E:hover:before/after 这个就不是伪元素标签了,不用加content:’ ';只是影分身的鼠标点击触发的hover形式而已.

4.当E元素为块级盒子时,而伪元素也为块级盒子时,则E元素和前后伪元素是父子盒子嵌套关系.(伪元素是E块盒子范围的一部分)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YafLo3ES-1620071290828)(C:\Users\tuyue\AppData\Local\Temp\1612512748184.png)]

①.当E元素是行内元素,而伪元素也是行内元素时,则E行内元素和前后伪元素是并排关系.(伪元素是E行内文本内容的一部分)
(三个都是行内元素,则也可以都设置为行内块,这样即可以一行显示,也可以设置宽高尺寸了)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ETXrPXyq-1620071290830)(C:\Users\tuyue\AppData\Local\Temp\1611753252761.png)]

②.当E元素是行内元素时,而伪元素是块级盒子,就是各占各行的上下级关系.(当然可以通过浮动或inline-block变为并排一行)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Rddqbkf-1620071290834)(C:\Users\tuyue\AppData\Local\Temp\1612518530276.png)]

14.伪类选择器的E:hover的注意细节:(冒号不能有空格否则失效)

①最基本的a:hover表示的是当鼠标经过a标签是，a标签的样式改变

[1]但要PS:a标签的前后伪元素影分身,因为影分身是属于a标签的一部分,因此放在a标签前后点击该图标时也会触发a的hover ,也就是E标签的前后影分身是行内元素,并且属于E标签的一部分,和E标签共享E:hover的

[2]如下图,给li:before,当点击句首图标时,标签不会变色a:hover不会生效 , 而 a:before则会.这就是细节区别.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNiipHp9-1620071290836)(C:\Users\tuyue\AppData\Local\Temp\1613487333153.png)]

②a:hover span则表示的是当鼠标经过a标签时，a标签下面的span标签样式将会发生改变,

常常使用在mask面具(display:none)隐藏然后给 .box:hover .mask {display:block} ,即可以显示出来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q7hszsN3-1620071290841)(C:\Users\tuyue\AppData\Local\Temp\1613487051663.png)]

③a:hover:before 是指给a标签影分身加hover样式,不能写成a:before:hover因为影分身是不是真正标签,没有hover样式的,只能用a:hover:before代替.

[1] PS:千万注意CSS样式在 a:before 和 a:hover:before的区别?
A. 把样式写在 a:before表示,当前a标签前面影分身要表现出一个什么样的元素 ,
B. 把样式写在 a:hover:before表示 , 当前a标签影分身已经表现出元素的基础上,需要点击时再去表现别的样式.

C.如果上述本应该写在a:before部分或者全部样式,却写在了a:hover:before上则出大乌龙:
则是指当触发a整体的hover镜像时才会显示a:before的样式出来,

如下图:
乌龙1:(部分li:before只有1,而当点击li时,才弹出之前写好的图标样式)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fo2zdF3G-1620071290844)(C:\Users\tuyue\AppData\Local\Temp\1613488487062.png)]

**乌龙2:**全部a:before的东西都写在了a:hover:before上则出大乌龙
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FhMzbd5G-1620071290846)(C:\Users\tuyue\AppData\Local\Temp\1613488623852.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yprkQ9eC-1620071290848)(C:\Users\tuyue\AppData\Local\Temp\1613488736515.png)]

乌龙3: 这里就是因为a:before 和 a:hover:before不统一 ,一个是a:hover:before,一个是li:before,因此各走各的,分道扬镳了
当点击a时,才会弹出下面a:hover:before的图标样式了.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VNbbaNRz-1620071290849)(C:\Users\tuyue\AppData\Local\Temp\1613488971219.png)]

乌龙4: 这里完全各写各的,a:before 和 li:before不统一了. 各表现各的影分身了.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlwmxywl-1620071290851)(C:\Users\tuyue\AppData\Local\Temp\1613489305068.png)]

正确写法:两种,写好后再单独给a:hover变色即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJ7kyTF2-1620071290856)(C:\Users\tuyue\AppData\Local\Temp\1613489592014.png)]

正确案例 a:before 和 a:hover:before怎么用:
当 a:before都写好都写对的基础上,然后再去a:hover:before触发样式,不要乌龙
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uS0u8yCn-1620071290859)(C:\Users\tuyue\AppData\Local\Temp\1613491048863.png)]

15.*和body有什么区别

一.在介绍它们两个我们首先应该知道这两个符号在CSS文件中充当的是什么角色。
①在CSS文件中()是通配符选择器，它可以选择文档中所有的元素给样式，也就是说是一个通杀选择器。
②body是一个普通的标签选择器，只能够选中body这么一个元素给样式(只是body父亲中的可以继承样式让底下所有子元素去得到继承重写 , 类似JAVA子类方法可以继承重写父类的方法)。
③而之所大家会感觉到*和body选择器有时候作用是相同的，主要是因为body几乎是全部布局元素的父元素，如果元素的CSS样式,比如宽高,文本等居有继承性的话，那么两者的效果确实一样。例如:


body{font-size:12px;}  通过继承性,给把body的样式继承给下面的子元素
*{font-szie:12px;}  通杀所有元素包括body统统,同一样式

二.以上两个代码的作用是完全一样的，因为font-size样式是具有继承性的。可以从body去继承给全部body下面的子元素,但是大家还是要明白它们的原理是不一样的，
1.*选择器确实是选择了每一个元素并且把它们的字体大小设置为12px
2.而body则是通过继承将字体设置为12px的。(有继承性的同时要注意优先级,如果在body设置也会有隐患,有些CSS样式是自身具有默认样式的,比如a标签的颜色,则从body继承过来的样式优先级会为变为0,没有自身默认优先级高…)

三.在很多CSS页面的开头都要写这么一句代码:

*{
  margin:0;
  padding:0
}

因为很多元素都有自身默认的内边距或者外边距，例如body、ul、p和标题元素h1-h6等。

使用以上代码可以很轻松的清除所有元素的外边距和内边距，但是*通配符也会带来问题。


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
input{height:40px;}
</style>
</head>
<body>
<input type="text" name="mytest" />
</body>
</html>

以上代码可能会造成在一些浏览器中文本框输入的文字显示在左上角。

15.html,body高度height:100%的作用:实现windowview全屏效果

(浏览器没有默认的高度默认根据内容因此百分比写高度,要一直继承才能实现,而浏览器有默认宽度为整行,因此百分比高度不用一直继承上去)

范围 : window view > html > body > 子块级元素

html,body{ 
  height:100%;
}

一.下面就介绍一下代码的作用是什么。

①为什么要设置高度:

因为html,body等块级盒子不像宽度只要是块元素就可以独占整行,即也是windowview的宽度,他们的高度在没有具体设置px的情况下 , 是由盒子内容撑高的,因此这么写是为了得到windowview整个页面的总高度,因为window view是实打实的整个可视页面窗口,宽高都是满屏的天神级别!!!)

②百分比高度的含义:

写在标准模式下，也就是网页头部写DOCTYPE的时候，因为body不是html页面的根元素，html才是根元素，html才是最原始继承了window view窗口即整个页面真正总宽度,因此要先给html:100%继承window view的页面总宽度,再继续传递给body继承html的总宽度 , 然后再让其他子元素会继承body的从html继承下来的宽度,

③因此如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效，

因为以百分比设置元素的尺寸，必要以父元素的尺寸样式作为参考，如果html父元素没有设置尺寸样式或继承尺寸百分比，也自然不会生效。

④代码实例1:(以下代码不会生效,因为body{height:100%}是错误写法)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F4ukNvDE-1620071290862)(C:\Users\tuyue\AppData\Local\Temp\1613554028560.png)]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body{height:100%} /*这里代码是失效的*/
div{
  width:100px;
  height:50%;
  margin:0px auto;
  background:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

解决方法: 在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是导致div的百分比高度无效，因此要把html也写上继承window的100%和body继承html的100%,一步一步继承下去最终子元素div才会继承父级body的尺寸去生效

html,body{height:100%}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SFx4l5tF-1620071290864)(C:\Users\tuyue\AppData\Local\Temp\1613554145217.png)]

2.代码示例2(可以全屏整个windowview页面):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EHV7dPAE-1620071290867)(C:\Users\tuyue\AppData\Local\Temp\1612544858076.png)]

3代码示例3.还有一种绝对定位实现满屏windowview效果:
(原理:绝对定位元素的宽度高度如果设置为百分数100% 则是继承定位父级的宽高来的而不是继承结构父级来的)但是元素使用绝对定位以后，完全可以不用上述的代码就可以实现全屏，并且兼容性更好，尤其是在移动端，起码当前是如此。
代码实例如下:
(这里就算写了body{height:100%}也一样生效,因为压根没用到这个CSS,因为绝对定位在没有没有定位父级时,是相对于window view,即整个页面宽高度,因为直接用了,都不用一步一步继承了.[如果不用absolute则高度相对于结构父级body来说则会失效])
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hAABo8l-1620071290868)(C:\Users\tuyue\AppData\Local\Temp\1613554273211.png)]

/*全屏实现方法二:,兼容性好,推荐absolute方法*/
/*因为绝对定位在没有定位父级时,是相对于window view,即整个页面宽度,因此*/
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
body{
  margin:0px;
  overflow:hidden;
}
#box {
  background:#ccc;
  height:100%;
  width:100%;
  position:absolute; 
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

上述代码可以将div元素设置为全屏效果。

15.html、body、document、window的区别

window view(100%全屏什么都没) > html (有自身默认外边距) > body(也有有自身默认外边距) > 子块级元素



html是一门超文本标记语言；

document对象代表整个html文档,可用来访问页面中的所有元素；

body代表document的主体子对象，除浏览器头部，页面中能够看到的内容都属于body中的内容；

window代表浏览器中打开的窗口，代表运行环境。

在javascript中：

window对象是一个虚拟的对象，浏览器在打开HTML文档时生成window对象，可以把它看作是你所使用的浏览器的窗口，其地位很高，因为它是浏览器脚本引擎中的globalobject。可以用window对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。如果文档定义一组帧，则浏览器对原文档生成一个window对象，并对每个帧生成window对象。（关于globalobject，可以从javascript脚本引擎的概念中了解到。）

BOM的核心对象是window，它表示一个实例。在浏览器中，window对象有双重角色，它既是通过js访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，它意味着在网页中定义的任何一个对象、变量和函数，都是以window作为其Global对象，因此有权访问isNaN()、isFinite()、parseInt()等方法。

html元素对象和document对象和document元素对象都是不同的：

document对象是一个跟当前文档相关的对象，拥有一些操作文档内容的功能，其功能上跟window对象差不多，因为window拥有一些操作浏览器窗口的功能。但是document对象地位没有window对象高，window拥有其他所有根对象的引用，包括browser、navigator、location等等。html元素对象和document元素对象是属于html文档的dom对象，可以认为就是html源代码中那些标签所化成的对象。他们跟div select什么对象没有根本区别。

*能规定所有元素标签的样式 Body只代表<body>标签的样式 *包含body *一般规定CSS中大家都需要的 像{margin:0 padding:0} 而body一般规定{font}

16.float细节注意点:(学了浮动尽量少用inline-block)

一.浮动和一定的功能区分: (父和子元素的浮动都是对当前自己生效的,而给父元素设置flex相反,是对子元素生效)
①float浮动常用于父盒子左右结构布局和浮动后的父盒子下多个文本子元素再次套娃浮动去一行显示[一行显示时才和inlin-block是一样作用的]
（因为浮动还是有自己统一的流层，因此多个子盒子使用浮动也是会一起在并排在父盒子左上角/或者限制父盒子宽度就会换行显示，总之多个子盒子是不会完全各走各的，不能随意移动:
[1]要不就是一些去右一些去右[常用于给父盒子float页面左右架构布局]
[2]要不就是统一往左或统一往右走[常用于给子盒子float,此时作用仅为了一行显示,=inline-block]，

②扩展:而定位常用“子绝父相”方式去精准移动
[1]绝对定位用于子盒子随便移动，多个子盒子使用绝对定位则会脱标全部散架，全部都集中在定位父级左上角,然后会各走各的新页面流层，（定位父级可以选择在一条父辈上即可，因此定位范围可以很广）

[2]而相对定位常用于父盒子在上一级盒子中随便移动（定位范围不广），但是不脱标，因此保证父级元素在整个页面不会散架，保持整体架构性，然后在标准流内的父级的结构父级盒子上随便移动）

二.float浮动和position绝对和固定定位都会使"任何类型元素"变为block块级元素

三.float浮动可以连续套娃浮动, 比如父亲盒子可以在爷爷盒子先左右浮动完 , 然后多个子盒子再次可以在父盒子内再次浮动,一行去显示 .

但要注意:

①用完浮动要去各自的父级盒子去clearfix清除浮动,比如父盒子要去爷爷盒子清除浮动,子盒子要去父亲盒子去清除浮动
②多个盒子同时浮动时,left和right左右也要注意顺序
③下图就用了三次浮动,logo和多个li的a链接导航各自先左右浮动,然后多个li的a链接导航再次套娃左浮动就能一行显示了.
(前两次是为了浮动左右布局,第三次是为了多个盒子浮动一行显示)
在这里插入图片描述

三.浮动元素之间一般是一行显示的,一个左一个右,但是也可以换行显示的,就是限制父容器的宽度即可挤下去分行显示,但注意:这和float浮动流元素和标准文档流元素分开换行显示有很大区别的!!! (一个是宽度限制,一个是高度塌陷了,下面讲)

四.float清除浮动:就为了能让float浮动流元素和标准文档流元素可以分开换行显示，不让文档流鸠占鹊巢进位,即不让自身容器高度塌陷(让浮动流被文档流进位) 和父级容器高度塌陷被占位
(因此盒子使用完浮动之后,一定要去他们的父级容器上清除浮动,不让父级容器塌陷即可)

解决①不让父盒子容器高度塌陷: 前提是:多个浮动流蓝盒子和红文档流盒子不在同一个父级容器(实际开发最常用,因为文档流和浮动流一般都是分开父级盒子的 ) , 那么这样就可以多个span浮动流盒子的父容器加个clearfix类,就能清除span多个蓝盒子的父容器高度塌陷问题即可了, 让父容器能检测出span子盒子们在文档流的高度,从而不让下面的红盒子文档流进位.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kkMIN4Kl-1620071290874)(C:\Users\tuyue\AppData\Local\Temp\1612177392005.png)]

解决②不让sapn自身盒子容器高度塌陷:(很少用,第一种最常用)
前提:多个浮动蓝盒子和红盒子在同一个父级容器也行(但一般是分开父级容器的,很少见) , 把cleafix或者clear清除浮动div插入在浮动流盒子和文档流之间 , 就可以解决了蓝盒子自身高度塌陷问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lt9vPexU-1620071290877)(C:\Users\tuyue\AppData\Local\Temp\1612674128565.png)]

五.①float浮动可以和relative相对定位完美搭配(因为都在结构父级的盒子里移动),
②而absolute绝对定位会忽略float浮动,让浮动失效.
因此布局过程: div父盒子+CSS+浮动布局[header+banner+main(内部版心盒子)+footer] = 外部布局架构好 — 前面div父级盒子再使用相对定位在其结构父级中相对于自身左上角都精准移动好------然后外部相对定位的div父盒子移动好后,保证整体结构不散架后, 里面再去new一个子盒子使用绝对定位元素再把前面的相对定位父盒子作为定位父级,然后再把子盒子去再定位父级盒子中去精准移动好

六.float浮动之后的块元素如果宽度没有规定,则宽度会根据内容auto自适应,不会再借用父级的宽度:

如果是块级元素，在默认状态下，如果没有规定宽度，那么会占满父元素。代码实例如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EuQb744d-1620071290878)(C:\Users\tuyue\AppData\Local\Temp\1612671448938.png)]

上图子div并没有设置宽度，它会填满整个div的宽度，如果是浮动元素，就不是这样。 代码实例如下:
下图中,div红盒子本来是占满整个父级绿盒子宽度的,但是浮动之后就自适应宽度了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w22cbVKu-1620071290879)(C:\Users\tuyue\AppData\Local\Temp\1612671558171.png)]

下图中,p红盒子没有宽度,默认是占满父级浏览器整行的,但是浮动之后就自适应宽度了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ge5XTRby-1620071290880)(C:\Users\tuyue\AppData\Local\Temp\1612171354489.png)]

因此如果设置了浮动，那么元素的宽度就会根据内容进行auto自适应。

七.升级理解自适应宽度可以套娃:浮动让nav父盒子就会间接根据子盒子的文本来自适应宽度.

①如果在nav父盒子设置了宽度,则全部li左浮动后就会真的在nav盒子的最左侧一行显示,右浮动就会在最右侧显示,这明显不是我们想要的,因为会浪费很多空间. (后续但注意下面让li即套a导航去使用padding或margin隔开左右位置,此时是不会增大父盒子宽度的)
在这里插入图片描述

②因此不要给上述这种情况的浮动父盒子去设置宽度,因为如果nav父盒子没有宽度,则浮动的父盒子宽度会根据子盒子的宽度自适应,而子盒子也是根据文本宽度自适应,层层套娃,让nav父盒子就会间接根据子盒子的文本来自适应宽度.像下图就是符合正常布局的架构.(这样子盒子文本直接可以左浮动即可,右浮动的话字体会倒序写不好)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AT0bT49h-1620071290885)(C:\Users\tuyue\AppData\Local\Temp\1612771157318.png)]

③给父盒子设置宽度其实也行的,但要精准量而已,量一下父盒子宽度:(看看要不要左右各留出一点出来,可以看内部子元素的padding来考虑)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ChWmzJSF-1620071290886)(C:\Users\tuyue\AppData\Local\Temp\1613578029907.png)]

17. padding调整无边框盒子到其他盒子距离: (尽量不要滥用margin调整盒子之间的间距了 ,不行!)

(前提盒子也分:有边框的如div盒子和没有边框的例如文本p盒子)
(以后 , 看到padding,即可以充当有边框的如div盒子内部的肌肉,也可以充当外边距margin来扩大没有边框的例如文本p盒子到其他盒子之间的距离)

①尽量使用padding去调整没有边框的盒子比如单行文本盒子之间和多行段落盒子之间左右或者上下的距离(因为没有bor的时候,细品一下,margin和padding都是可以扩大盒子距离的,padding充当margin)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JiVB7Y1p-1620071290889)(C:\Users\tuyue\AppData\Local\Temp\1612787460992.png)]

②行高line-height也别忘了,也可以调整文本段落或者文本上下之间的距离,但注意计算,盒子行高的上下距离都是对称的

(很多时候没有边框的多行文本段都是让line-height+padding组成该文本盒子和其他盒子之间的距离)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fLYSBRb7-1620071290890)(C:\Users\tuyue\AppData\Local\Temp\1612789078348.png)]

③(margin结构性差而且容易出穿透和合并现象,但是有border边框的盒子之间的距离必须只能margin了,但是最好全部统一一个方向加margin,否则很容易合并和反推,此时padding无法充当margin了,细品)

④padding的使用注意:

下面padding-top:48px,用来调整没有边框文本子盒子和父盒子之间的距离.
下面padding:0 40px,用来调整子没有边框文本盒子和文本子盒子之间的距离
(注意:如果用padding调整没有边框的文本盒子和文本盒子之间的距离,也是要准守margin规则,比如子盒子padding遇到父盒子一样会反推,然后反推如果padding太大会反推撑出去父盒子外面或者换行)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X97UudKO-1620071290892)(C:\Users\tuyue\AppData\Local\Temp\1612721077464.png)]

一.正常模式下设置了宽度的子盒子的padding,左右各40px的内边距,不会影响到原始盒子的宽度和文本内容, padding+原始宽度=子盒子总宽度一旦大于父盒子总宽度则会撑大出去. (ps:注意这里的文字向下挤是正常的在宽度内一排一排,去排列文字的)

在这里插入图片描述

二.正常模式下,没有设置宽度的子盒子的padding,左右各40px的内边距,这时粉色盒子是借用了父级盒子宽度,此时子盒子原始宽度已经==父盒子总宽度,因此子盒子加padding不会往外撑大父盒子, 反而欺软怕硬,欺原始宽度怕父亲宽度, 一旦加padding则会往内挤盒子的原始宽度,直到文字全部往下没有生存空间了.
在这里插入图片描述

四.float浮动是特殊情况 : 每个li盒子他虽然没设置宽度,但是全部左浮动一行显示之后,每个li宽度会随着内容自适应宽度,即不是借用父盒子宽度了,因此:

①浮动起来后的元素在没有设置宽高的情况下,宽度和高度都是可以随着内容而自适应展开,无敌牛皮哄哄的.
②**因此它是像上面第一个正常模式下的有宽度的padding那样,不会挤自身子盒子的文本内容,而是子盒子的padding会扩大子盒子自身原始宽度 **
③注意: (因为下面父盒子是使用右浮动的,padding所以不是像原来的标准文档流下去从左往右挤出去了,而是右边封死往左挤出去了)
然后一直paading增大会把原始子盒子(即没有padding)的自己原始宽度往左挤出去,然后超过父盒子宽度就会换行.

在这里插入图片描述

PS:这里要注意一个小细节: (发生换行现象,多发生在浮动/行内块之后的各个块元素宽度大于总宽度的时候)
因为绿色nav父盒子是右浮动的,因此宽高没有设置也是随着内容宽高,即里面多个li盒子的自适应总宽度高度而进一步套娃继续也来决定绿色nav的宽高的,因此此时问题就来了 , 当nav绿盒子的宽度,(即也是全部li盒子的总宽度)一旦大于nav父盒子的结构父级盒子剩余宽度限制[这里nav的结构父级设置了确切1222px宽度]时如下图(有图片占了部分nav父盒子的结构父级盒子宽度时),就会不能一行容下,就会整个nav父盒子往换行显示.

在这里插入图片描述

三.总结:1.子盒子有具体宽度或者浮动自适应宽度时 , 给子盒子加padding就是正常的扩大子盒子自身总宽度:=原始宽度+padding,直到padding会把子盒子默认是往右去撑出去父盒子的**



2.子盒子没有具体宽度而是借用父盒子宽度时,给子盒子加padding就是不正常的缩小子盒子自身的宽度:=原始宽度(也是父盒子宽度) - padding ,直到减到把子盒子自身宽度减没,然后子盒子没有生存空间了,才不会欺软怕硬,padding才会挤出去父盒子外面. 

1. [1]遇到无法在同一行下去只能换行的现象通常都是发生在使用了float浮动和inline-block的场景,
   [2]而正常使用padding是会反推出去撑爆撑出去父盒子的.
   [3]而在行内块或者浮动中 + 联合使用padding,优先发生的是行内换行的现象发生.

12.脱标和不脱标下的Margin另外注意点:

1.注意正常模式下的:margin的反推,合并,叠加,穿透现象.

2.margin外边距在绝对定位元素上不会出现外边距穿透:(但是浮动和定位都会保留自身外边距margin一起移动这点是不变的)**

3.注意1:正常情况下,margin外边距是指一个盒子推开另一个盒子xPX,然后形成盒子与盒子之间的距离.
(margin-X: px外边距为正数时则可以把其他盒子往X方向外推,为负数时则可以把其他盒子向X方法往自身靠拢[邪道写法])

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5aQpIzT2-1620071290913)(C:\Users\tuyue\AppData\Local\Temp\1612103317431.png)]

注意2:如果没有设置父盒子总宽高度时,盒子之间的margin可以随便上下推,最终会增高父盒子的高度.如上图

注意3:但是子盒子一旦设置了总宽高度，margin就不会增加父盒子的宽高, 因为：子盒子永远推不动父盒子的墙壁
这样就会有可能导致使用:margin失效,如下图的margin-bottom:30px像素就失效了
为什么失效呢?(看注意4)

注意4:①一个子盒子如果经历过父盒子反推现象,如下面的红盒子被父盒子反推20px,则该子盒子就会变成和父盒子一样的特性,也不可被推了,也只能反推其他盒子
②因此第二个蓝盒子想margin向上推10px,结果只能被红盒子反推后退回10px,此时蓝盒子也经历了反推现象,就会变得也不可推了,只能去反推其他盒子.
③就在此时,棕盒子想要往下margin推30px,结果发现父盒子设置了总height高度,等于建立了一道铜墙铁壁不能往下推了,结果只能被margin反推会30px,但是反推的时候发现上面的蓝色盒子经历过反推现象,因此也是不可推的
结果就是导致两边都是不可推,就会两头碰壁,此时棕色margin不管是往上还是往下推都会失效!!!

注意5:总结: ①:盒子不会连推,不会影响到相邻一个的其他盒子
②:子盒子一旦经过父盒子或其他同级盒子反推现象后也会变得不可被推(只能被反推它的渣男盒
子继续推它)

③:因此最好的办法就是,不要给父容器盒子设置总高度,让其高度随着内容撑大而撑大自己
这样就能避免子盒子的margin历经过反推后也不可反推,万一总高限制就可能出现盒子上下两边
(一边父盒子墙壁,一边子盒子经历过反推) 都不可推,最终导致margin上下会失效

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uE5Mk6Z-1620071290914)(C:\Users\tuyue\AppData\Local\Temp\1612104114992.png)]

二.大总结: 脱标和不脱标的margin规则

1.float浮动和全部position定位和标准流元素全部都会保留自身margin外边距一起移动

2.但是对于margin的规则会不一样:
①标准流元素通吃: margin外边距全都会有: 反推,穿透,合并, 叠加情况
②float浮动元素和position绝对定位:脱标了不会有margin垂直合并效果:
(技巧:BFC脱标的水平和垂直margin全是叠加,不合并)
③float浮动和position绝对定位,脱标了不会有margin外边距穿透的效果
(技巧:BFC脱标的子遇到父全是反推,不穿透).

④扩展特殊的:float浮动和 relative相对定位和static静态定位和标准流, 不会忽略父盒子padding都是只在父盒子的padding内移动的, 而绝对定位会忽略定位父级盒子的padding直接去左上角.(因此要注意!!!父盒子的padding是不是用来扩大和其他盒子的距离,如果是,只能改用margin来,否则位移时出现位置错误情况)

下图限制父容器宽度来换行显示时,就可以则出margin垂直不合并了[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r4SNBVUM-1620071290917)(C:\Users\tuyue\AppData\Local\Temp\1612670084563.png)]但是，我们也可以手动自己停止外边距现象（让相对和静态变得和绝对定位一样）。

自然就是可以为父元素定义1像素的上边框或上内边距,这样就不会穿透,就是变回反推现象了(让父盒子不被忽略)。
可以为父元素添加overflow:hidden 或者使用 clearfix类通用公式 (让真正父盒子高度不被忽略) 。
外边距在绝对定位元素上不会出现外边距穿透,因此可以在当前元素设置绝对定位属性,但要小心他会飘起来去相对于定位父级元素对齐.((不推荐)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f5Zt0KdZ-1620071290918)(C:\Users\tuyue\AppData\Local\Temp\1612622733279.png)]

19.绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案

(目前唯一解决方法:只能提前给结构父盒子设置好宽高,然后绝对定位脱标之后可以飞去绝对定位父级那里位移)

我一直很困惑绝对定位后父盒子的高度会变为0，如何让绝对定位的元素撑开父盒子呢？

我在StackOverflow上找到的高分解决方案如下：

Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.

If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.

Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.

翻译：
绝对定位的元素完全从文档流当中移走，所以他们的尺寸无法影响到父元素的尺寸。
如果你真的想实现绝对定位还能撑开父元素，只能通过JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。
或者，用 float: left / float:right 还有 margin 来调整位置，子元素再通过父元素设置的overflow:hidden来撑开父元素。

20.各种元素之间怎么换行和一行

一.元素一行显示:
inline-block或者float浮动(使用完记得清除浮动,避免父容器高度塌陷,让浮动流元素和下面标准流元素可以换行显示)

二.元素换行显示: 1.多个标准流行内元素之间想换行,则加相邻中间插入块元素在就是换行的显示的
2多个标准流的块元素之间本身就是换行显示的,不用调整…
3.如果是多个浮动的块元素之间(浮动和绝对定位都让元素变为块级元素):
**(这里要复习浮动一些基础:
A.文档流可以进位浮动流,浮动流不能进位文档流
B.为什么要清除浮动?
[1]本质:解决浮动自身高度塌陷和父级元素因为子级浮动也引起内部高度塌陷问题
[2]原理:由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生
影响即文档流会进位浮动流，为了解决这些问题，此时就需要在该元素中清除浮动(让浮动
流和下面的标准流可以像正常的标准流一样去换行显示)
①在同一父盒子下,则可以在想要换行的浮动流元素之间插入一个div标签,然后给div加clear样式
清除浮动即可,不加clear样式无法换行,因为div自身也是文档流,虽然没设置宽高看不见,但也是会跟
一起进位的,而加了clear就能去帮你计算高度,让浮动流的自身高度可以计算出来不塌陷.无法被进位
通过解决自身高度塌陷 , 实质不让其他浮动流一行并肩和文档流元素进位.只能换行.

②不在同一父盒子下,则直接在浮动元素的父容器加一个clearfix或者overflow:hidden或者div的clear
样式即可,清除了浮动,解决了父容器高度塌陷 , 实质就让元素之间只能换行显示, 不被上位

③限制多个浮动元素的父盒子总宽度,也会被迫下一换行显示(这个看需求,很少用)

4.浮动流元素和标准流元素之间换行显示:
[1]如果是浮动流元素在前,标准流元素在后则看: 看第3点的①②,也是一样的
[2]如果标准流流元素在前,浮动流元素在后则:不需要调整,因为浮动流本身就无法进位标准流的
标前浮后,之间就是换行显示的.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L95qMtCS-1620071290920)(C:\Users\tuyue\AppData\Local\Temp\1612852106411.png)]

21.如何统做井字边框 :统一截取法:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sQIIHIvU-1620071290922)(C:\Users\tuyue\AppData\Local\Temp\1613460091835.png)]

( /* 截取法 */

/* 第一种写法:先自己看,只写右下边框,最后统一取消最右和最下的全部边框即可 */

/* 第二种:写全边框也行,但是边框会紧贴着变粗,需要重叠加margin负值 */

/* 第三种,真想写全边框,也可以不用真写边框全方向属性,也可以先只写右下边框,

最后去全部li盒子的大父级盒子统一加大的左和上外边框,这样不用处理边框重合紧贴事件 */)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rsvI9tux-1620071290925)(C:\Users\tuyue\AppData\Local\Temp\1612942443260.png)]
有人问:为什么要给media盒子里面还要加一个wrap盒子呢???,为什么不直接wrap写ul>li呢
这说明.media盒子里面不止一样东西,就media里面除了wrap还有别的比如title,des等内容,因此又要套media一个来
装全部东西.

那又有人问,为什么不直接用ul来呢呢?为什么还要还要加父盒子wrap且比子盒子ul小,因为wrap就是用来加overflow:hidden去截掉多余有边框的,也可以用media截取,但是没那截取没那么标准而已.

上面这里: media > title+ wrap > ul >全部li盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W9nCE8df-1620071290927)(C:\Users\tuyue\AppData\Local\Temp\1612929580624.png)]

变为黄色盒子比粉红父盒子版心还长,默认标准流是会从粉红版心左侧开始挤出去,因此黄色盒子使用relative,加负值.然后从右边边挤回来去居中,看下图
在这里插入图片描述

原始没改没对齐的,版心meida爷爷1054px蓝盒子(title+wrap+ul+li):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W1bPdicU-1620071290933)(C:\Users\tuyue\AppData\Local\Temp\1612936854532.png)]

wrap爸爸1106px红盒子(ul+li):[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJds0IwF-1620071290935)(C:\Users\tuyue\AppData\Local\Temp\1612932568057.png)]

ul儿子1180px绿盒子(ul=全部li):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f1oY0n9A-1620071290938)(C:\Users\tuyue\AppData\Local\Temp\1612932543583.png)]

总图:media蓝+wrap红+ul绿=全部li绿

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-slpo2O66-1620071290940)(C:\Users\tuyue\AppData\Local\Temp\1612931486343.png)]

下面为正常模式的盒子居中: (这里的关系结构: media爷爷 > title+ wrap爸爸 > ul儿子 >全部li盒子孙子)
正常居中是:爷爷最宽>爸爸宽>儿子宽

但宽度下面非正常居中是: 爷爷media宽 < 爸爸wrap宽 <儿子ul最宽 (这么做为了能实现截取法)

蓝色:是不动的爷爷级别版心1054px,然后红色是:wrap父盒子为1108px ,绿色是:ul整体子盒子为1180px
(按照标准文档流下,红色和绿色盒子比蓝色版心盒子长,则会像上图一样是紧贴最左侧开始一直到右边挤出去版心盒子

那么这时问题来了,有没有发现上面的第三列淘宝网那个图片时没有对齐上面的合作媒体文字(该文字是在media爷爷盒子1054px中部的)的,就是因为ul绿盒子长度超过版心太右边了,此时就要把绿色盒子设置为relative,然后往左left:负值,此时问题又来了,ul的结构父级此时是wrap,(然后此时这里又必须带上wrap因为要overflow裁剪掉多余边框,如果不是可以直接ul对齐media的,难受了),因此暂时无法直接对齐爷爷的蓝色版心中部,因此不能直接让绿色盒子对齐蓝色版心的,而如果父级盒子使用绝对定位,很容易造成父级容器高度塌陷,且absolute塌陷无法用CSS解决的)

因此有一个特点我们必须了解:父盒子如果去相对定位移动,是会带上内部子盒子一起的,比如wrap红父盒子在蓝色版心去移动,那么是会带上ul子绿盒子一起往左移动的,

因此能让绿ul带上wrap红父盒子一起居中对齐meida爷爷蓝盒子的总步骤:
①要先让wrap红父盒子先使用相对定位,带着ul绿盒子在爷爷版心往左移动,让父亲wrap先相对于爷爷蓝色版心先去已经移动到居中到爷爷版心的情况下.
②接着再让ul子盒子再使用相对定位,相对于已经在爷爷版心居中的wrap红盒子里,再往左移动,移动到
居中红色父盒子,这样移动即可让ul绿子盒子,间接是在爷爷蓝色版心盒子居中了.
③这就是使用相对定位的妙处秒啊啊啊!!!,不能像绝对定位让绿盒子直接跳去爷爷盒子去移动那样,但是可以
使用相对定位,分两次实现让子盒子间接在爷爷盒子中移动.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uWYv6KwD-1620071290942)(C:\Users\tuyue\AppData\Local\Temp\1612933083031.png)]

④上图总效果:(除非不要这层wrap盒子就可以让ul去relative把media直接充当结构父级,直接左一次性左移动:1150-1054=96/2=48px即可,但如果ul和meida中间嵌套了一层wrap盒子就没办法了,只能分两次去相对定位移动,让ul子盒子间接对齐爷爷盒子. 一次22px +一次26px=48px)

⑤细节:解疑惑如何统一截取调右边框(hidden位置很重要)?
(为什么不让media爷爷直接hidden截掉红wrap儿子呢?而让wrap去截掉绿色ul儿子的多余部分呢?)
因为:其实也可以的,只是media盒子为1054,而中心即放全部图片的wrap盒子宽却是1106,截掉下面红色圈圈部分就没这么长里面,而用让1106红wrap去截掉绿色1150 ul儿子就可以保留1106比 1054 多出来的部分即下面红色虚线了.(很妙)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LMB499qV-1620071290946)(C:\Users\tuyue\AppData\Local\Temp\1613459119409.png)]

(⑥细节:解疑惑如何截取底部边框?
正常都是ul高度不设置的,默认由全部li的高度去撑大的,但最后下面却不让ul=li , 让子li的总高度 > 父ul的总高度1px,就是为了借此来隐藏li子文本的超出多的底部总边框,仔细品下面的图的解释,好好看,终生受益!!!)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eWXYrppn-1620071290948)(C:\Users\tuyue\AppData\Local\Temp\1612941831831.png)]

21.蒙板mask盒子总结

前提:①(如果是蒙板覆盖的是img图则必须和absolute绝对一起用哦,否则被img挤下去)

(如果是蒙板覆盖的是bc背景图则可以不用absolute绝对一起用哦,不会被挤下去)

②切记hover用法不能写错: 是给当前蒙板的父盒子盒子box 加hover , 然后下面的.mask 这样 .
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NUMZqKFj-1620071290954)(C:\Users\tuyue\AppData\Local\Temp\1614233350438.png)]

③mask蒙板宽度/高度通常都是一起:100% ,或者只要宽度100%, 然后高度根据内容撑开,然后绝对定位自己定

④蒙板颜色通常是: (具体透明多少自己调整)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1VAPYK4U-1620071290956)(C:\Users\tuyue\AppData\Local\Temp\1614608354700.png)]

④注意蒙板mask盒子的结构: 下面两个案例蒙板都是套着内容的 +

这个是常规的整个mask去display:none的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fMOpFShU-1620071290958)(C:\Users\tuyue\AppData\Local\Temp\1614609156225.png)]

这种比较特殊:只是mask下的a标签去display:none的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nhZo6O74-1620071290960)(C:\Users\tuyue\AppData\Local\Temp\1614616504616.png)]

第一种: scale(0) +transition -------> scale(1) +中心向四周扩散的蒙板盒子

注意1:支持transition一起联用, 且transition可以写在两头, 很特殊

写在消失的scale(0)代表显示和不显示都会延迟x秒,两头生效

写在显示的scale(1)时,只代表显示会延迟x秒,然后立马消失.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-87Orjnj3-1620071290962)(C:\Users\tuyue\AppData\Local\Temp\1614233730103.png)]

第二种:display:none + display:block =让盒子显示

注意1:不支持transition一起联用,只会立马显示和立马消失

注意2:这种display:none可能会和diplay:flex冲突 ,因此注意!!!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j32TdkBN-1620071290965)(C:\Users\tuyue\AppData\Local\Temp\1613797034526.png)]

第三种. visibility:hidden + transition ----- visibility:visible (效果和display:none类似,只是可以配合transition)

支持transition一起联用, 且transition可以写在两头, 很特殊:

写在消失的 visibility:hidden代表显示和不显示都会延迟x秒,两头生效

写在显示的visibility:visible ,只代表显示会延迟x秒,然后立马消失.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xGTvxnoi-1620071290968)(C:\Users\tuyue\AppData\Local\Temp\9922f76d-9122-490b-9a06-bb546df259ff.gif)]

22.display:inline-block; text-indent:-9999em;同时使用，IE7隐藏元素本身的解决方法

display:inline-block; text-indent:-9999em;同时使用，IE7隐藏元素本身的解决方法

示例：

第一种解决方法：

a{width:100px; 

height:36px;

display:inline-block; 

text-indent:-9999em;

text-indent:0!important;

text-indent:-5px;

*font-size:0; 

*line-height:0;}

text-indent:0!important;text-indent:-5px; 前者对ie7有效，后者对ie6有效，

*font-size:0; *line-height:0; 使ie7、6能达到 text-indent:-9999em;隐藏文字的同样效果

第二种解决方法：

a{width:100px; height:36px;display:inline-block; line-height:200px; overflow:hidden;}

设置line-height:200px; 使元素内文字在定义的height外显示，再使用overflow使超过height部分隐藏，从而达到隐藏文字的效果！此种方法，无兼容问题，不用写hacker，推荐！！

23.如何用CSS实现中间自适应，两边定宽三栏布局

以下是自己研究的：

自适应布局一般只用在父级大结构那种,细节小盒子具体可以不用自适应了,
一.如何在浏览器实现拉动窗口然后等比例缩放,

方法①:即不能出现具体宽度,只能全部用宽度为百分比,然后父级是浏览器宽度即可 )
必须设置min-width 和 max-width 和真实宽度的百分比 ,可以来限定浏览器缩到哪就不自适应缩, 伸到哪就不自适应伸了.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W3qBsi43-1620071290971)(C:\Users\tuyue\AppData\Local\Temp\1613811530091.png)]

方法②当前自身盒子*不写百分比宽度也能在浏览器伸缩自适应的方法:
必须设置min-width 和 max-width 和真实宽度的百分比 ,可以来限定浏览器缩到哪就不自适应缩, 伸到哪就不自适应伸了.
(1)给当前盒的父盒子设置display:flex ,让 flex把当前盒子变为伸缩盒子,就无敌了 , 然后当前自身盒子就可以设置具体/百分比宽度/flex:1
(2) 然后下一层盒子也想设置具体宽度,则让当前盒子设置flex,让孙子盒子变为flex伸缩盒子, 无限套flex, 然后孙子盒子可以设置具体/百分比宽度了/flex:1

二.举例反例:以下盒子想写具体宽度,必须父盒子写flex,把当前盒子变为伸缩盒子,否则就用一直用百分比,不然如下就不能自适应
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dikw3BLq-1620071290973)(C:\Users\tuyue\AppData\Local\Temp\1614171636848.png)]

三.(以下三种情况,盒子都能变为自适应:)

父flex + 子百分比 = container可以在浏览器自适应
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EZ7JbM39-1620071290975)(C:\Users\tuyue\AppData\Local\Temp\1614171393390.png)]

父flex + 子具体宽 = container可以在浏览器自适应

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dUlMVAT0-1620071290976)(C:\Users\tuyue\AppData\Local\Temp\1614171459577.png)]

父无flex + 子百分比宽 = container可以在浏览器自适应
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kNxwDN5P-1620071290978)(C:\Users\tuyue\AppData\Local\Temp\1614171557157.png)]

进入正题,自适应其他方法

1.前言

用css实现“两边定宽，中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了，一般当面试者写出一种实现方法之后，面试官还会问你还有没有别的方法，尽量多的写出几种实现方法。

回到顶部

2.实现原理

要想实现这种“两边定宽，中间自适应的三栏布局”其实也不难，无外乎把握住以下几点：

要想中间自适应，那么中间的div不能设置宽度width，这样宽度就会随着浏览器窗口自适应。
由于div是块级元素，要想三个div处于同一行，那么两边的div就要脱离文档流。
CSS3的flex伸缩布局。
表格table布局。
网格布局。

回到顶部

3.具体实现

下面就按照上面所说的实现原理，列举以下几种实现方式：

3.1 浮动解决方案(这个配合BFC,经常用)

(切记开启BFC,不会和左右float的区域覆盖,否则就覆盖了)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .layout-float .right{
        float: right;
        width: 300px;
        height: 100px;
        background-color: red;
    }
    .layout-float .left{
        float: left;
        width: 300px;
        height: 100px;
        background-color: blue;
    }
    .layout-float .center{
        overflow: hidden; /*这一步开启黄盒子BFC,不会和左右float的区域覆盖,否则就覆盖了*/
        height: 300px;
        background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="layout-float">
  <div class="right"></div>
  <div class="left"></div>
  <div class="center"><h1>浮动解决方案</h1></div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-efUvp8Nu-1620071290979)(C:\Users\tuyue\AppData\Local\Temp\1614149616315.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NjlN9onH-1620071290982)(C:\Users\tuyue\AppData\Local\Temp\1614149698738.png)]

3.2 绝对定位解决方案(很少用,比较麻烦)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
       .layout-absolute .right{
            width: 300px;
            height: 100px;
            right: 0px;
            position: absolute;
            background-color: red;
        }
        .layout-absolute .left{
            width: 300px;
            height: 100px;
            left: 0px;
            position: absolute;
            background-color: blue;
        }
        .layout-absolute .center{
            left: 300px;
            right: 300px;
            height: 300px;
            position: absolute;
            background-color: yellow;
        }
  </style>
</head>
<body>
  <div class="layout-absolute">
  <div class="right"></div>
  <div class="left"></div>
  <div class="center"><h1>绝对定位解决方案</h1></div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wouzMxgV-1620071290983)(C:\Users\tuyue\AppData\Local\Temp\1614150092478.png)]

3.3 Flex伸缩布局解决方案(FFC布局一种,自带伸缩容器)

(中间能占满宽度利用左右各固定宽度,然后利用中间flex :1,把全部剩余间隙都给占满了)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
   <style>
        .layout-flex{
            display: flex;
        }
        .layout-flex .left{
            width: 300px;
            height: 100px;
            background-color: blue;
        }
        .layout-flex .center{
           flex: 1;
           height: 300px;
           background-color: yellow;
        }
        .layout-flex   .right{
            width: 300px;
            height: 100px;
            background-color: red;
        }
</style>

</head>
<body>

  <div class=" layout-flex ">
    <div class="left"></div>
    <div class="center"><h1>Flex伸缩布局解决方案</h1></div>
    <div class="right"></div>
</div>
</div>
</body>
</html>

[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ghl1urXg-1620071290985)(C:\Users\tuyue\AppData\Local\Temp\1614152299149.png)]](javascript:void(0)😉

3.4 表格布局解决方案(也是开启BFC的一种少用)

[ 复制代码 ](javascript:void(0)😉

<style>
        .layout-table .left-center-right{
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout-table .left-center-right>div{
            display: table-cell;  /*开启BFC的一种*/
        }
        .layout-table .right{
            width: 300px;
            height: 100px;
            background-color: red;
        }
        .layout-table .left{
            width: 300px;
            height: 100px;
            background-color: blue;
        }
        .layout-table .center{
            height: 100px;
            background-color: yellow;
        }
</style>
<div class="left-center-right">
    <div class="left"></div>
    <div class="center"><h1>表格布局解决方案</h1></div>
    <div class="right"></div>
</div>

3.5 网格布局解决方案(GFC布局)

[ 复制代码 ](javascript:void(0)😉

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .layout-grid.left-center-right{
        width: 100%;
        display: grid;
        grid-template-rows: 300px;
        grid-template-columns: 100px auto 100px;
    }
    .layout-grid .right{
        background-color: red;
    }
    .layout-grid .left{
        background-color: blue;
    }
    .layout-grid .center{
        background-color: yellow;
    }
  
</style>
</head>
<body>

<div class="layout-grid left-center-right">
<div class="left"></div>
<div class="center"><h1>网格布局解决方案分身乏术色份儿饭是是非非</h1></div>
<div class="right"></div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TTeHPE39-1620071290989)(C:\Users\tuyue\AppData\Local\Temp\1614151069507.png)]

4. 效果图

26.如何用CSS画三角形

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .a{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}

  </style>
</head>
<body>
  
<div class="a"></div>
</body>
</html>

2.原理(其实是一个盒子的边框实现的)

2.1 第一步

首先，先来一个div，然后给这个div加一层border，并且给上下左右border分别加上不同颜色，以便观察，代码和效果如下：

[ 复制代码 ](javascript:void(0)😉

.trangle{
　　width: 100px;
　　height: 100px;
　　border: 100px solid #000;
　　border-top-color: red;
　　border-bottom-color: yellow;
　　border-left-color: blue;
　　border-right-color: green;
}
<div class="trangle"></div>

[ 复制代码 ](javascript:void(0)😉

2.2 第二步

接着，将这个div的width变为0，我们再来看看效果。可以看到，由于div的宽度变成了0，左右两边的border“吸”在了一起，同时上下的border变成了三角形，好像快要完成了，别急，再看看第三步。

.trangle{
　　width: 0px;
　　height: 100px;
　　border: 100px solid #000;
　　border-top-color: red;
　　border-bottom-color: yellow;
　　border-left-color: blue;
　　border-right-color: green;
}
<div class="trangle"></div>

2.3 第三步

然后，再将这个div的height变为0，效果如下。我们可以看到，由于div的高度也变成了0，上下两个border也“吸”在了一起，同时上下的border也变成了三角形，到现在为止，四个三角形已经出来了

[

.trangle{
　　width: 0px;
　　height: 0px;
　　border: 100px solid #000;
　　border-top-color: red;
　　border-bottom-color: yellow;
　　border-left-color: blue;
　　border-right-color: green;
}
<div class="trangle"></div>

[ 复制代码 ](javascript:void(0)😉

2.4 第四步

最后，就看你想要哪个角啦，想要哪个角就把其余三个border设为透明即可。例如，我想要最上面的三角形，那就把下、左、右设为透明，代码和效果如下：

[

.trangle{
　　width: 0px;
　　height: 0px;
　　border: 100px solid #000;
　　border-top-color: red;
　　border-bottom-color: transparent;
　　border-left-color: transparent;
　　border-right-color: transparent;
}
<div class="trangle"></div>

[ 复制代码 ](javascript:void(0)😉

2.5 简化代码

其实，我们不需要把四个border都设置一遍，只需设置你想要画的三角形所涉及到的三条边的border即可。以上步的画最上面的三角形为例，只需设置上、左、右三条边即可，并且要上三角形，就把左右border设为透明，代码和效果如下：

.trangle{
　　width: 0px;
　　height: 0px;
　　border-top: 100px solid red;
　　border-left: 100px solid transparent;
　　border-right: 100px solid transparent;
}
<div class="trangle"></div>

3.总结

至此，以上就是画三角形的具体步骤和实现原理，再当面试官问你如何使用css画一个三角形的时候，这时候你可以很皮的问一句您想要尖尖朝哪边的三角形呢？哈哈哈哈哈哈哈哈哈

27.下拉菜单如何写

为什么我们要使用min-height和max-height样式属性？

Css min-height应用地方解释

我们有时设置一个对象盒子时候避免对象没有内容时候不能撑开，但内容多少不能确定所以又不能固定高度，这个时候我们就会需要css来设置min-height最小高度撑高对象盒子。当内容少时候最小高度能将内容显示出，如果内容多余最小高度能装下时候，对象也会再随内容增多而增高。

Css max-height最大高度应用解释
此属性很少使用，可能是为了避免内容太多将高度撑太高影响布局美化统一，这个时候我们设置最大高度限制。比如一个table tr td表格对象里装一个图片，而图片高度不确定，如果太高了不想图片撑破tr td表格，这个时候通过css max-height限制图片最大高度是有必要的。

第一种写法: (用li自适应宽度 + space-aroud分间隙 )

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQpzhrPT-1620071291010)(C:\Users\tuyue\AppData\Local\Temp\1614238745670.png)]

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>visibility</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #fafafa;
    }

    a:hover {
      color: orange;
    }

    .nav {               /* nav > nav-wrap >li */
      display: flex;   /* 为什么要套nav,就是让他占满屏颜色,顺便可以让nav-wrap居中 */
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 1));
    }

    .nav-wrap {
      display: flex;
      justify-content: space-around;  /*flex让内部li居中分间距,li不用给宽度,飘起来后自适应文本宽度  */
      align-items: center;
      min-width: 500px;
      max-width: 960px;
      width: 50%;
      height: 80px;
    }

    .nav .nav-wrap>li {
      position: relative;  /* 他会找最近的relative的li盒子左上角去定位 */
      line-height: 80px;  /* 黑色文本高度居中 */
    }

    .pull-item {
      visibility: hidden;  /* 第二个下拉菜单,让他消失先 */
      position: absolute;
      top: 79px;
      left: -22px; 
      width: 100px;
     /*  max-height: 0; */
      background-color: silver;
      opacity: .5;  /*透明度适当减半,否则下来菜单会挡住其他元素*/
      border: 1px solid #333;
      border-radius: 3px;
      text-align: center;
    /*   opacity: 0; */
      transition: .5s;
    }

    .pull-item li {     /* 菜单下面的li , 让他有行高 */
      line-height: 35px;
    }

    .pull-item a {
      color: #222;
    }

    .lev-list:hover .pull-item {  /* 第三个li 类名:hover  下面的菜单 */
      visibility: visible;
    /*   max-height: 300px; */
     /*  opacity: 1; */

    }
  </style>
</head>

<body>
  <div class="nav">
    <ul class="nav-wrap">
      <li><a href="#">首页</a></li>
      <li class="lev-list">
        <a href="#">产品</a>

        <ul class="pull-item">
          <li><a href="#">手机</a></li>
          <li class="show"><a href="#">卤肉</a></li>
          <li><a href="#">鸡蛋</a></li>
        </ul>
      </li>
      <li><a href="#">广告</a>
      </li>
      <li><a href="#">外卖</a></li>
      <li><a href="#">猪蹄子</a></li>
    </ul>
  </div>
  <a href="#"
    style="color:red;">fadsjkgldasfjhgearlk;jfgkldsfjghl;dsahgkl;fsdjghjkearlkuj;lrtmhsgl;rtdjgkelakh;ldafjugop;lsdafjghaiksdjyhlkadhgladfkjhioldakgjolkdasjkgfladfjlghjdafsoi</a>
</body>

</html>

第二种写法(用flex :1 1 auto均分宽度; + 引入了字体图标)：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NPMQUxun-1620071291012)(C:\Users\tuyue\AppData\Local\Temp\1614253002675.png)]

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>visibility</title>
  <style>
  @font-face {
  font-family: 'iconfont1';
  src: url('fonts/iconfont.eot');
  src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/iconfont.woff2') format('woff2'),
      url('fonts/iconfont.woff') format('woff'),
      url('fonts/iconfont.ttf') format('truetype'),
      url('fonts/iconfont.svg#iconfont') format('svg');
}

    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: #f1f1f1;
    }

    a:hover {
      color: orange;
    }


    .nav {
      display: flex;
      justify-content: center;
      background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 1));
    }

    .nav-wrap {
      box-sizing: border-box;
      display: flex;
      width: 960px;
      height: 80px;
      padding: 0 80px;
    }



    .nav-wrap li {
      display: flex;
      flex: 1 1 auto;   /* 这里是平均分配宽度，然后配合父 border-box怪异盒子去使用，padding再内挤两端即可 */
      justify-content: center;
      align-items: center;
      position: relative;
      line-height: 80px;  /* 垂直居中 */
      padding: 0 20px;
      cursor: pointer;
    }

    .nav-wrap li.pull-item::after {
      font-family: 'iconfont1' !important;
      content:'\e63d';  
      color: #fff;
      font-size: 22px;
      transform: translate(8px, 2px) rotate(0);  /* 自己微微调整即可 */
     
    }

    .vis-hid {
      position: absolute;
      left: 50px;  
      top: 79px;
      visibility: hidden;   /* 关键点visibility: hidden + transition */
      transition: 2s ease;
      overflow: hidden;  
      max-height: 0;
      padding: 10px;
      border: 1px solid rgba(0, 0, 0, .5);
      background-color: #fafafa;
      border-radius: 0 0 3px 3px;
     
    
    }

    .nav-wrap .vis-hid li {
      line-height: 45px;
    }

    .nav-wrap .vis-hid a {
      color: #222;
    }

    .nav-wrap .pull-item:hover .vis-hid {
      visibility: visible;
      max-height: 800px;
    }

    .nav-wrap .pull-item a:hover {
      color: orange;
    }

    /*  .nav- wrap .pull-item:hover::after {
      transform: translate(10px, 8px) rotate(180deg);
    }  */
  </style>
</head>

<body>
  <div class="nav">
    <ul class="nav-wrap">
      <li><a href="#">首页</a> </li>
      <li class="pull-item">
        <a href="#">产品 </a>
        <ul class="vis-hid">
          <li><a href="#">手机</a></li>
          <li><a href="#">宽带</a></li>
          <li><a href="#">机顶盒</a></li>
        </ul>
      </li>
      <li>
        <a href="#"> 商城</a>
      </li>
      <li>
        <a href="#">联系方式</a>
      </li>
    </ul>
  </div>

</body>

</html>