u_Dawn

摘要： CSS高级应用 1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出来！ 1.1 display显示（重点） display设置或检索对象是否及如何显示。 display: none 隐藏对象​display: 阅读全文

摘要： 定位 1. CSS布局的三种机制 1、普通流（标准流） 2、浮动 让盒子从普通流中浮起来——让多个盒子div水平排列成一行。 3、定位 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 ——CSS离不开定位，特别是后面的js特效。 2. 为什么使用定位 所以，我们脑海应该有三种布局机制的上下顺序 标 阅读全文

摘要： 浮动 1.浮动（float） 1.1 CSS布局的三种机制 网页布局的核心——就是用CSS来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、d 阅读全文

摘要： CSS背景 1.背景颜色（color） 语法： background-color:颜色值； 默认的值是 transparent 透明的例：background-color:pink; 2.背景图片（image） 语法： background-image:none|url(url) 参数作用 none 阅读全文

摘要： 行盒的盒模型 常见的行盒：包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点 盒子沿着内容沿伸 行盒不能设置宽高 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整 内边距（填充区） 水平方向有效，垂直方向仅会影响背景（背景变，但字体还是不动），不 阅读全文

摘要： 盒模型应用 改变宽高范围 默认情况下，width 和 height 设置的是内容盒宽高。 页面重构师：将psd文件（设计稿）制作为静态页面 问题：衡量设计稿尺寸的时候，往往使用的是边框盒，但设计width和height，则设置的是内容盒 解决办法有两种： 精确计算 CSS3：box-sizing（用 阅读全文

摘要： 盒模型 1.什么是标签的显示模式 什么是标签的显示模式？ 标签以什么方式进行显示，比如div自己独占一行，比如span一行可以放多个 作用： 我们网页的标签非常多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。 标签的类型（分类） HTML标签一般分为块标签和行内标签两种类型，也称为块元 阅读全文

摘要： 属性值的计算过程 概念： 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时： 选择器相同，则执行层叠性 选择器不同，就会出现优先级的问题。 权重计算公式 关于CSS权重，我们需要一套计算公式来去计算，这个就是CSS　Specificity特殊性。 标签选择器计算权重公式 继承或* 0, 阅读全文

摘要： 继承 子元素会继承父元素的某些(不是全部)CSS属性 通常，跟文字内容相关的属性都能被继承 例：background-color、weigh、height不能被继承 概念： 子标签会继承父标签的某些样式，如文本颜色和字号。 想要设置一个可继承的属性，只需将他应用于父元素即可。 简单的理解就是：子承父 阅读全文

摘要： 层叠 声明冲突：同一个样式，多次应用到同一个元素 层叠：解决声明冲突的过程，浏览器自动处理（权重计算） 概念： 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 原则： 样式冲突，遵循的原则 阅读全文