识点1：CSS3

CSS3是CSS语言的最新版本，旨在扩展CSS2.1，它增加了许多新特性与新的布局方式。

为了加快那些已经确认没有问题的特性的标准化速度，CSS3划分了一系列相互独立的模块，按照各自进度来进行标准化。因此现在标准CSS包括修订后的CSS2.1以及完整模块对它的扩充，模块的level数并不一致。W3C会定期发布snapshots（快照），列出CSS2.1和成熟的模块。

有的CSS模块已经十分稳定，使用时也不必添加前缀，其状态为CSSWG规定的三个推荐品级之一：候选推荐、建议推荐或推荐。不稳定的特性应以浏览器引擎为前缀并谨慎使用。

知识点2：颜色模块Level3

1.增加opacity属性，用于指定元素透明度，可为0.0~1.0。被应用元素和其子元素会被当成一个整体看待，具有相同透明度，即便子元素有不同opacity值；

2.可使用hsl()、hsla()、rgba()、rgb()来创建color值；

3.transparent颜色目前是真彩色而且是rgba(0, 0, 0, 0.0)的别名。

知识点3：选择器Level3

1.增加子串匹配的属性选择器，E[attribute^="value"]，E[attribute$="value"]，E[attribute*="value"]；

2.增加新的伪类，如:enabled，:disabled，:checked，:nth-child，:nth-of-type，:empty，:not等；

3.伪元素使用两个冒号而不是一个冒号来表示；

4.新的普通兄弟选择器~，用于选择“某元素后所有同级的指定元素”。

知识点4：媒体查询

使用@media媒体查询，可以针对不同的设备定义不同的样式。其包含一个可选的媒体类型和零或多个媒体特性表达式（表达式要用括号），语法为：@media mediatype and|not|only (media feature) {CSS-Code;}，也可以在link中使用media="mediatype and|not|only (media feature)"属性来针对不同媒体使用不同样式表。

可以使用not（对整个媒体查询取反）、and（同时满足）和only（防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式）来构建复杂的媒体查询。若使用了not或only则必须指定一个媒体类型。也可以将多个媒体查询以逗号分隔放在一起，相当于or。

常见媒体查询有：

//宽高比为16:9或者16:10的宽屏设备

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { CSS-Code }

//向显示在设备最大宽度800px的屏幕上的文档应用样式表

<link rel="stylesheet" media="screen and (max-device-width: 800px)" />

//设备处于竖屏模式

@media all and (orientation: portrait) { CSS-Code }

//可视区域的宽度在500到800px之间的屏幕

@media screen and (min-width: 500px) and (max-width: 800px) { CSS-Code }

知识点5：背景与边框模块Level3

1.支持多背景图片，例：background-image:url(bg_flower.gif),url(bg_flower_2.gif);

2.新增属性background-size规定背景图片的尺寸，例：background-size:63px 100px;

3.新增属性background-origin规定背景图片的定位区域，例：background-origin:content-box;

4.支持圆角边框：border-radius，该属性是一个简写属性，也可分别设置四个属性：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。例：border-radius:25px;

5.支持图片创建边框：border-image，该属性是一个简写属性，用于设置border-image-source图片路径、border-image-slice图片边框向内偏移、border-image-width图片边框宽度、border-image-outset图像区域超出边框的量、border-image-repeat是否平铺铺满或拉伸。例：border-image:url(border.png) 30 30 round;

6.支持元素阴影：box-shadow。例：box-shadow: 10px 10px 5px #888888;前两个值必须，为水平阴影与垂直阴影的位置。

知识点6：值和单位模块Level3

1.initial（最初值）和inherit（从父元素继承值）关键字能被用于任意CSS属性中；

2.定义了新的相对字体长度单位：rem和ch。rem相对于html的font-size，而1ch=1英文=1数字=0.5汉字。

3.定义了相对视口长度单位：vm，vh，vmax和vmin。vw为可视区域宽度，总宽度为100vw，vh为可视区域高度，总高度100vh，vmin在可视区域宽度和高度取小，vmax则取大。

知识点7 . 盒模型

7.01 、盒子模型的概念

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容，内边距(padding)，边框(border)和外边距(margin)组成。

a、网页就是多个盒子嵌套排列的结果

b、内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中

c、外边距是该元素与相邻元素之间的距离

d、如果给元素定义边框属性，边框将出现在内边距和外边距之间

