CSS(Part3）

CSS盒子模型

• 盒子模型

  • 页面布局三大核心：盒子模型、浮动、定位

  • 看透网页布局的本质

    • 网页布局过程：1.先准备好相关的网页元素，网页元素基本都是盒子Box；2.利用CSS设置好盒子样式，然后放到相应位置；3.往盒子里面装内容。

    • 网页布局的核心本质：用CSS摆盒子

  • 盒子模型（Box Model）组成

    • 盒子模型就是把HTML页面中的布局元素看作是一个矩形盒子，也就是一个盛装内容的容器

    • CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框border、外边距margin、内边距padding、实际内容content

    • 边框border：边框宽度（粗细）、边框样式、边框颜色

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

        • 实线边框border-style: solid;

        • 虚线边框border-style: dashed;

        • 点线边框border-style: dotted;

      • 边框的复合写法：border: 1px solid red;没有顺序

      • 边框分开写法：border-top（上边框）/border-bottom/left/right: 1px solid red;

      • 表格的细线边框border-collapse：控制相邻单元格边框

        • border-collapse: collapse;表示相邻边框合并在一起

      • 边框会影响盒子实际大小，变大

    • 内边距（padding）：边框与内容之间的距离

      • padding-left/right/top/bottom

      • 内边距的复合写法：

        • padding: 5px; 上下左右

        • padding: 5px 10px;上下，左右

        • padding: 5px 10px 20px;上，左右，下

        • padding: 5px 10px 20px 30px;上，右，下，左（顺时针）

      • padding会影响盒子实际大小，变大

      • padding应用-新浪导航栏

        • 字数不一样，给盒子相同的padding合理

      • 小米侧边栏修改

        • padding可以撑开盒子，修改宽度

      • padding不会撑开盒子的情况

        • 盒子本身没指定width/height属性

    • 外边距margin

      • 设置外边距，即控制盒子和盒子之间的距离

      • margin-left/margin-right/margin-top/margin-bottom

      • margin简写方式和padding一样

      • 外边距典型应用-块级盒子水平居中对齐

        • 条件：1.盒子必须指定了宽度；2.盒子左右的外边距都设置为auto

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

        • 常见写法

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

          • margin: auto;

          • margin: 0 auto;（常用）

            • 上下是0，左右是auto

      • 行内元素和行内块元素水平居中

        • 给父元素添加text-align: center即可

      • 外边距合并（垂直方向才有）

        • 相邻块元素垂直外边距的合并

          • 概念：上下相邻两个块元素（兄弟关系）相遇时，上盒子有下外边距，下盒子有上外边距，它们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中较大者

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

        • 嵌套块元素垂直外边距的塌陷

          • 概念：对于两个嵌套关系（父子关系）的块元素，两都有外边距，此时父元素会塌陷较大的外边距值

          • 解决方案：1.可以为父元素定义上边框；（border: 1px solid transparent（透明的）;）2.可以为父元素定义上内边距；（padding 1px;）3.可以为父元素添加overflow: hidden; 还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面学了再总结

    • 清楚内外边距

      • 网页元素有很多默认的内外边距，而且不同游览器默认的不一致，所以我们在布局前，首先要清楚网页元素的内外边距。

      • * { （通配符选择器符号）

        • padding: 0;

        • margin: 0;

      • } /* 这句话也是CSS的第一行代码*/

      • 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下。但转换为块级和行内块元素就可以了

• PS基本操作

  • 大部分切图工作都是在PS完成

  • 测量：1.截图保存，PS打开文件；2.标尺ctrl+r，右击标尺改成像素；3.放大缩小ctrl++/-，移动按空格然后鼠标动；4.用选区，选择矩形选框工具，拖动，测量大小；5.ctrl+d或点击旁边空白区域取消选区。

  • 取色：吸管工具，取色，复制。

• 综合案例

  • 小米

    • 产品模块布局分析

    • box布局

    • 图片和段落制作

    • 评价和详情制作

    • 竖线细节制作

  • 快报

    • 快报模块布局分析

    • 快报模块头部制作

    • 快报模块列表制作

      • 去掉li前面的项目符号（小圆点）

      • list-style: none;

• 圆角边框

  • border-radius: length;（数值越大，弧度越大）

  • 原理：（椭）圆与边框的交集形成圆角效果

  • 使用：

    • 参数可以是数值也可以百分比

    • 如果是正方形，数值可以直接设为50%

    • 如果是个矩形，设置为高度的一半

    • 两个值：左上右下、右上左下

    • 四个值：左上角、右上角、左下角、右下角

    • 分开写：border-top-left/right-radius、border-bottom-right/left-radius

• 盒子阴影box-shadow

  • box-shadow: h-shadow v-shadow blur spread color inset ;

  • h-shadow必需。水平阴影位置，允许负值

  • v-shadow必需。垂直阴影位置，允许负值

  • blur可选。模糊距离

  • spread可选。阴影的尺寸

  • color可选。阴影的颜色。可以这样rgba(0,0,0,.3);设透明度

  • insert可选。将外部阴（outsert（默认。不能出现））改为内部阴影

  • 不占空间

• 文字阴影text-shadow

  • text-shadow: h-shadow v-shadow blur color;

  • h-shadow必需。水平阴影位置，允许负值

  • v-shadow必需。垂直阴影位置，允许负值

  • blur可选。模糊距离

  • color可选。阴影颜色

CSS浮动

• 浮动float

  • 传统网页布局的三种方式

    • 网页布局的本质——用CSS摆盒子。

    • CSS提供的针对PC端的：普通流（标准流）、浮动、定位

      • 标准流（普通流/文档流）：标签按默认方式排列。是最基本的布局方式

  • 为什么需要浮动？很多布局效果用标准流无法完成，此时可用浮动完成。因为浮动可改变元素标签默认的排列方式。

    • 浮动最典型应用：让多个块级元素一行内排列显示

    • 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

  • 什么是浮动：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

    • 语法：选择器 { float: 属性值 ; }

      • none元素不浮动（默认）

      • left元素向左浮动

      • right元素向右浮动

  • 浮动特性（重难点）

    • 浮动元素会脱离标准流（脱标）

      • 脱离标准普通流的控制（浮）移动到指定位置（动）

      • 浮动的盒子不再保留原先的位置

    • 浮动元素会一行内显示并且元素顶部对齐

      • 之间无空隙，顶部对齐

    • 浮动元素会具有行内块元素的特性

      • 任何元素都能设置浮动，设后具有行内块特性

  • 浮动元素经常和标准流父级搭配使用

    • 为约束浮动元素位置，网页布局一般策略：

      • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准则。

  • 浮动布局练习-小米布局

  • 浮动练习-手机模块

    • 网页布局第二准则：先设置盒子大小，再设置盒子位置

• 常见网页布局

  • 画盒子，游览器一样宽指定高即可

  • 浮动布局注意：1.和标准父盒子搭配；2.一浮全浮，浮动盒子只影响其后标准流

• 清除浮动

  • 为什么？无限/父盒不方便给高度；浮动不占位，父高为0，影响其下标准流。->让孩子撑开父盒。

  • 清除浮动本质：清除浮动元素造成的影响；选择器{ clear: 属性值 }（left/right/both）

    • 清浮动策略：闭合浮动

  • 清除浮动方法：

    • 1.额外标签法（隔墙法）：在末尾添空标签（标签必块级元素）或其他如<br/>

    • 2.父添overflow属性，值：hidden/auto/scroll

    • 3.父添after伪元素：

      • .clearfix: after{

        • content:"";

        • display:block;

        • height:0;

        • clear:both;

        • visibility:hidden;

      • }

      • .clearfix{ /*IE6、7专用*/

        • *zoom:1;

      • }

    • 4.父添双伪元素：

      • .clearfix:before,.clearfix:after{

        • content:"";

        • display:table;

      • }

      • .clearfix:after{

        • clear:both;

      • }

      • .clearfix{

        • *zoom:1;

      • }

PS切图

* 常见图片格式：

* jpg(JPEG)

* 特点：高清

* 应用：产品类图片

* gif

* 特点：透明背景

* 应用：图片小动画，简单图形字体

* png

* 结合以上两者（高清+透明背景）

* 应用：背景透明图片

* PSD

* 保留图层

* 应用：方便信息提取

* 交接提醒：psd>>ps>>图层

* 实现：

* 图层切图：图层导出png

* 切片切图：切片工具>>导出为web所用格式

* ps插件切图：Cutterman（代替手动切片）

* 交接提醒：完整版>>扩展,像素大厨倒闭

定位

• 定位position

  • 为什么？元素自由在盒移动并压其他盒子

  • 定位组成：定位=定位模式（定 定位方式）+边偏移（定 最终位置）

  • 定位模式：（属性）position:（值） static/relative/absolute/fixed/skicky

  • 边偏移：（属性）top/bottom/left/right。eg:top: 80px ;

  • 子绝父相

    • 由来：1.子绝、不占位，放父任一位；2.父需加定位限制子；3.父布局需占位，相对

  • 固定到版式右侧：1.left：50%；2.margin-left版宽度一半

  • 定位叠放次序z-index

  • 定位拓展

    • 绝对定位的盒子居中left:50%,magin-left:负值

    • 定位特殊特性（类似浮动）：行内元素可设宽高，块级元素不设默认内容大小

    • 投标盒不触发外边距塌陷

    • 浮动压盒子但不压文字（文字环绕效果），绝对定位完全压住内容

• 案例-淘宝焦点图

• 网页布局总结：标准流、浮动、定位

• 元素的显示与隐藏

  • display: none/block;（搭配JS）

  • visibility（可见性）:inherit（继承父可见）/visible（常用）/hidden（常用）/collapse（对表格的）

  • overflow溢出：visible/auto（推荐）/hidden/scroll

CSS高级技巧

精灵图

* 原理：把小图像合成一张大图

* 目的：减少服务器请求次数，提高页面加载速度

* 实现：对于每个盒子，靠移动背景图片调整到图标显示位置

* 交接提醒：坐标方向

字体图标

* 特点：

* 显示图片，本质文字

* 轻量级，减少服务器请求

* 灵活修改

* 兼容性强

* 应用：

* 简单小图标：字体图标

* 复杂小图片：精灵图

* 下载网站：

* icomoon

* 阿里iconfont

* 引入：

* fonts复制一份放到页面根目录下

* 把style里面第一段复制到<style>里面

* 复制demo里面的小方框（`<span>小方框</span>`）

* 声明字体系列（`font-family:'icomoon';`和style里面的第一句声明一样）

* 追加

* incomoon>>lcoMoon App>>import>>选择selection文件>>GenerateFont F>>删掉原来的文件夹

CSS三角

• 无宽高，四边设不同颜色，三边透明

  • div {

    • width: 0;

    • height: 0;

    • line-height: 0; （照顾低版本，为兼容）

    • font-size: 0; （照顾...）

    • border: 50px solid transparent;

    • border-left-color: pink;

  • }

• 实例：京东三角

CSS用户界面样式

• 鼠标样式cursor

  • default 小白，默认

  • pointer 小手

  • move 移动

  • text 文本

  • not-allowed 禁止

• 轮廓线outline

  • 取消表单轮廓：input{outline: 0;或none;}

• 防止拖拽文本域（textarea）resize

  • textarea{ resize: none; }

  • 取消轮廓：input,textarea{outline: none;}

  • 文本域尽量在一行写，不然会有空白区域

    • <textarea name="" id="" cols="30" rows="10"></textarea>

vertical-align属性应用

• 使用场景：设置图片或表单（行内块元素）和文字垂直对齐。只针对行内元素或行内块元素有效。

• vertical-align: baseline（默认基线对齐） | top | middle | bottom

• 解决图片底部默认空白缝隙问题

  • 问题原因：默认和文字基线对齐

  • 解决：1.给图添：vertical-align: middle|top|bottom等（提倡）；2.把图片转位块级元素：display: block;。不推荐因为独占一行

溢出的文字省略号显示

• 单行文字

  • 满足条件

    • 1.先强制一行显示文本

    • white-space: nowrap;

    • （默认值normal自动换行）

    • 2.超出部分隐藏

    • overflow: hidden;

    • 3.文字用省略号替代超出部分

    • text-overflow: ellipsis;

• 多行文字

  • 有较大兼容性问题，适合webKit游览器或移动端

  • overflow: hidden:

  • text-overflow: ellipsis;

  • 弹性伸缩盒子模型显示

  • display: -webkit-box;

  • 限制在一个块元素显示的文本行数

  • -webkit-line-clamp: 2;

  • 设置或检索伸缩盒对象的子元素的排列方式

  • -wevkit-box-orient: vertical;

常见的布局技巧

• margin负值巧妙运用

  • 边框1+1=2，往左走压住一条边框：margin-left: -1;

  • 鼠标放上，边框变色，但是被压。解决：鼠标经过提高盒子层级（没定位，加相对定位（保留位置）；有定位，加z-index）

• 文字围绕浮动元素巧妙运用

  • 直接写文字，放图给图片加浮动，浮动元素不压文字

• 行内块的巧妙运用

  • 页码布局：行内块，设宽高；父亲text-align:center;就能居中；小于&lt;大于&gt;

• CSS三角巧妙运用

  • 比如淘宝价钱现价VS原价。

  • 原理：先有个矩形，再来个三角形覆盖一边，就可以变成梯形。

  • 怎么做直角三角形？左边和下边边框宽度设为0，上边框宽度变大，右边宽稍小。

    • border-color: transparent red transparent transparent ;

    • border-style: solid ;

    • border-width: 100px 50px 0 0 ;