HTML相关
1-1、HTML语义化的理解
HTML语义化是不需要知道HTML里面的内容就能知道这段话的含义，例如h1的标签表示标题，p标签表示段落，ul表示无序列表等等。这样有两个好处，一是利于代码理解和走查，二是利于机器理解做seo的优化。
1-2 HTML中哪些是标签是块级元素，哪些是内联元素
块级标签：h1 p div ul section等
内联标签：img span i input a 等等
CSS相关
2-1、盒模型宽度的计算
.div1{ width:100px; padding:10px; border:1px solid #ccc; margin:20px； // box-sizing:border-box 如果加上这个属性 }div1的offsetWidth = 内容宽度（width）+ 内边距（padding）+ 边框（border） 无外边距（margin） = 100 + 20 + 2 ==122px；如果加上box-sizing:border-box 那div1的offsetWidth就是100px，这个内容的宽度包含了padding和border宽度
2-2 margin纵向重叠问题
<body> <p>AAA</p> <p></p> <p></p> <p></p> <p>BBB</p> </body> <style type="text/css"> p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } </style>AAA到BBB的距离为15px，这是因为相邻元素的margin-top和margin-bottom会发生重叠，空白的p标签也会发生重叠（类似于被忽略掉的意思），所以实际AAA和BBB的距离就是15px
2-3 maring负值的问题
margin-top、margin-left设置负值，元素本身会向上，向左移动
margin-right 设置为负值，元素本身不受影响，它右侧的元素会向左移动
margin-bottom设置为负值，元素本身不受影响，它下方的元素会向上移动
2-4 BFC（block format context）块级格式化上下文的理解与应用
bfc表示一块独立的渲染区域，内部元素的渲染不会影响到边界以外的元素
形成bfc的条件，例如： float不为none；position为absolut或fixed； overflow不为visible；
display为flex或inline-block等。
bfc常用来清除浮动。
2-5 float布局
圣杯布局，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性。其核心是三个盒子都设置浮动，主体盒子设置宽度100%，左侧盒子设置margin：-100%，右侧盒子设置maring-right为负值，具体的值和右侧盒子宽度等同
上代码，直接可以copy代码在在html文件看看效果
<style type="text/css"> .header { width: 100%; height: 100px; background-color: #ccc; } .footer { clear: both; width: 100%; height: 100px; background-color: beige; } .main { height: 300px; margin: 0; width: 800px; padding-left: 200px; padding-right: 150px; overflow: hidden; } .main .float { float: left; } .main .content { width: 100%; height: 300px; background-color: #999; } .main .main-left { width: 200px; height: 300px; background-color: #f00; margin-left: -100%; position: relative; right: 200px; } .main .main-right { width: 150px; height: 300px; background-color: #f90; margin-right: -150px; } </style> <body> <div class="header">头部</div> <div class="main"> <div class="content float">前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握。 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，也就是我们常说的固比固布局。它们实现的效果是一样的，差别在于其实现的思想</div> <div class="main-left float">左侧</div> <div class="main-right float">右侧</div> </div> <div class="footer">底部</div> </body> 2-6 手写clearfix
.clearfix:after{ content: ' '; display:table; clear:both; }2-7 flex布局
flex布局主要有5个基础属性：
flex-direction属性，主轴的方向，可以是水平方向，也可以是垂直方向
justify-content属性，主轴对齐的方式，开始，居中，两端对齐等方式
flex-wrap属性，是否换行显示
align-items属性，与主轴垂直方向的显示方式，有开始，居中，末端对齐等方式
align-self，子元素在与主轴垂直方向的显示方式，有开始，居中，末端对齐等方式
应用场景：用flex布局画一个骰子的3
<div class="box"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <style type="text/css"> .box { width: 200px; height: 200px; border: 2px solid #ccc; border-radius: 10px; padding: 20px; display: flex; justify-content: space-between; } .item { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #666; } .item:nth-child(2) { align-self: center; } .item:nth-child(3) { align-self: flex-end; } </style>千里之行，始于足下，关于技术的沉淀，从今天开始，记录这么些年开发总结的点点滴滴~！
到此这篇前端基础知识-HTML和css1_前端html,css, js的文章就介绍到这了,更多相关前端基础知识-HTML和css1_前端html,css, js内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/3023.html