注意:虽然盒子模型拥有内边距，边框，外边框，宽和高这些基本属性，但是并不是要求每个元素都必须定义这些属性。

2 . 边框属性

border：设置元素的边框（width stylecolor）/四边宽度，四边样式，四边颜色

border-width：设置元素边框的宽度、像素值

border-style：设置元素边框的样式 none：无(默认)/solid(单实线)/dashed(虚线)/dotted(点线)/double(双实线)

border-color：设置元素边框的颜色

7.01、单独设置元素上边框

border-top ：宽度/样式/颜色

border-top-width ：宽度

border-top-style ：样式

border-top-color：颜色

7.02、单独设置元素右边框

border-right：宽度/样式/颜色

border-right-width：宽度 border-right-style：样式 border-right-color：颜色

7.03、单独设置元素的下边框

border-bottom：宽度/样式/颜色

border-bottom-width：宽度

border-bottom-style：样式

border-bottom-color：颜色

7.04、单独设置元素的左边框

border-left：宽度/样式/颜色

border-left-width：宽度

border-left-style：样式

border-left-color：颜色

7.05、综合设置边框

像border，border-top等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。

常用的复合属性有font、border、margin、padding和background等。

复合属性可以简化代码，提高页面的允许速度，但是如果只有一项值，最好不要用复合属性，以免样式不被兼容。

Tips:

a. 表单的边框通常改为0;

Border：0 none；//兼容所有浏览器

b. 表格的细线边框

Table{border-collapse：collapse；}

c. 轮廓(链接有虚线和文本框有蓝色边框)

Outline-style：none；

Padding属性用于设置内边距,也是复合属性,相关设置如下:

Padding-top：上内边距

Padding-right：右内边距

Padding-bottom：下内边距

Padding-left：左内边距

Padding：上内边距、右内边距、下内边距 、左内边距

内边距是享有背景色的

7.06、外边距属性

Margin属性用于设置外边框,也是复合属性,相关设置如下：

Margin-top：上外边距

Margin-right：右外边距

Margin-bottom：下外边距

Margin-left：左外边距

Margin：上外边距/右外边距/下外边距/左外边距

Margin相关属性的值，以及符合属性margin取1~4个值得情况与padding相同

外边距可以使用负值，使相邻元素重叠

对块元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局,实例代码如下：

.header{width:960px;margin:0 auto};

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

*{padding:0 /*清除内边距*/

Margin:0; /*清除外边距*/}

清屏中1px线问题

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在retina屏机型中，1px会比较粗，即是较经典的移动端1px像素问题。

为什么高清屏下1px更宽

高清屏（retina屏）是指高dpr的设备，其物理像素的密度更大。又分为有两倍屏，三倍屏。

dpr:物理像素/css像素

在普通屏，1个css像素对应1个物理像素；2倍屏中，一个css像素对应4个物理像素；三倍屏中则是9个。

按照这样的置换规则后一张相同的图片在不同的设备上才会显示相同的大小。

1px的线在高清屏下本应不需要做特殊处理。两倍屏下会自动用两排物理像素去展示‘1px’的细线，普通屏用一排物理像素去展示‘1px’的细线，他们应该看起来是相同的。但是，就像数学中的概念：线是没有宽度的，点是没有大小的。像素同样是没有大小的。

两倍屏的物理像素密度是普通屏的两倍，并不是每一个物理像素是普通屏的1/4大小，而是物理像素的间距是普通屏间距的1/2。

用两倍屏下用两排像素去展示，自然会比普通屏中用一排像素去展示看起来更粗。

如何修正高清屏下的1px问题

要解决1px问题，本质就是让高清屏用一个物理像素去展示一个css像素。

可以按照不同屏幕的dpr作出转换，比如在2倍屏下将1px的细线写成border:0.5px。但这种方法只在ios上支持，安卓上会显示成被当成0px处理。

更通用的方案中，有svg和伪类元素两种。

SVG方案

这种方案本质上border并没有变细，但是boder被一分为二，靠内侧的是透明的。

关键的样式代码是css中的svg生成函数。

SVG即矢量图，用xml标签写在html文件中。

通过postcss-write-svg这个postcss插件将css中svg函数生成的图像处理成base64。这样就可以在css文件直接调用svg函数。

/* src/index.css */
@svg custom-name { 
  width: 4px;  
  height: 4px;  
   @rect {
       fill: transparent;
       width: 100%;
       height: 100%;
       stroke-width: 1;
       stroke: var(--color, black);  
    }
}
.svg-retina-border {
    border: 1px solid;
    border-image: svg(custom-name param(--color green)) 1 repeat;
}
.normal-border {
    border: 1px solid green;
}

