目标：能认识不同选择器的 优先级 公式，能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题
（1）特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
（2）优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
(选择器选中范围越广，优先级越低)
（3）注意点：
<1>!important写在属性值的后面，分号的前面！
<2>!important不能提升继承的优先级，只要是继承优先级最低！
<3> 实际开发中不建议使用 !important 。
<style>
#box{
color: orange;
}
.box{
color: blue;
}
div{
color: green !important;
}
body{
color: red;
}
</style>
</head>
<body>
<!-- 意义：当一个标签使用了多个选择器，样式冲突的时候，到底谁生效 -->
<div class="box" id="box" style="color: pink;">优先级测试</div>
</body>
（1）场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
<style>
/* #one {
color: red;
}
.son {
color: blue;
}
p {
color: green;
} */
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
目标：能够使用 PxCook 工具测量设计图的 尺寸 和 颜色 ，能够从psd文件中直接获取数据
（1）通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目
（2）常用快捷键
a. 放大设计图：ctrl + +、alt+向上滚动
b. 缩小设计图：ctrl + -、alt+向下滚动
c. 移动设计图：空格按住不放，鼠标拖动
(3) 常用工具
目标：能够认识 盒子模型的组成 ，能够掌握盒子模型 边框、内边距、外边距 的设置方法
（1） 盒子的概念
<1>页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
<2>浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
(2)盒子模型
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
<style>
/* 纸箱子，填充泡沫 */
div{
width: 300px;
height: 300px;
background-color: pink;
/* 边框线==纸箱子 */
border: 1px solid #000;
/* 内边距==填充泡沫：出现在内容和盒子边缘之间 */
padding: 20px;
/* 外边距：出现在两个盒子之间，出现在两个盒子的外面 */
margin: 50px;
}
</style>
（1）作用：利用width和height属性默认设置是盒子内容区域的大小
（2）属性：width / height
（3）常见取值：数字+px
(1)作用：给设置边框粗细、边框样式、边框颜色效果
(2)单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线soild、虚线dashed、点线dotted |
| 边框颜色 | border-color | 颜色取值 |
（1）属性名：border
（2）属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
（3）快捷键：bd + tab
（1）场景：只给盒子的某个方向单独设置边框
（2）属性名：border - 方位名词（left、right、top、bottom）
（3）属性值：连写的取值
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* border: 1px solid #000; */
/* solid:实线 */
/* dashed:虚线 */
/* dotted:点线 */
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div>内容</div>
</body>
需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
• 注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决：当盒子被border撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）
➢ 需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果
➢ 布局顺序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box a{
width: 80px;
height: 40px;
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 40px;
color: #4c4c4c;
font-size: 12px;
}
.box a:hover{
background-color: #edeef0;
color: #ff8400;
}
</style>
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
</html>
（1）作用：设置边框与内容区域之间的距离
（2）属性名：padding
（3）常见取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding：10px; | 上右下左都设置为10px |
| 两个值 | padding：10px 20px | 上下设置为10px,左右设置为20px |
| 三个值 | padding：10px 20px 30px | 上设置为10px,左右设置为20px,下设置为30px |
| 四个值 | padding：10px 20px 30px 40px | 上设置为10px，右设置为20px、下设置为30px、左设置为40px |
记忆规则：从上开始赋值，然后顺时针赋值，如果没有设置赋值的，看对面
div{
width: 300px;
height: 300px;
background-color: pink;
/* 添加了4个方向的内边距 */
padding: 50px;
/* padding 属性可以当作复合属性使用，表示单独设置某个方向的内边距 */
/* padding 最多4个值 顺序：上右下左 */
/* padding: 10px 20px 40px 80px; */
/* padding 取3个值 顺序：上 左右 下*/
/* padding: 10px 20px 40px; */
/* padding 取两2值 顺序：上下 左右 */
padding: 10px 20px;
}
</style>
(1)场景：只给盒子的某个方向单独设置内边距
(2)属性名：padding - 方位名词
(3)属性值：数字 + px
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border和padding撑大后，如何满足需求？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 240px;
height: 240px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
➢ 需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？
/* width: 80px; */
padding: 0 16px;
在元代码基础上删掉width,加上padding，设置上下为0，左右为一定距离
不会撑大盒子的特殊情况（块级元素）
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 变成CSS3盒子模型，好处：加了border和padding不需要手动减法 */
box-sizing: border-box;
}
</style>
（1）作用：设置边框以外，盒子与盒子之间的距离
（2）属性名：margin
（3）常见取值：
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin：10px; | 上右下左都设置为10px |
| 两个值 | margin：10px 20px | 上下设置为10px,左右设置为20px |
| 三个值 | margin：10px 20px 30px | 上设置为10px,左右设置为20px,下设置为30px |
| 四个值 | margin：10px 20px 30px 40px | 上设置为10px，右设置为20px、下设置为30px、左设置为40px |
记忆规则：从上开始赋值，然后顺时针赋值，如果没有设置赋值的，看对面
（1）场景：只给盒子的某个方向单独设置外边距
（2）属性名：margin - 方位名词
（3）属性值：数字 + px
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
版心是指网页的有效内容
代码：margin: 0 auto;
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
➢ 需求：根据设计图，通过PxCook量取数据，代码在网页中完成一致的效果
➢ 布局顺序：
/* 去掉列表的符号 */
ul{
list-style: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.news{
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2{
font-size: 28px;
border-bottom: 1px solid #ccc;
padding-bottom: 13px;
}
/* 去掉列表的符号 */
ul{
list-style: none;
}
.news li{
height: 50px;
border-bottom: 1px dashed #ccc;
line-height: 50px;
padding-left: 28px;
}
.news a{
text-decoration: none;
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">体验javascript的魅力</a></li>
<li><a href="#">jquery世界来临</a></li>
<li><a href="#">网页设计师的梦想</a></li>
<li><a href="#">jquery中的链式编程是什么</a></li>
</ul>
</div>
</body>
</html>
➢ 场景：水平布局的盒子，左右的margin正常，互不影响
➢ 结果：最终两者距离为左右margin的和
场景：垂直布局的块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可
➢ 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
➢ 场景：给行内元素设置margin和padding时
➢ 结果：
<style>
span{
margin: 100px;
padding: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<!-- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效 -->
<!-- 行内标签的margin-top和bottom 不生效 -->
<!-- 行内标签的padding-top或bottom 不生效 -->
<span>span</span>
<span>span</span>
</body>
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah
我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢
我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:
对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案
ruby如何管理内存。例如:如果我们在执行过程中采用C程序，则以下是内存模型。类似于这个ruby如何处理内存。C:__________________|||stack|||------------------||||------------------|||||Heap|||||__________________|||data|__________________|text|__________________Ruby:? 最佳答案 Ruby中没有“内存”这样的东西。Class#allocate分配一个对象并返回该对象。这就是程序