HTML、CSS基础知识笔记

我不是女神ヾ 2022-12-24 00:48 265阅读 0赞

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

--------------------

#### 全栈：即懂web前端，又懂web后端。 ####

--------------------

#### 在图片中调大小时，一般给一个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页面添加

--------------------

#### `<base target="_blank" />` ####

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

--------------------

#### background-position: center top; ####

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

--------------------

#### 阮一峰css grid 网格布局 ####

[http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html][http_www.ruanyifeng.com_blog_2019_03_grid-layout-tutorial.html]

--------------------

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

--------------------

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

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

--------------------

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

--------------------

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

--------------------

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

--------------------

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

--------------------

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

width：多少px自己决定;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    注：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; 
       }

--------------------

#### PS：按Alt+图片图层的眼睛就可以把PSD的图片给单独移出来。别的全都隐藏。按住Alt再点眼睛其他图片就都出来了。 ####

--------------------

#### 图片空白解决：vertical-align: bottom/top都行。 ####

--------------------

#### 去掉li和ul前边的点: ####

<ul style="list-style-type: none;"></ul>
    <li style="list-style-type: none;"></li>
    也可以写成：list-style:none;

--------------------

#### 行间距：line-height来设置。 ####

--------------------

#### table 是一个块元素，但是标签的宽度默认不是100%。 ####

--------------------

#### vertical-align: middle 垂直居中。 ####

--------------------

#### text-align: center 水平居中 ####

--------------------

#### margin: 0 auto （这个值给到box1）. ####

display: table-cell 将元素设置为单元格（这个值给box1）。然后vertical-align: middle。box1 里面的 box2水平居中。

--------------------

#### 盒子量高度时，不要量边框。 ####

--------------------

#### 在父盒子中的子盒子(单独一个盒子也行)，如果没有宽度或高度，则padding不会撑开盒子。如果给宽度或高度则会撑开盒子。 ####

--------------------

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

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

--------------------

#### 行盒居中都可以设置外层容器: text-align: center ####

--------------------

#### 浮动，不设置高度，会造成高度坍塌 ####

--------------------

#### border: 1px solid red 会占据盒子的尺寸。 ####

outline（外边框）: 1px solid red 不占据盒子的尺寸。

--------------------

#### transition 用于为样式设置动画效果（超哥做小米的二维码的时候用的） ####

transition: height 3s; 意思是，当高度发生变化的时候，我要花费3s的时间去切换。

--------------------

#### border-radius: 50% 设置圆形 ####

--------------------

#### label标签里面不能放div标签，但是可以放span标签 ####

--------------------

#### display: none 隐藏 ####

--------------------

#### overflow 四个属性： ####

overflow: visible
      overflow: hidden
      overflow: scroll
      overflow: auto
      overflow: 属性只要不是visible，那么它就会在里面创建BFC
      BFC的盒子会避开浮动元素

--------------------

#### 过渡（transition），只要是能计算的值都可以过渡，颜色也可以过渡。 ####

--------------------

#### list-style: none 去掉ul li 前面的点。 ####

--------------------

#### 盒子居中： ####

1· 盒子宽高确定时居中  
top: 0;  
left: 0;  
bottom: 0;  
right: 0;  
margin: auto  
2· 盒子宽高没有设置时居中  
left: 50%;  
top: 50%;  
transform: translateX(-50%) translateY(-50%);

--------------------

#### 有三个盒子一排布局时，HTML代码要先写浮动的盒子，再写常规流盒子。 ####

--------------------

#### 你去掉body的margin后，如果页面有h1元素，h1也会有自带的margin，如果不需要，也应该清除。 ####

--------------------

#### 行高是可以被继承的。 ####

--------------------

#### transform 默认情况下是一个2D变形。想要变成3D，需要设置 transform-style: preserve-3d; ####

--------------------

#### 浮动元素一定是块盒。行盒一定是常规流。 ####

--------------------

#### 去掉ul li前面的点的原因：前面的点不好调整。 ####

--------------------

#### href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。 ####

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

--------------------

#### 浏览器内核 ####

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

--------------------

#### javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术，它主要用途是提供异步刷新（只刷新页面的一部分，而不是整个页面都刷新）。一个是语言,一个是技术,两者有本质区别。 ####

AJAX不是一个技术，它实际上是几种技术，每种技术都有其独特之处，合在一起就成了一个功能强大的新技术。

--------------------

#### 移动端块元素对齐(less)： ####

display: flex;  
align-items: center;  
justify-content: space-between;

--------------------

#### text-decoration: none; 去除下划线 ####

--------------------

#### text-indent: -999; 把字体移走，做成隐藏效果。 ####

--------------------

#### 文本框的默认字体大小是13.3333px。 ####

--------------------

#### 一般导航栏有子菜单的话，我们用ul li来布局，如果没有子菜单的话，直接在导航栏的大盒子(nav)里面写上a元素就OK了。 ####

--------------------

#### curser: auto; 浏览器会根据具体情况来变换鼠标样式，遇到链接会出现小手，遇到普通文字会出现工字型以便你复制粘贴等等。 ####