处理过后的样子

剩余完整代码

import './index.css'
const root = document.getElementById('root')
const div2 = document.createElement('div')
div2.innerHTML = 'SVG-retina-border'
div2.className = 'svg-retina-border'
root.append(div2)
root.append(document.createElement('br'))
const div3 = document.createElement('div')
div3.innerHTML = 'normal-border'
div3.className = 'normal-border'
root.append(div3)

<!-- src/index.html -->
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />    	 		 <title>Document</title>
    </head>  
    <body>    	
        <div id="root"></div>  
    </body>
</html>

// webpack.config.js
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
module.exports = {
	mode: 'development',
    entry: {
    	entry1: './src/index.js'  
    },  
    output: {
    	path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'  
    },  
    module: {
    	rules: [{
        	test: /\.css$/,
            use: ['style-loader', 'css-loader', 'postcss-loader']
        }]  
    },  
    plugins: [
    	new HtmlPlugin({
        	template: './src/index.html'    
        }) 
    ],  
    devServer: {
    	contentBase: path.resolve(__dirname, 'dist'),
        host: '0.0.0.0', 
        port: 3005,
        compress: true,
        disableHostCheck: true  
    }
}

SVG

分别直接用xml的svg标签和css实现了两个100px，边框宽为1的矩形。

高清屏下效果如下。

 <-- 视口大小-->  
  <svg xmlns="custom-namespace" width="100" height="100">
      <rect        
      <--矩形大小-->
      width="100"
      height="100"
      fill="transparent"
      <--svg中所有的单位都是px-->
      stroke-width="1"
      stroke="black"      
      />    
  </svg>    
  <div style="width: 100px;height: 100px;border: 1px solid black;box-sizing: border-box;"></div>

stroke-width和border一样，都将矩形的边设为了1px，但是用svg实现的矩形边框看起来却更细。关键的地方是使用svg标记的视口大小和使用rect标记的矩形大小是相同的。

svg中没有盒模型的概念，它的stroke画线并不是对应css中的border。更像是不占空间的outline。因为不占空间，它会以rect（矩形）的边界为中心画线，一条线一半宽度在矩形内，一半在矩形外。

而因为视口宽度正好等于矩形的大小，看到的线宽就只有一半了。

（用svg画一个100px大小+1px边宽的方形）

(用css画一个100px大小+1px边框的方形border-box)

如果把矩形缩小一点，不占满视口，这时候看到的border是完整的，所以和没处理过的1px一样粗。

border-image

border-image是三个属性的缩写

border-image-source: url('https://misc.aotu.io/leeenx/border-image/box.png');
border-image-slice: 33% 20% 3 fill;
border-image-repeat: stretch;

• border-image-source：图片链接或base64；
• border-image-slice：图片切割的四个位置。把图片切成9块，除中间一块，其他八块分别被当成边框使用。接受1-4个参数（使用类似于padding/margin的尺寸设置）。可以是百分比（相对于图片自身），也可以是数字（单位是px）。最后的fill决定中间那块图片会不会被当成background使用。
• border-image-repeat：stretch/round（平铺）/repeat（重复）上下左右四个正位的图片怎样被当成border使用。
• round（平铺）会压缩，repeat（重复）会剪裁。

border-image必须配合border使用。最终border宽度是border-width。border-style也必须指定，border-color可以不用。

伪类元素方案

完整代码

// index.html
<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="./index.css" />  
    </head> 
    <body> 
        <div class="retina-border">retina border</div>
        <br />   
        <div class="normal-border">normal border</div> 
    </body>
</html>

// index.css
.retina-border {
	position: relative;
}
.retina-border::before {
	content: '';  
	position: absolute;
    width: 100%;
    height: 100%; 
    transform-origin: left top;
    box-sizing: border-box;
    pointer-events: none; 
    border-width: 1px;
    border-style: solid;
    border-color: #333;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {  .retina-border::before {   
	width: 200%; 
    height: 200%; 
    transform: scale(0.5); 
    }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {  .retina-border::before {  
	width: 300%; 
    height: 300%;   
    transform: scale(0.33);
    }
}
.normal-border { 
	border: 1px solid #333;
}

具体实现

以两倍屏为例

