这是我参与[青训营笔记]的第1天
- 什么是前端？ 前端有三个方面的职责：解决图形界面下的人机交互问题、做出来的东西能够跨终端、熟悉html css javascript等技术栈，前端关注功能是否满足需求，是否可访问，是否可用，记忆是否无障碍
- html：超文本标记语言，HTML 使用“标记”（markup）来注明文本、图片和其他内容，标签成对出现
- 怪异模式和标准模式：怪异模式是指浏览器按照自己的方式进行解析，标准模式就是浏览器按照w3c标准进行解析，怪异模式下的盒模型是IE盒子模型，宽度等于width+padding+border，标准模式下的盒模型是标准盒子模型
- dl中有两部分：dt dd，两者并不是一一对应的关系，一个dt可以有多个dd
- ssr：指的是服务器端渲染，将客户端或通用应用程序渲染到服务器上的HTML
- 特异度：
- css继承：某些属性会自动继承其父元素的属性值
- 布局：是根据元素，容器，兄弟节点和内容等信息来确定内容的大小和位置的算法
- padding：可以设置left,right,bottom,top四个方向的值
- 边框(border):可以设置阴影，
- css三角形：可以有border，linear-gradient和clip-path三种方式去实现
.triangle {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid skyblue;
}
.triangle {
width: 160px;
height: 200px;
outline: 2px solid skyblue;
background-repeat: no-repeat;
background-image: linear-gradient(32deg, orangered 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, orangered 50%, rgba(255, 255, 255, 0) 50%); background-size: 100% 50%; background-position: top left, bottom left;
}
.triangle{
margin: 100px;
width: 160px;
height: 200px;
background-color: skyblue;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
- margin:可以设置left,right,top,bottom四个方向的值，值可以为a%，apx,auto等
- 水平居中的效果可以由：margin:auto来设置
- margin早垂直方向上会有重叠 取较大的一个数值
- border-box 的宽度为：border+padding+文本宽度
- overflow:当文字溢出的时候的显示方式，默认为visibl，可以设置的值有滚动条scroll，隐藏hidden
- 块级盒子：不可以并列排放，一个盒子占一行
- 行级盒子：和其他行级盒子放在一行或者拆开成多行，不适合用width和height来设置宽度和高度
- 块级元素：生成块级盒子
- 行级元素：生成行级盒子，内容分散在多个行级盒子当中
- display：inline-block:本身是一个行级，可以放在行级盒子中，可以设置宽高，作为一个整体不会被拆成多行表示
- 行级排版上下文（IFC）：只包含行级盒子的容器会创建一个IFC
- 块级排版上下文（BFC）：盒子从上到下排放，垂直方向上的margin会进行合并，但是bfc内的盒子的margin不会与外面的合并，也不会和浮动元素重叠
- Flex Box：可以控制子盒子摆放的流向，顺序，盒子的宽度和高度，水平和垂直方向的对其，是否允许拆行等行为
- flex布局属性有：flex-direction，justify-content,align-items，align-self，order,flexibility等
- grid布局属性有：grid line,grid area等
- position，可以设置四个值，默认值static，sticky,fixed（固定定位），relative（现对于自身原本的位置，不脱离文档流），absolute（相对于非static祖先元素定位）等 总结：讲解的内容很多，总体也给了一个学习的思路，底层的东西也有涉及到，还是需要继续思考以及学习
