前端基本功（一）-HTML+CSS+JS基础

最新推荐文章于 2024-05-25 11:25:03 发布

韩佳荣

最新推荐文章于 2024-05-25 11:25:03 发布

阅读量553

点赞数

分类专栏：前端文章标签： html css javascript

原文链接：https://blog.csdn.net/simplebam/article/details/81558859?biz_id=102&utm_term=%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-1-81558859&spm=1018.2118.3001.4187

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

小Tips

任何一个标准的HTML页面，第一行一定是一个以DOCTYPE ……开头的语句。这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
标准的div+css页面，用的标签种类很少：div p h1 span a img ul ol dl input
一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

HTML 超文本标记语言从语义的角度描述页面结构。提到HTML的作用，只能从语义方面从想，绝对不能想样式
CSS 层叠式样式表从审美的角度负责页面样式。
JS JavaScript 从交互的角度描述页面行为。

HTML

CSS

CSS 基础

标签选择器

id选择器

类选择器： class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；同一个标签可以同时携带多个类。
1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

到底用id还是用class？
答案：尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

就是一个标签，可以同时被多种选择器选择，标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签，从而影响样式，这就是css的cascading“层叠式”的第一层含义。

CSS 高级

这里写图片描述
后代选择器，描述的是祖先结构

这里写图片描述

这里写图片描述
继承性是从自己开始，直到最小的元素。

层叠性：
权重问题大总结：
1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
2）如果没有选中，那么权重是0。如果大家都是0，就近原则。

块级元素和行内元素

块级元素
- 霸占一行，不能与其他任何元素并列
- 能接受宽、高
- 如果不设置宽度，那么宽度将默认变为父亲的100%。
行内元素
- 与其他行内元素并排
- 不能设置宽、高。默认的宽度，就是文字的宽度。

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：
所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。
所有的容器级标签都是块级元素。
这里写图片描述

css中一共有三种手段，使一个元素脱离标准文档流：
1）浮动
2）绝对定位
3）固定定位

浮动

浮动的基本性质
- 浮动的元素脱标
  - 一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
- 浮动的元素互相贴靠
- 浮动的元素有“字围”效果
- 收缩
  - 一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。
清除浮动

清除浮动方法1：给浮动的元素的祖先元素加高度（加高法）。有高度的盒子，才能关注浮动。浮动的元素，只能被有高度的盒子关住。也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
清除浮动方法2：clear:both。clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响（表示自己的内部元素，不受其他盒子的影响）。这种方法有一个非常大的、致命的问题，margin失效了。
清除浮动方法3：隔墙法。在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。墙用自己的身体当做了间隙。隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，我们就要想一些“小伎俩”，“奇淫技巧”。
- 内墙法：浮动的元素不能把父亲撑出高。内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了
清除浮动方法4：overflow:hidden。所有溢出边框的内容，都要隐藏掉。
- 一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。
- 这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。

盒子居中
- margin:0 auto;margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了
```
1   margin-left: auto;
2   margin-right: auto;  //这两句简写未 margin:0 auto;
 
 1
2
```
注意：
1）使用margin:0 auto; 的盒子，必须有width，有明确的width
2）只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用 text-align:center;
4) margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。
所以，我们一定要善于使用父亲的padding，而不是儿子的margin。

定位

以盒子为参考点：
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

原文链接：https://blog.csdn.net/simplebam/article/details/81558859?biz_id=102&utm_term=%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-1-81558859&spm=1018.2118.3001.4187原文作者：Simplebam