.retina-border {
	position: relative;
}
.retina-border::before { 
	content: ''; 
    position: absolute;
    top: 0px; 
    right: 0px; 
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;  
    box-sizing: border-box;
    pointer-events: none; 
    border-width: 1px;  
    border-style: solid;
    border-color: #333;
}

通过一个伪类选择器在retinaborder元素中加了一个子元素

border-width: 1px将边框的宽度设为1px。

width:200%然后将伪类元素的宽高都设置成父元素的2倍。(但是边框还是1px)

transform:scale(0.5)将伪类元素的x，y轴方向都缩放到0.5倍。

通过两次尺寸的设置，使这个伪类子元素保持内容的大小还是和父元素一样，但是border:0.5px的效果。

pointer-events: none当有元素的层级重叠时，鼠标点击是无法穿透的。即绝对定位的伪类元素的层级更高，它底下的元素（即文字：retina border)无法被事件触发。置为none时，绝对定位的元素不触发事件，底下的那层才能被选中。

其他css样式作用

• 伪类元素默认的display:inline。而position：absolute会使元素display:block。只有块级元素的尺寸(宽/高)设置才是有效的。
• 其中伪类选择器中content是必填项，不然无法生效
• transform-origin的缩放的中心点，默认是元素中心,
• transform-origin的缩放的中心点，默认是元素中心,和绝对定位的top，right一样，相对的是padding+content部分整个空间的位置
• 绝对定位的元素其top和right值是相对于padding+content的，默认值是从content开始，所以要规定都是0，否则当父元素有padding时，border就移位了

（如果删去position：absolute）

（如果删去position：absolute+display:block）

当使用百分比时，其父元素的高度必须显式指定，（20px/20view）不能是由子元素撑开的，但是宽度是可以的。

两种方案比较

兼容性

svg方案经过postcss处理，最终会影响浏览器兼容性的是border-image属性

伪类元素元素：方案最终影响兼容性的是transform属性

1598076296220

结论：svg方案的兼容性更好。

灵活性

由于svg只能画出特定的形状，所以无法实现圆角边框。而伪类元素方案可以。

学习成本

svg方案所用到的border-image属性、svg特性的理解成本较高，并且需要postcss-write-svg处理。伪类元素方案相较简单。

总结

通常情况，伪类元素方案更好，无论是从成本还是灵活性出发。如果是为了更高的兼容性选择svg方案，border-image属性一定要使用缩写。（不然兼容性会更差兼容性测试）

人熟悉前端(html,css,js,vue等)，后端(python)，爬虫，小程序等，老板有需求私信联系我

第01阶段.前端基础.盒子模型

盒子模型（CSS重点）

css学习三大重点： css 盒子模型 、 浮动 、 定位

主题思路：

目标：

• 理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法
• 应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例

1.看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

• 看透网页布局的本质：首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。以上两步 就是网页布局的本质

我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白 这个盒子有什么特点。

2. 盒子模型（Box Model）

• 所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。总结：盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

• 盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框
• 盒子内容与边框的距离是内边距（类似单元格的 cellpadding)盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

标准盒子模型

3. 盒子边框（border）

• 语法：

border : border-width || border-style || border-color 

• 边框的样式：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线(最为常用的)dashed：边框为虚线 dotted：边框为点线

3.1 边框综合设置

border : border-width || border-style || border-color 

例如：

 border: 1px solid red;  没有顺序  

3.2 盒子边框写法总结表

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

3.3 表格的细线边框

• 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
• 但是两个单元格之间的边框会出现重叠，从而使边框变粗
• 通过css属性：table{ border-collapse:collapse; } collapse 单词是合并的意思border-collapse:collapse; 表示相邻边框合并在一起。

<style>
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
    table, td {
        border-collapse: collapse;  /*合并相邻边框*/
    }
</style>

4. 内边距（padding）

4.1 内边距：

padding属性用于设置内边距。 是指 边框与内容之间的距离。

4.2 设置

当我们给盒子指定padding值之后， 发生了2件事情：

1. 内容和边框 有了距离，添加了内边距。
2. 盒子会变大了。

注意： 后面跟几个数值表示的意思是不一样的。

我们分开写有点麻烦，我们可以不可以简写呢？

4.3 课堂案例： 新浪导航

