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

鄙人总结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的路径可以达到更换图片的目的，也可以移动它的位置，