--------------------

#### over-flow: auto; 内容超出，出现滚动条。 ####

--------------------

#### 设置上下边框时，盒子之间边框重叠，设置：margin-top: -1; ####

--------------------

#### 如果你要选中 selected ####

<ul>
    <li>1</li>
    <li selected>2</li>
    </ul>
    
    <style>
    ul li.selected {
    color: red;
    }
    </style>
    li.secleted要挨着，不能有空格。

--------------------

#### clearfix 解决高度坍塌问题，要写在元素属性的双引号“ ”里面。 ####

--------------------

#### 私有前缀： ####

\-moz-: 代表Firefox浏览器私有属性  
\-ms-: 代表IE浏览器私有属性  
\-webkit-: 代表Safari、Chrome私有属性  
\-o-: 代表Opera私有属性

--------------------

#### 创建BFC的盒子，会避开浮动盒子。 ####

--------------------

#### 绝对定位的时候，除了用top bottom left right 外，还有就是用margin-top，margin-bottom，margin-left，margin-right，一定记住不是用border。 ####

--------------------

####  ####

<div>
    	<p class=＂123＂>
       清华大学
       </p>
    </div>
    这个时候我们选择div .123
    给这个p元素一个类，好处就是，以后不用担心p改成其他的元素，这个样式不受影响。

--------------------

#### 图片默认和文字的基线对齐。用vertical-align: middle; 就可以解决。 ####

PS：有行内块的地方垂直居中用vertical-align: middle;

--------------------

#### 固定定位（position: fixed;）的盒子应该有宽度。 ####

--------------------

#### 固定定位跟父级没有关系，它以屏幕为准。 ####

--------------------

#### 固定定位的盒子对齐，不要用margin: 0 auto; ####

要使用：left: 0;  
transform: translateX(-50%);

--------------------

#### 盒子阴影：box-shadow ####

文字阴影：text-shadow

--------------------

#### a:nth-child(-n+3)\{ ####

选择前3个元素  
\}

a:nth-child(-n+5)\{  
选择前5个元素  
\}

--------------------

#### first-child: ####

等于
      nth-child(1):

--------------------

#### 某个代码不会写可以用generator ####

如：要写box-shadow
      可以百度 box-shadow generator
      在百度里调节好然后再复制代码到编辑器里就OK。

--------------------

#### 当不知道自己的盒子在浏览器的位置：加border ####

如：boarder: 1px solid red;

--------------------

#### vh是viewpoint high的缩写：视口高度。 ####

--------------------

#### 部署：把代码放到服务器上让别人可以看。 ####

--------------------

#### 盒子和盒子之间的距离，用margin是最合适的。 ####

--------------------

#### 设置input文本框，聚焦时的圆角边框可以这样： ####

input{ 
       border-radius: 5px;
    }
    input:focus { 
        outline: none;
        border: 1px solid #008c8c;
    }

--------------------

#### 定位的百分比是参照父容器的宽高 ####

--------------------

#### 长单词换行：word-wrap: break-word; ####

--------------------

#### 文本不换行：white-space: nowrap; ####

--------------------

#### BFC全称”Block Formatting Context” 中文为“块级格式化上下文”。 ####

记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。  
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

--------------------

#### BFC规则以及如何触发 ####

[BFC规则以及如何触发][BFC]

--------------------

#### margin的合并规则总结为“正正取大值”、“正负值相加”、“负负取最负”三句“秘诀”。 ####

--------------------

#### CSS优先级：！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 ####

--------------------

#### color，以text-,font-,line-开头的属性都是可以继承的 ####

这些关于文字样式的，都能继承；而所有关于盒子、定位、布局的属性都不能继承。

--------------------

#### 权重： ####

!important: ∞ 无穷大  
行内样式：1000  
id：100  
class：10  
标签：1  
星号（通配符）：0  
继承：0

--------------------

#### 标签之间是不能够随意嵌套的。 ####

如果一定要嵌套，要满足下面几条：  
行内元素只能包含行内元素  
块级元素可以包含所有的行内元素和部分块级元素。  
p标签，h标签都不能包含块级元素

--------------------

#### 边框的连写方法：border: border-width border-style border-color; ####

--------------------

#### font属性的顺序 ####

font-style(字体样式)：normal（正常）、italic（斜体）或oblique（倾斜）
    
    font-variant(字体异体)： normal（正常）或 small-caps（小体大写字母）
    
    font-weight(字体粗细)：normal（正常）或bold（加粗）
    
    font-size/line-height(字体大小与行高)：14xp/12px、14pt/1.5em、140%、1em等
    
    font-family(字体系列)：宋体、黑体等
    
    顺序：font-style | font-variant | font-weight | font-size | line-height | font-family

--------------------

#### animation 连写 ####

animation: 动画名 持续时间 动画方式 延时 重复次数 是否交替;  
animation: move 4s cubic-bezier(0.5,0.9,0.5,0.1) 0s infinite alternate;

--------------------

#### 过渡连写格式 ####

transition: 过渡属性 过渡时长 运动速度 延迟时间;

--------------------