新浪导航栏的核心就是因为里面的字数不一样多，所以我们不方便给宽度，还是给padding ，撑开盒子的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪导航栏案例</title>
    <style>
    /*清除元素默认的内外边距*/
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            height: 41px;
            background-color: #FCFCFC;
            /*上边框*/
            border-top: 3px solid #FF8500;
            /*下边框*/
            border-bottom: 1px solid #EDEEF0;
        }
        .nav a {
            /*转换为行内块*/
            display: inline-block;
            height: 41px;
            line-height: 41px;
            color: #4C4C4C;
            /*代表 上下是 0  左右是 20 内边距*/
            padding: 0 20px;
            /*background-color: pink;*/
            text-decoration: none;
            font-size: 12px;
        }
        .nav a:hover {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>
</html>

4.4 内盒尺寸计算（元素实际大小）

• 宽度Element Height = content height + padding + border （Height为内容高度）
• 高度Element Width = content width + padding + border （Width为内容宽度）
• 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

    <style>
        div {
            width: 180px;
            height: 200px;
            background-color: pink;
            /*添加10px 内边距 左右 上下*/
            padding: 10px;
            /*盒子的实际大小 =  内容宽度 高度 +  内边距 +  边框*/
                  /*           =   200  +  20  +  0
                             =   220  */
             /*解决的方法：
                内边距一定要给的， 我们只能改变 内容宽度 width 让他减去 多出来的内边距就可以了*/
                /*200 - 20  =  180 */
        }
    </style>

4.5 内边距产生的问题

• 问题会撑大原来的盒子
• 解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

4.6 padding不影响盒子大小情况

如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

5. 外边距（margin）

5.1 外边距

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

5.2 设置：

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

5.3 块级盒子水平居中

• 可以让一个块级盒子实现水平居中必须：盒子必须指定了宽度（width）然后就给左右的外边距都设置为auto，

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

常见的写法，以下下三种都可以。

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

5.4 文字居中和盒子居中区别

1. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
2. 块级盒子水平居中 左右margin 改为 auto

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

5.5 插入图片和背景图片区别

1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

 img {  
        width: 200px;/* 插入图片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入当图片也是一个盒子 */
    }

 div {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
        background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
    }

5.6 清除元素的默认内外边距(重要)

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：

• 行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

5.7 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
• 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

(2). 嵌套块元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
• 父元素的上外边距会与子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者

解决方案：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
            /*嵌套关系 垂直外边距合并  解决方案 */
            /*1. 可以为父元素定义上边框  transparent 透明*/
            /*border-top: 1px solid transparent;*/
            /*2. 可以给父级指定一个 上 padding值*/
            /*padding-top: 1px; */
            /*3. 可以为父元素添加overflow:hidden。*/
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

6. 盒子模型布局稳定性

• 学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。

我们根据稳定性来分，建议如下：

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

  width >  padding  >   margin   

• 原因：margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。width 没有问题我们经常使用宽度剩余法 高度剩余法来做。

7. ps基本操作以及常用快捷键：

因为网页美工大部分效果图都是利用ps 来做的，所以，以后我们大部分切图工作都是在ps里面完成。

• 文件--打开 -- 可以打开 我们要测量的图片
• ctrl+r 可以打开标尺 或者 视图 -- 标尺
• 右击标尺， 把里面的单位改为 像素
• ctrl+ 加号 键 可以 放大 视图 ctrl+ 减号 缩小视图
• 按住空格键， 鼠标可以 变成小手 ，拖动 ps 视图
• 用选区 拖动 可以 测量 大小
• ctrl+ d 可以取消选区 或者旁边空白处点击一下也可以取消选区

去掉列表默认的样式

无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下

li { list-style: none; }

9. 今日总结

拓展@

以下我们讲的CSS3部分新属性， 但是我们遵循的原则是，以下内容，不会影响我们页面布局， 只是样式更好看了而已。

1.圆角边框(CSS3)

• 语法：

border-radius:length;  

• 其中每一个值可以为 数值或百分比的形式。
• 技巧： 让一个正方形 变成圆圈 border-radius: 50%;

• 
  
• 以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。
• 而我们这里矩形就只用 用 高度的一半就好了。精确单位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /*border-radius: 100px;*/
            border-radius: 50%;
        }
        p {
            width: 100px;
            height: 20px;
            background-color: red;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div> </div>
    <p> 特价 免费送 </p>
</body>
</html>

2. 盒子阴影(CSS3)

• 语法:

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

• 前两个属性是必须写的。其余的可以省略。
• 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset

div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
            /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
            
}

CSS书写规范

开始就形成良好的书写规范，是你专业的开始。

空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例：