前端知识总结01-html与css
HTML
1. 如何理解HTML语义化
-
让人更加容易读懂（增加代码可读性）
-
让搜素引擎更容易读懂（SEO）
2. 块内元素&内联元素
-
display：block/table;
div、h1、h2、table、ul、ol、p等 -
display: inline/inline-block
span、img、input、button等
CSS
3. 盒子模型宽度怎么计算
-
offsetWidth：包括padding、border、width,不包含外边距
-
offsetHeight：包括padding、border、height,不包含外边距
-
补充： box-sizing: border-box（默认为content-box）时,css的width = 内容宽度+ padding + border
4. margin纵向重叠问题
- 相邻元素的margin-bottom和margin-top重叠
- 空白内容的p元素也会重叠
5. margin负值问题
- margin-top和margin-left负值,元素向上、向左移动
- margin-right设置负值，右侧元素左移，自身不受影响
- margin-bottom设置负值，下侧元素上移，自身不受影响
6. BFC理解与应用
-
BFC(Block Formatting Context)块级格式化上下文
-
BFC的定义：一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
-
BFC的触发条件：
- float属性不为none
- position属性为absolute/fixed
- overflow属性不为visible
- display属性为inline-block/table-cell/table-caption/flex/grid
-
BFC的应用：
-
防止浮动元素引起的父元素高度塌陷
当一个父元素包含浮动的子元素时，如果父元素没有明确的高度值，它可能会因为子元素的浮动而丢失其高度，导致后续元素上移。通过给父元素触发 BFC 可以避免这个问题。 -
清除浮动
使用 overflow: auto 或 overflow: hidden 可以创建一个新的 BFC，从而隐式地清除浮动。 -
避免元素外边距重叠
在同一个 BFC 内部，相邻的两个块级元素的垂直外边距会发生重叠合并。将元素放入不同的 BFC 中可以避免这种情况。
.element1, .element2 { margin-bottom: 20px; } .element2 { overflow: auto; /*创建新的 BFC*/ }- 创建两栏布局
在两栏布局中，通常左侧是固定宽度的元素，右侧是自适应宽度的元素。使用 BFC 可以确保右侧的元素紧贴左侧元素，即使左侧元素设置了浮动
.left { float: left; width: 200px; } .right { overflow: auto; /* 触发 BFC */ }-
自适应高度布局/避免元素溢出父元素
在某些情况下，我们需要一个容器能够根据其内容自动调整高度。通过触发 BFC，可以确保容器正确地包裹其内容。设置overflow: auto; -
绝对定位元素与浮动元素的交互
绝对定位元素会脱离文档流，但如果它位于一个 BFC 内，那么它仍然会被 BFC 的边界所限制。
.container { overflow: auto; /* 触发 BFC */ } .absolutely-positioned { position: absolute; } -
7. 如何实现圣杯布局和双飞翼布局
-
目的：
- 三栏布局，中间一栏最先加载和渲染（内容最重要）
- 两侧内容固定，中间内容宽度自适应
- 一般用于pc端
-
技术总结:
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一边用padding，另一边用margin
-
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
</head>
<style>
body{
min-width: 550px;
}
.header{
background: yellow;
text-align: center;
}
.container .column{
float: left;
}
.container{
padding-left: 200px;
padding-right: 150px;
}
.center{
width: 100%;
background: red;
}
.left{
position: relative;
width: 200px;
background-color: aqua;
margin-left: -100%;
right: 200px;
}
.right{
width: 150px;
background-color: green;
margin-right: -150px;
}
.footer{
clear: both;
background: pink;
text-align: center;
}
</style>
<body>
<div>
<header class="header">header</header>
<div class="container">
<div class="column center">center</div>
<div class="column left">left</div>
<div class="column right">right</div>
</div>
<footer class="footer">footer</footer>
</div>
</body>
</html>
- 双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局</title>
<style>
body {
min-width: 550px;
}
.col {
float: left;
}
.center {
width: 100%;
}
.center-wrap {
margin: 0 150px 0 200px;
background: red;
}
.left {
width: 200px;
background-color: aqua;
margin-left: -100%;
}
.right {
width: 150px;
background-color: green;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="center col">
<div class="center-wrap">center</div>
</div>
<div class="left col">left</div>
<div class="right col">right</div>
</body>
</html>
8. 清除浮动
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*ZOOM: 1; /* IE6 */
}
9. flex布局
语法：
- 对齐方向
flex-direction: row | row-reverse | column | column-reverse;
-
主轴对齐
-
justify-content: flex-start | flex-end | center | space-between | space-around;
-
侧轴对齐
align-items: flex-start | flex-end | center | baseline | stretch;
-
换行
flex-wrap: nowrap | wrap | wrap-reverse; -
子元素的对齐方式
-
align-self: auto | flex-start | flex-end | center | baseline | stretch;
-
用flex实现一个三点的色子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三点色子</title>
<style>
.box{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #000;
border-radius: 8px;
padding: 10px;
display: flex;
justify-content: space-around;
}
.item{
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
10. absolute 和 relative 分别依据什么定位
-
relative：相对定位，相对于元素本身进行定位，不会影响元素本身
-
absolute：绝对定位，相对于离它最近的非static定位的父元素进行定位，如果父元素是body，则相对于body进行定位，如果父元素是static，则相对于浏览器进行定位
11. 居中对齐的方式
-
水平居中：
- inline 元素： text-align: center;
- block 元素： margin: 0 auto;
- absolute 元素： left: 50%; margin-left: 宽度的一半;
- flex 元素： justify-content: center;
- grid 元素： justify-content: center;
-
垂直居中：
-
inline 元素：line-height等于height值；
-
absolute 元素
-
top: 50%; margin-top: 高度的一半;
-
top: 50%;transform: translateY(-50%);
-
top,left,bottom,right=0 + margin: auto; （水平垂直居中）
-
flex 元素： align-items: center;
-
12. 图文样式
- line-height如何继承
- 具体数值， 如30px，继承该值
- 比例，如 2/1.5，继承该比例
- 百分比，如 200%，继承计算出来的值
13. 响应式
-
rem是什么？
-
px 是绝对长度单位
-
em 是相对长度单位， 相对父元素
-
rem是相对长度单位，相对与根元素，常用于响应式布局， 1rem = 根元素的font-size
-
响应式布局常用方案
-
媒体查询， 根据不同屏幕宽度，设置根元素font-size，使用rem设置作为单位
-
vw/vh
-
rem的弊端： 响应式具有阶梯性，需要针对屏幕宽度设置不同的根元素font-size,不灵活
-
网页视口尺寸
- window.screen.height // 屏幕高度
- window.innerHeight // 网页视口高度
- document.body.clientHeight // body高度
-
vh: 网页视口高度的1/100
-
vw: 网页视口宽度的1/100
-
vmax: vh和vw的较大值
-
vmin: vh和vw的较小值
插件:postcss-px-to-viewport:
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 1920, // 设计稿的宽度
viewportHeight: 1080, // 设计稿的高度
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: ['.ignore-'],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_modules/],
landscape: false
}
}
};
1691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