#### 去掉单元格之间的间隙border-collapse: collapse; ####

style=“border-collapse:collapse”

--------------------

#### 小属性层叠大属性，不要把小属性写在大属性上面，会被大属性层叠 ####

padding-left: 30px;  
padding: 20px;

--------------------

#### 小盒子的宽度会继承自大盒子，但是小盒子的高度不会继承自大盒子！ ####

--------------------

####  ####

margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。所以，我们要善于使用父亲的padding，而不是儿子的margin。

--------------------

#### 浮动的重点： ####

1.  同一等级，浮动的元素只会影响下面的元素，不会影响上面的元素！
2.  浮动的元素会改变显示方式：不管元素是行内元素还是块级元素将来在显示的时候都会在同一行中显示。显示方式与行内块级元素一样。
3.  浮动以后的元素可以设置宽高。
4.  兄弟关系的盒子，只要有一个加浮动，其余都要加浮动！

--------------------

#### 当同时设置了背景颜色和背景图片时，背景图片会覆盖在背景颜色之上。 ####

--------------------

#### 移动父盒子里面的子盒子可以用三种方式： ####

1.  给父盒子加border，如 1px solid red
2.  给父盒子 overflow：hidden
3.  给父盒子加 padding

--------------------

<b></b> and <strong></strong> : 表示字体加粗。
    <u></u> and <ins></ins> : 表示下划线。
    <i></i> and <em></em> : 表示字体倾斜。
    <s></s> and <del></del> : 表示删除线。

--------------------

#### 处理两个盒子合并边框变粗的问题： ####

border-collapse: collapse; 表示相邻边框合并在一起。

--------------------

#### text-indent: 2em; 首行空两格。 ####

--------------------

#### 在a标签中可以嵌套任何的标签。 ####

--------------------

#### ID属性是区分大小写的。 ####

--------------------

#### Ctrl+0（零）：把网页放大、缩小后，快速还原成100%。 ####

--------------------

#### 如果想要盒子居中，必须设置宽度。 ####

--------------------

#### 浮动和定位都有默认的隐式转换：行内块元素。 ####

--------------------

#### Shellcode是执行shell的字节码。 ####

--------------------

#### 浏览器最小宽度设置：min-width: ####

--------------------

#### 绝对定位一旦偏移就不占据空间了，换句话说下面的盒子会把它的位置占据。 ####

--------------------

#### 相对定位是相对于自己来偏移的，绝对定位是相对于整个浏览器来偏移的。 ####

--------------------

#### Z-index 只能在定位的元素上起作用。使用正值说明离我们更近，值越大越近。使用负值说明离我们更远。 ####

--------------------

#### 移动父盒子里面的子盒子可以用三种方式： ####

1.  给父盒子加border，如1px solid red;
2.  给父盒子 overflow: hidden;
3.  给父盒子加 padding

--------------------

#### CSS中这些属性是可以继承下来的： ####

1.  字体系列属性：  
    font-family:字体系列  
    font-weight:字体的粗细  
    font-size:字体的大小  
    fnot-style:字体的风格
2.  文本系列属性  
    text-indent:文本缩进  
    text-align:文本水平对齐  
    line-height:行高  
    word-spacing:单词之间的间距  
    letter-spacing:中文或者字母之间的间距  
    text-transform:控制文本大小  
    color:文本颜色
3.  元素可见性  
    visibility:控制元素显示隐藏
4.  列表布局属性  
    list-style列表风格，包括list-style-type,list-style-image
5.  光标属性：  
    cursor:光标显示为何种形态

--------------------

#### 区块 ####

1、单词间距  
word-spacing: 间隔距离

2、字母间距  
letter-spacing: 字母间距

3、文本对齐  
text-align: 参数  
参数的取值：  
left：左对齐  
right：右对齐  
center：居中对齐  
justify：相对左右对齐

4、垂直对齐  
vertical-align: 参数  
top：顶对齐  
bottom：底对齐  
text-top：相对文本顶对齐  
text-bottom：相对文本底对齐  
baseline：基准线对齐  
middle：中心对齐  
sub：以下标的形式显示  
super：以上标的形式显示

5、文本缩进  
text-indent: 缩进距离  
12px相当于一个文字距离

6、空格  
white-space: 参数  
normal 正常  
pre 保留  
nowrap 不换行

7、显示样式  
display: 参数  
参数取值范围：  
block：块级元素，在对象前后都换行  
inline：在对象前后都不换行  
list-item：在对象前后都换行，增加了项目符号  
none：无显示

--------------------

#### 构造函数在es6之前是没有“类”的概念的。 ####

--------------------

####  ####

未完待续。。。

[http_www.ruanyifeng.com_blog_2019_03_grid-layout-tutorial.html]: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
[BFC]: https://blog.csdn.net/qq_45164496/article/details/106594444?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160966174316780299011199%252522%25252C%252522scm%252522%25253A%25252220140713.130102334..%252522%25257D&request_id=160966174316780299011199&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-106594444.first_rank_v2_pc_rank_v29&utm_term=BFC%E8%A7%A6%E5%8F%91