HTML+CSS在学习总结

一、HTML

1.要注意嵌套关系

<a>作为行内元素可以包含<div> 是因为<a>相当于透明的他的content model是 transparent 所以<a>能否包含<div> 取决于<a>外面的标签

不然一般的行内元素不能包含块状元素

2.HTML会有一些默认的样式，如果不想要默认样式就需要css.resset自己设定一些初始化工作

（类似于做VUE项目时下的初始化css）

或者使用

* { margin:0 ; padding:0;}

3.HTML是死的

DOM是由HTML解析而来，是活的。

使用JS维护的是DOM

4.虽然都是属性，但是

attribute 是写在HTML中的是写在标签里的

但property是活的是渲染时从DOM中获取的

两者互不影响

5.doctype的意义是什么？

以标准模式渲染，并知道元素的合法性

6.HTML XHTML HTML5

HTML属于SGML

XHTML属于XML

HTML5不属于任何一个：新增了许多API

7.语义化的意义

人更容易理解机器也更容易理解结构，有助于SEO

（语义化就是别老写div)

8.自闭合

input img br hr meta link

9.使用表单时都加一个 form

10.label for:"对应id值" 使用label可以和表单元素关联上

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

二、CSS

1.浏览器解析选择器时是从右往左找的

.body div .hello{ }

先找到.hello 往上找父级做验证

2.选择器分类

伪类：是一种状态比如鼠标点击事件

伪元素：是能够出现在页面上的内容真的有元素如before after first-letter first-line：https://www.w3school.com.cn/css/css_pseudo_elements.asp

权重的计算不进位官大一级压死人哪怕11个类选择器也不过一个ID选择器

3.字体fallback机制：

字体需要适配不同的平台所以会设定很多字体挨个找还得可以在最后加一个字体族（字体族不加引号）

找到哪个用哪个

4.行高

内联元素默认时按照基线baseline对齐的通过设置line-height可以实现元素垂直居中

其的line-height 决定最外层的高度，而不是文字排版的高度

图片和块的下端存在空隙的原因就是因为按照baseline对齐的，如果想要消除空隙，就调整vertical-align：bottom

调整为按照底线对齐

5.背景

利用linear-gradient 可以实现网格线

利用雪碧图可以实现用一张图加载许多图标，通过定义图标在原图中的位置来找到图标：但该位置background-position是相对于容器左上角而言的，所以一般是负数（相当于左上角是原点）

多分辨率适配就是通过把很大一张雪碧图缩小，然后提取图标。

base64:把图片变成文本加载在CSS中减少HTTP连接

6.边框的衔接使用斜切，当把width设置为0时可以通过边框得到一个三角形

7.设置滚动，使用overflow

8.文字换行：

overflow-warp/word-wrap

word-break

white-space

9.css hack用来处理浏览器兼容

10.checkbox美化

选择器里的 +label 代表相邻的兄弟元素从而实现美化

三、CSS布局

1.表格布局

除了直接使用表格以外，还可以通过设置display样式来实现表格布局

2.盒子模型

position 为 fixed absolute relative 的可以只用 z-index 设置层级决定谁在上面

4.flexbox布局

设置display = flex 可以直接设置宽度也可以通过 flex=1 来指定份数

5.float 布局

float 会脱离文档流但不脱离文本流

float 本身就是做图文排版的所以会出现这种效果

高度塌陷如何解决：

（1）设置overflow:auto/hidden

（2)利用其它元素把父级元素撑起来：

通过float实现两栏/三栏布局：

（1）给左边设置float:right 给右边设置margin

（这里的height可以使用100% 但使用display=abosulte 高度就必须设定因为不能和父级的高度绑定 )

（2）三栏布局

6.inline-block

需要处理间隙：把父块的字体大小设置为0即可

7.响应式设计和布局

（1）通过隐藏实现

第一步：设置一个viewport

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步：隐藏一些没必要的元素（通过媒体查询来实现）

        @media (max-width: 640px){
            .left{
                display: none;
            }
        }

（2）通过折行实现

把横向的变成纵向

        @media (max-width: 640px){
            .intro{
                margin:.3rem auto;
                display: block;
            }
        }

（3）不同设备上，内容根据屏幕大小等比例缩放

通过rem来实现

        .intro{
            display: inline-block;
            width:9rem;
            height:9rem;
            line-height: 9rem;
            text-align: center;
            border-radius: 4.5rem;
            border:1px solid red;
            margin:.3rem;
        }

把样式中的px都设置成rem

再通过媒体查询，设置不同屏幕情况下的font-size

        @media (max-width: 375px){
            html{
                font-size:24px;
            }
        }
        @media (max-width: 320px){
            html{
                font-size:20px;
            }
        }

一定要把大的屏幕放在前面