1. css学习方法
css学习特点
- css层叠就很灵活, 也导致了很复杂, 很难限制其他人层叠自己的样式
- caniuse 看浏览器对css的支持
- css是艺术, 需要用感性的思维 来学
- 学css不是学所有知识点, 而是新知识到来的时候,能很快学会
- 学css, 要学会临摹
- 不要沉迷于临摹, 多做就没有什么作用了
css调试方法
==Borde调试法==: 放在第一行: 能确定选择器有用. 如果boder正常, ==证明上面的代码没有问题==, 如果boder出问题, 那一定是上面一行的代码出问题了
去哪查资料?
-
代码问题
- mdn
- css tricks
- 张鑫旭
-
网页模板和设计
psd:
- freepik 中搜索网页模板
- dribble.com 顶级设计师社区, 搜索web
2. 文档流
什么是文档流?
html元素, 从左到右, 从上到下流动
inline元素, block元素, inline-block元素的区别是什么?
| 名称 | 特点 | width | height |
|---|---|---|---|
| inline | 到达最右边才会换行 | width由内容决定, 不能指定 | 由line-height间接决定, 和padding, height无关 |
| block | 一个占一行 | 默认自动计算宽度, 可以指定, width过小会溢出 | 由文档流元素决定, 可以指定height |
| inline-block | 类似于inline, 但是不会因为换行而中间断开. | 默认的时候和inline一样, 指定的时候和block一样 | 和block类似, 可以指定height |
写inline元素, block元素, inline-block元素有什么需要注意的?
- 不要在inline元素内写==块级元素==
- 永远不要写宽度100%
溢出的四种处理办法?
如果block元素内容超过, 指定的width,或者height. 那么就会==溢出(overflow)==, 几种办法:
- 默认visible
- hidden, 隐藏
- scroll, 可以拉动滚动条差看, 但是有==两个滚动条,不超出也有==太丑了!!
- auto, 只有当超出才有滚动条, 默认只有一个滚动条, 当内部放一个元素,width设置很宽, 会出现第二个滚动条
脱落文档流?
哪些元素脱离文档流: 用了下面两个属性:
- float
- position: absolute / fixed
3. 盒模型
请介绍一下盒模型?
有两种, 说分为1. content box, 2. boder box
width只包含content,就是==content box==, box-sizing: content-box, width包含border,就是==boder box==box-sizing: content-box
==不要使用content-box, 因为border-box更好用==
外边距合并原则?
- 外边距合并原则:两个30px 合并成一个30px. 可以用inline-block取消合并. 只有上下合并,==左右不合并==.
- 父母的margin和儿子最上面的margin,和最下面的margin合并.
取消合并的方法?
- 加padding, 或者border, 隔开margin
- 每个元素都设为
overflow: hidden
4. 单位:
- em是font-size的倍数单位
- rgb可以转为十六进制, 网上可以查到 , rgba, a是透明度
其他
***@charset "UTF-8, 中的charset指定的是什么? ***
charset 是字符集的意思, Unicode也是字符集, 但是UTF-8是==字符编码==的意思. 因为Unicode的太长了,分成三个不同的字符编码..==所以指定的是字符编码==
5. 实践画彩虹
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="rainbow">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css:
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
background:white;
}
.rainbow{
height:200px;
overflow: hidden;
}
.rainbow div{
overflow: hidden;
}
.rainbow >div{
width: 400px;
height: 400px;
background:red;
border-radius:50%;
}
.rainbow > div >div{
background: hsl(60, 80%, 50%);
height:380px;
margin: 10px;
border-radius:50%;
}
.rainbow > div >div >div{
background: hsl(120, 80%, 50%);
height:360px;
margin: 10px;
border-radius:50%;
}
.rainbow > div >div >div> div{
background: hsl(180, 80%, 50%);
height:340px;
margin: 10px;
border-radius:50%;
}
.rainbow > div >div >div> div >div{
background: hsl(240, 80%, 50%);
height:320px;
margin: 10px;
border-radius:50%;
}
.rainbow > div >div >div> div >div >div{
background: hsl(300, 80%, 50%);
height:300px;
margin: 10px;
border-radius:50%;
}
.rainbow > div >div >div> div >div >div>div{
background: hsl(330, 80%, 50%);
height:280px;
margin: 10px;
border-radius:50%;
}
.rainbow > div >div >div> div >div >div>div>div{
background: hsl(330, 80%, 100%);
height:280px;
margin: 10px;
border-radius:50%;
}
效果图:
