csspress
This commit is contained in:
@@ -58,4 +58,153 @@ css 盒模型包括如下要素
|
||||
|
||||
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
||||
>
|
||||
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## css外边距合并（叠加）
|
||||
|
||||
定义： 当两个元素垂直外边距相遇时，他们形成一个外边距，合并后的外边距等于两个发生合并的外边距较大的那个值，左右外边距不会合并
|
||||
|
||||
而且只在普通文档流中会发生外边距合并的状况。 行内，浮动，绝对定位的外边距不会合并
|
||||
|
||||
|
||||
|
||||
合并的结果计算：
|
||||
|
||||
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
|
||||
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
|
||||
两个外边距一正一负时，折叠结果是两者的相加的和。
|
||||
|
||||
|
||||
|
||||
合并的原因：
|
||||
|
||||
而根据w3c规范，两个margin是邻接的必须满足以下条件
|
||||
4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
|
||||
4.2、没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
|
||||
4.3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
|
||||
a:元素的margin-top与其第一个常规文档流的子元素的margin-top
|
||||
b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
|
||||
c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
|
||||
d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
|
||||
|
||||
|
||||
|
||||
出现的情况：
|
||||
|
||||
(一）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
#outer {
|
||||
width:300px;
|
||||
height:300px;
|
||||
background-color:red;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width:50px;
|
||||
height:50px;
|
||||
background-color:blue;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部
|
||||
div 的上外边距合并（叠加）。</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
（二）
|
||||
|
||||
多个子元素外边距合并：
|
||||
|
||||
div11的高度为0 的时候，div1的margin值由 div1,div11,div12的margin合并结果决定
|
||||
|
||||
如此例中，div1的margin 值为30
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>
|
||||
盒子模型
|
||||
</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body{
|
||||
text-align:center;
|
||||
}
|
||||
div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
margin:0 auto;
|
||||
}
|
||||
#div1{
|
||||
margin-top:10px;
|
||||
background:red;
|
||||
}
|
||||
#div11{
|
||||
margin-top:20px;
|
||||
width:0;
|
||||
height:0;
|
||||
background:yellow;
|
||||
}
|
||||
#div12{
|
||||
margin-top:30px;
|
||||
width:50px;
|
||||
height:50px;
|
||||
background:blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">
|
||||
<div id="div11"></div>
|
||||
<div id="div12"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
105
csspress/6.sass和less.md
Normal file
105
csspress/6.sass和less.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# sass(scss) 与 less
|
||||
|
||||
sass 和 less 都是我们css的扩展语言，他们完全兼容css的写法 并为css添加了许多新的功能。
|
||||
|
||||
#### 下载
|
||||
|
||||
sass基于ruby语言开发而成，因此 安装sass之前需要安装Ruby
|
||||
|
||||
windows 通过Ruby 官网（https://rubyinstaller.org/downloads/） 下载并完成安装
|
||||
|
||||
安装过程中需要勾选Add Ruby executables to your PATH 添加到系统的环境变量 否则安装wanchengho
|
||||
|
||||
需要手动配置
|
||||
|
||||
如下图：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
安装完后需要测试安装是否成功，打开cmd
|
||||
|
||||
```
|
||||
ruby -v
|
||||
//如安装成功会打印
|
||||
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]
|
||||
```
|
||||
|
||||
ruby 安装完成后 可以在控制台输入下面命令安装sass
|
||||
|
||||
> gem install sass
|
||||
|
||||
|
||||
|
||||
或者用
|
||||
|
||||
#### less 安装
|
||||
|
||||
推荐使用node环境 npm 包管理器进行安装 使用如下命令：
|
||||
|
||||
```
|
||||
npm install -g less
|
||||
```
|
||||
|
||||
|
||||
|
||||
### sass 使用
|
||||
|
||||
```
|
||||
sass app.scss app.css
|
||||
```
|
||||
|
||||
使用上面命令可以将app.scss 文件编译成 app.css
|
||||
|
||||
less 编译：
|
||||
|
||||
```
|
||||
lessc test.less > test.css
|
||||
```
|
||||
|
||||
使用上面的命令可以将test.less 编译成test.css
|
||||
|
||||
|
||||
|
||||
### sass 和 less语法
|
||||
|
||||
sass 和less 完全支持css的语法
|
||||
|
||||
除此之外，还拓展了以下语法：
|
||||
|
||||
父子关系嵌套写法：
|
||||
|
||||
```
|
||||
.box{
|
||||
width:70px;
|
||||
height:70px;
|
||||
.head{
|
||||
background:red
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译出来的结果为：
|
||||
|
||||
```
|
||||
.box{
|
||||
width:70px;
|
||||
height:70px;
|
||||
}
|
||||
.box .head{
|
||||
background:red
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
其他使用变量 嵌套导入 混合器....等功能有兴趣自行拓展
|
||||
|
||||
sass中文网：
|
||||
|
||||
https://www.sass.hk/guide/
|
||||
|
||||
less中文网
|
||||
|
||||
https://less.bootcss.com/
|
||||
9
csspress/Untitled.md
Normal file
9
csspress/Untitled.md
Normal file
@@ -0,0 +1,9 @@
|
||||
通过蓝湖这样的工具 根据主流分辨率来更改设计图的缩放比例
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
29
csspress/css重点内容.md
Normal file
29
csspress/css重点内容.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# css 重点内容
|
||||
|
||||
- 盒模型
|
||||
|
||||
- 块级元素和内联元素
|
||||
- 会画盒模型的线框图
|
||||
- padding margin border...属性的认识
|
||||
- 会计算盒模型中元素的宽度和高度
|
||||
|
||||
- 定位
|
||||
|
||||
- static
|
||||
- relative
|
||||
- absolute
|
||||
- fixed
|
||||
|
||||
- 浮动和flex
|
||||
|
||||
- float
|
||||
- flex
|
||||
|
||||
- 自适应和响应式
|
||||
|
||||
- 媒体查询
|
||||
- rem
|
||||
- 百分比
|
||||
|
||||
|
||||
|
||||
@@ -9,24 +9,55 @@
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 600px;
|
||||
background:red;
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 300px;
|
||||
background: gold;
|
||||
margin: 20px;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
width:60px;
|
||||
height: 60px;
|
||||
position: sticky;top: 10px;
|
||||
background: red;
|
||||
/* background: rgba(255, 0, 0, 0.363); */
|
||||
float: left;
|
||||
|
||||
|
||||
}
|
||||
.box2{
|
||||
background: gold;
|
||||
width: 120px;
|
||||
height:80px;
|
||||
background: gray;
|
||||
border: 1px solid pink;
|
||||
/* float:right */
|
||||
float: right;
|
||||
}
|
||||
.a{
|
||||
/* width: 70px;
|
||||
height: 70px;
|
||||
border: 1px solid blue;
|
||||
background: pink; */
|
||||
clear: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box">
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box2">1</div>
|
||||
<div class="box2">2</div>
|
||||
<div class="box2">3</div>
|
||||
<div class="box2">4</div>
|
||||
<div class="box2">5</div>
|
||||
<div class="box2" style="height: 180px;">6</div>
|
||||
<div class="a"></div>
|
||||
<div>nhjksahkihfi</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- -->
|
||||
<html lang="en">
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<title>
|
||||
盒子模型
|
||||
</title>
|
||||
<style>
|
||||
.box{
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
background:orange;
|
||||
}
|
||||
.item1{
|
||||
width: 40%;
|
||||
height:80%;
|
||||
background: paleturquoise;
|
||||
float: left;
|
||||
}
|
||||
.item2{
|
||||
width:40%;
|
||||
height: 80%;
|
||||
background: blue;
|
||||
float: right;
|
||||
}
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body{
|
||||
text-align:center;
|
||||
}
|
||||
div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
margin:0 auto;
|
||||
}
|
||||
#div1{
|
||||
margin-top:10px;
|
||||
background:red;
|
||||
}
|
||||
#div11{
|
||||
margin-top:20px;
|
||||
width:0;
|
||||
height:0;
|
||||
background:yellow;
|
||||
}
|
||||
#div12{
|
||||
margin-top:30px;
|
||||
width:50px;
|
||||
height:50px;
|
||||
background:blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="item1"></div>
|
||||
<div class="item2"></div>
|
||||
</div>
|
||||
<div id="div1">
|
||||
<div id="div11"></div>
|
||||
<div id="div12"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user