HTML、CSS基础知识笔记

css hover 如果给a元素，那么只有在a里面的才能被选取，如果给外面的元素像div，ul li 这样就是在元素外部也能被选取。

---

在图片中调大小时，一般给一个width（宽）就可以了，不用给高，图片会同比例放大或缩小，使图片不会失真。

---

HTML注释：<!-- 内容 -->

---

CSS注释：/* 内容 */ （CSS的注释跟C语言是一样的）

---

CSS继承

宽、高、行高、文字大小、字体粗细、文字类型（宋体，微软雅黑等。一般给body设置，整个网站统一字体）、字体颜色、text-align等可以被继承。

背景颜色是不能被继承的。

---

小图标、logo或超大背景图片喜欢用背景图片，产品展示类的喜欢用插入图片。

如果移动背景图片的位置，需要用到background-position: 0 0;
如果移动插入图片的位置，需要用到padding或margin。

---

text-align line-height 设父调子

在父元素设置属性，调整的是子元素的内容。

注：行高是可以被继承的。

---

文字 ：中线与x基线对其，图片：底部与x基线对其

---

font-style: normal; 斜体不再斜。

---

边框border颜色默认为字体颜色

---

resize: none; 防止用户拖拽文本域textarea。

---

object-fit：里面的取值可以调整图片在盒子里的显示方式。

---

一个大盒子里面有两个大盒子，你给大盒子垂直居中，那么里面的两个小盒子会在大盒子里面居中，这是盒子居中样式的继承。

---

子元素可以继承父元素的样式(text-, font-, line- 这些元素开头的可以继承)，以及color属性。

---

后台查看元素时，只要出现划掉的情况，说明样式被重叠掉了。

---

JavaScript注释：

单行的注释：// 内容
多行的注释：/*内容*/ （跟css注释一样）
多行注释快捷键：alt + shift + a

---

获取一个网页网站的logo

https://www.baidu.com/favicon.ico
或者
https://www.baidu.com/favicon

---

浏览器标签添加logo

1.把.ico图片放到根目录下

ico这里可以在线生成http://www.bitbug.net/

2.在html页面添加

<link rel="icon" type="image/x-icon" href="__ROOT__/logo.ico" />

---

<base target="_blank" />

1. base 可以设置整体链接的打开状态
2. base 是一个单标签
3. base 写到 之间
4. 把所有的连接 都默认添加 target=“_blank”

---

background-position: center top;

这种写法一般是我们以后超大背景图片的做法。

---

text-align: center; 对行内元素和行内块元素都是有效果的。

---

css改变网页中选中的文字的背景和颜色

::selection {
   
    background-color: rgb(51,51,51);
    color: white;
}

MDN链接

---

注释的快捷键：Ctrl + / 如果取消注释也是这个操作。

---

绝对地址：在任何情况下都能找到的地址（比如：你家的详细地址）

---

相对地址：必须知道当前所在位置，才能找到（比如：我家楼上的楼上）

---

行内元素不支持直接设置宽、高。

---

不换行，单行文本溢出的字以省略号表示：

width：多少px自己决定;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

注：ellipsis : 　当对象内文本溢出时显示省略标记
助记：WTO

---

多行文本溢出隐藏：

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

---

浮动后高度塌陷处理：

  .clearfix:: before, .clearfix:: after{
   
         content: '';
         display: table;
         clear: both;
   }

   .clearfix:after {
   
      content:""; 
      display: block; 
      clear:both; 
   }

---