块级标签与行内标签
块级：div，p，ul，ol，dl，h1-h6，table，form，hr，marqueen，address，center
行内：span，label，a，i（斜体），em(斜体)，strong，br，b(加粗)
行内块：img，input，textarea
空元素
没有内容的 HTML 元素被称为空元素，有<br> <hr> <img> <input> <link> <meta>
css有哪些属性是可以继承的？
字体系列属性：font-family：字体系列，font-weight：字体的粗细，font-size：字体的大小，font-style：字体的风格
文本系列属性：text-indent：文本缩进，text-align：文本水平对齐，line-height：行高，word-spacing：单词之间的间距，letter-spacing：中文或者字母之间的间距，text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个），color：文本颜色
页面布局的整体思路
- 必须确定页面的版心（可视区），可通过测量得知
- 分析页面中的每个行模块和每个行模块下的列模块，页面布局第一准则
- 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
- 制作html页面，还是遵循先有结构后有样式的原则，结构永远最重要
图片懒加载原理：
图片没有进入可视区域时，不给src赋值，这样浏览器就不会发起请求了
CDN概念：
（1）CDN的加速资源是跟域名绑定的。
（2）通过域名访问资源，首先是通过DNS分查找离用户最近的CDN节点（边缘服务器）的IP
（3）通过IP访问实际资源时，如果CDN上并没有缓存资源，则会到源站请求资源，并缓存到CDN节点上，这样，用户下一次访问时，该CDN节点就会有对应资源的缓存了。
浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含快或另一个浮动框的边缘
特性：
浮动元素会脱离标准流，脱离标准流的控制（浮）移动到指定位置（动），（俗称脱标），浮动的盒子不再保留原来的位置（意味着其他标准流盒子可以占有！！！重要内容）
浮动元素会一行内显示并且元素顶部对齐
浮动元素会具有行内块元素的特性：如span设置了浮动，此时再给它设置宽高，就生效了（如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度）
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，他的大小由内容来决定，如P标签设置了浮动之后，宽度就不是百分之百了，而是根据里面的内容来决定
浮动布局的2个注意点：
1:浮动和标准流的父盒子搭配
先用标准流的父元素排列，之后内部子元素浮动排列左右位置
2：如果一个元素浮动了，理论上其余的兄弟也要浮动
浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流‘
有的标准流盒子是不能给高度的，比如商品列表，高度需要用子盒子撑开
但是只给宽度不给高度的话，当子盒子设置浮动时，会发现父盒子的宽高是0，因为子盒子用了浮动不占用位置，脱离了标准流
这时候就需要引入一个概念： 清除浮动
为什么要清除浮动？由于父盒子很多情况下不方便给高度，但是子盒子浮动又不占用位置，最后父盒子高度为0时，就会影响下面的标准盒子
清除浮动的本质就是清除浮动元素造成的影响
父盒子有固定高度 = 不需要清除浮动
父盒子不能给固定高度 = 需要清除浮动
实际开发中，几乎只用clear:both
清除浮动的方法：
1.额外标签法也称隔墙法，是W3C推荐的做法（找到最后一个浮动的元素后加个空标签，如<div class='clear'></div> , .clear 是使用了clear:both）,
注意这个空标签不要受其他样式影响，且必须是块级元素不能是行内元素
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构比较差
2.父级添加overflow属性，一般是用overflow:hidden
优点：代码简洁
缺点：无法显示溢出的部分
3.父级添加after伪元素,父级添加clearfix这个class即可，相等于额外标签法的升级法，通过css生成最后一个标签
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.ckearfix {
zoom: 1;
}优点：没有增加标签，结果更简单
4.父级添加双伪元素
水平垂直居中
1.
.parent {
position: relative;
}
.son {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px
}
2.
#container{
display:flex;
justify-content:center;
align-items: center;
}
3.
#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}常用正则
判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30 /^[a-zA-Z]\w{5,29}$/
css创建一个三角形
div {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}px，em，rem的区别
px是固定像素，一旦写了就无法适应页面的大小而改变
em和rem相对于px更有灵活性，他们是相对长度单位，意思是长度不是定死的，更适用于响应式布局
em是相对于其父元素来设置字体大小的，这样就有一个问题，进行任何元素设置，都需要知道他父元素的大小
子元素字体大小的em是相对于父元素字体大小,父元素40px，子元素0.5em = 20px
元素的width/height/padding/margin用em的话是相对于该元素的font-size，比如字体大小设置40px，宽度设置7.5em = 300px
而rem是相对于根元素<html>，这样就意味着我们需要在根元素确定一个参考值，其余的统统上rem就完事
html {
font-size: 10px;
}em和rem的区别就是一句话概括：
em相对于父元素，rem相对于根元素
https://www.cnblogs.com/webdragon/p/11185979.html
气泡框div制作
https://blog.csdn.net/weixin_36732046/article/details/84977911
flex-wrap导致换行太多
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
