1. 盒模型
包括：实际内容(content)、填充(padding)、边框(border)
- padding就是内容到border的距离
- margin是border到父元素border的距离
-
border-box
border-box.png
border-box: 实际宽度 == width == 100 == 内容区 + padding + border
-
content-box
content-box.png
content-box: 实际宽度 == width + padding + border
2. 如何理解HTML语义化
- 举例
比如说，标题就用h1~h6，段落就用p，边栏用aside，主要内容用main - 用处
在没有CSS的情况下，页面也能呈现出很好地内容、代码结构
3. meta:viewport
背下来
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
控制页面在移动端不会缩小显示
4. 复习canvas项目
自己再做一遍canvas
5. css Reset和normalize.css区别
- css reset的想法是清除所有默认样式
- 后来normalize.css取代了css reset，normalize自己制定相应的默认样式，用了normalize.css之后，所有浏览器上默认样式都基本一致
6. css居中
1. 垂直居中
-
若父元素没有写height，则直接在父元素写
padding: 10px 0;子元素就可以居中，所以尽量避免父亲高度确定
-
让一个元素在父级元素中绝对居中
方法一：
给父级元素加:position:relative; //若父级元素是body可以不用加再给自己加：
div{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }方法二：（若不兼容IE，工作中只要用这一种方法即可，最简单，Chrome，移动端都可以用）
给父元素加：display: flex; //让它变成一个弹性盒 justify-content: center; //水平居中 align-items: center; //垂直居中 -
table自带居中（兼容IE）
<html> <style> .parent{ border: 1px solid red; height: 600px; } .child{ border: 1px solid green; } </style> <body> <table class="parent"> <tr> <td class="child"> 文字 </td> </tr> </table> </body> </html>文字会居中
-
用div假扮table（兼容IE）
<html> <style> div.table{ display: table; border: 1px solid red; height: 600px; } div.tr{ display: table-row; border: 1px solid green; } div.td{ display: table-cell; border: 1px solid blue; vertical-align: middle; } </style> <body> <div class="table"> <div class="tr"> <div class="td"> 文字 </div> </div> </div> </body> </html> -
用100%高度的before和after
.parent{ border: 3px solid red; height: 600px; text-align: center; } .child{ border: 3px solid black; display: inline-block; width: 300px; vertical-align: middle; } .parent:before{ content:''; display: inline-block; height: 100%; vertical-align: middle; } .parent:after{ content:''; display: inline-block; height: 100%; vertical-align: middle; } -
绝对定位加上margin-top: -自身height的50%
<html> <style> .parent{ height: 600px; border: 1px solid red; position: relative; } .child{ border: 1px solid green; width: 300px; position: absolute; top: 50%; left: 50%; margin-left: -150px; height: 20px; margin-top: -10px; text-align: center; } </style> <body> <div class="parent"> <div class="child"> 文字 </div> </div> </body> </html> -
让一个背景图居中，并且让它自适应屏幕
background: url("wallhaven-w-min.jpg") no-repeat center center ; background-size: cover;
2. 水平居中
-
块级元素水平居中
margin-left:auto; margin-right:auto; -
内联元素水平居中，给它们的父元素加上
text-align:center;若不是内联元素想让它居中，可加display:inline-block，加了之后一般还要加下面这句，不然可能会有bug（下面可能会空出一行）
vertical-align: top; -
让导航栏横过来，并在同一行里均匀分布
给ul加cssul{ display:flex; justyfy-content:space-between; }
7. 选择器的优先级
- id比class优先级高
- 同样优先级，写在后面的会覆盖前面
- a:hover和a的优先级一样，所以加hover样式的时候，hover要写在下面。不然会被覆盖
- color: red !important 优先级最高
8. BFC
块格式化上下文（Block Formatting Context）
1. 功能一：父元素包住子元素
- 爸爸包不住儿子的情况
- 儿子是浮动元素
<style>
.father{
width: 100px;
border: 1px solid red;
}
.son{
border: 1px solid green;
float: left;
}
</style>
<body>
<div class="father">
<div class="son">2</div>
</div>
</body>
只要父亲是以下七种情况，就可以包住子元素
- 浮动元素（float）
- 绝对定位（absolute）
- 内联块（display: inline-block）
- 表格（display: table-cell 或 table-caption）
- overflow不为visible
- display: flow-root（css新规则，为bfc而生）
2. 功能二：让浮动的兄弟之间划清界限
用float做布局，如果不加bfc，兄弟会重合，两个都变成bfc才行
<style>
.a{
width: 100px;
height: 600px;
border: 4px solid red;
float: left;
margin-right: 20px;
}
.b{
height: 600px;
border: 4px solid green;
float: left;
}
</style>
<body>
<div class="a">1</div>
<div class="b">2</div>
</body>
不过这个功能可以用flex布局实现，不需要bfc了
<style>
.a{
width: 100px;
height: 600px;
border: 4px solid red;
margin-right: 20px;
}
.b{
height: 600px;
border: 4px solid green;
flex: 1;
}
body{
display: flex;
}
</style>
<body>
<div class="a">1</div>
<div class="b">2</div>
</body>
3. 功能三
<style>
.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff;}
</style>
<div class="box">
<div class="img">image</div>
<p class="info">信息信息信息信息信息信息信息信asdasdasdasdasdasd息信息信息信息信</p>
</div>
让info变成bfc，会有意想不到的效果
9. 如何清除浮动
- 给父元素overflow: hidden
- 给父元素加clearfix
.clearfix::after{
content: '';
clear: both;
display: block;
}
.clearfix{
zoom: 1; //若要兼容IE才加这个
}
10. 父亲儿子的上下margin合并
<head>
<style>
.child{
height: 100px;
border: 1px solid red;
margin-top: 100px;
}
.parent{
width: 100%;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
这样儿子的margin-top也会给到父亲，把父亲挤下来，但只要在父亲里加：
border: 0.1px solid green;padding: 0.1pxdisplay: table;-
display: flex;（不加width的话会把width变成0） -
display: inline-block（不加width的话会把width变成0）
则上下margin不会合并，父亲还是会把儿子包起来
11. 省略号
.ellipsis{
width: 50px;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
网友评论