05 css三大特性 盒子模型 ps基本操作
css三大特性
层叠性
含义
-
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
-
样式不冲突，不会层叠
例子
<link rel="stylesheet" href="./css三大特性.css">
<div id="div01">层叠性</div>
css三大特性.css
#div01 {
color: aliceblue;
}
#div01 {
color: red;
}
/*上下两个id选择器起冲突，执行下面的样式声明*/
继承性
含义
子标签会继承父标签的某些样式，如文本颜色和字号。
恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
子元素可以继承父元素的样式：
（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高的继承性
-
行高可以跟单位也可以不跟单位
-
如果子元素没有设置行高，则会继承父元素的行高为 1.5
-
此时子元素的行高是：当前子元素的文字大小 * 1.5
-
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
例子
<link rel="stylesheet" href="./css三大特性.css">
<div id="div02">
<p id="p01">继承性</p>
</div>
css三大特性.css
#div02 {
color: blue;
font:12px/1.5 Microsoft YaHei;
background-color: red;
}
优先级
含义
当同一个元素指定多个选择器，就会有优先级的产生。
-
选择器相同，则执行层叠性
-
选择器不同，则根据选择器权重执行
优先级权重
-
继承 * 0,0,0,0
-
元素选择器 0,0,0,1
-
类选择、伪类选择器 0,0,1,0
-
id选择器 0,1,0,0
-
行内样式 style="" 1,0,0,0
-
!important 重要的 =无穷大
注意点
-
权重是有4组数字组成,但是不会有进位。
-
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
-
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
-
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
-
继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。
例子
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
-
div ul li ------> 0,0,0,3
-
.nav ul li ------> 0,0,1,2
-
a:hover ------> 0,0,1,1
-
.nav a ------> 0,0,1,1
<link rel="stylesheet" href="./css三大特性.css">
<div id="div03">
<p id="p02">继承 0,0,0,0</p>
<span>元素选择器 0,0,0,1</span><br/>
<span class="span_class">类选择器 0,0,1,0</span><br/>
<span>伪类选择器 0,0,1,0</span><br/>
<span id="span01" class="span_class">
id选择器 0,1,0,0
</span>
<br/>
<span style="color: aqua;" id="span02">
行内样式 1,0,0,0
</span>
<br/>
<span style="color: brown" id="span03">
!important 无穷大
</span>
<br/>
</div>
css三大特性.css
#div03 {
color: red;
}
#p03 {
color: skyblue;
}
span {
color: slateblue;
}
.span_class {
color: slategray;
}
#div03>span:nth-child(4) {
color: springgreen;
}
#span01,#span02 {
color: tomato;
}
#span03 {
color:yellow!important ;
}
盒子模型
网络布局的本质
网页布局的核心本质： 就是利用 CSS 摆盒子。
网页布局过程：
-
先准备好相关的网页元素，网页元素基本都是盒子 Box 。
-
利用 CSS 设置好盒子样式，然后摆放到相应位置。
-
往盒子里面装内容
盒子模型的组成
盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容
边框border
border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；
属性
边框宽度(粗细） border-width
单位是px
例子
#div01 {
border-width: 10px;
}
边框样式 border-style
属性值
-
none ：没有边框即忽略所有边框的宽度（默认值）
-
solid ：边框为单实线(最为常用的)
-
dashed ：边框为虚线
-
dotted ：边框为点线
例子
#div02 {
border-width: 10px;
border-style: solid;
}
边框颜色 border-color
例子
#div03 {
border-width: 10px;
border-style: dashed;
border-color: red;
}
边框合并border-collapse
是否合并相邻的边框
例子
<link rel="stylesheet" href="./盒子模型.css">
<table cellspacing=0>
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今天搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="./images/down.jpg"/></td>
<td>345</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="./images/down.jpg"/></td>
<td>124</td>
<td>675432</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="./images/up.jpg"/></td>
<td>212</td>
<td>7654</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="./images/up.jpg"/></td>
<td>23</td>
<td>75645</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="./images/down.jpg"/></td>
<td>121</td>
<td>7676</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="./images/up.jpg"/></td>
<td>576576</td>
<td>1231421</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="./images/up.jpg"/></td>
<td>234</td>
<td>7686</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</tbody>
</table>
盒子模型.css
table,
th,
td {
border: 1px solid pink;
/*合并相邻的边框*/
border-collapse: collapse;
text-align: center;
}
综合写法
border : border-width|| border-style || border-color;
例子
#div04 {
border: 10px dotted red;
}
按边分写
border可以拆分为border-top，border-bottom，border-left，border-right四个部分，分别代表上下左右的边框
例子
#div09 {
border-top-width: 10px;
border-top-style: solid;
border-top-color: orange;
border-bottom: 10px solid yellow;
border-left: 10px solid green;
border-right: 10px solid blue;
}
补充
边框会额外增加盒子的实际大小。因此我们有两种方案解决：
-
测量盒子大小的时候,不量边框。
-
如果测量的时候包含了边框,则需要 width/height 减去边框宽度
内边距padding
padding 属性用于设置内边距，即边框与内容之间的距离。
语法
按边分写
属性
padding-left
padding-right
padding-top
padding-bottom
例子
#div10 {
width: 100px;
height: 50px;
background-color: pink;
padding-left: 10px;
}
综合写法
语法
padding:1px;全体方位都有1px内边距
padding:1px 2px;上下内边距是1px,左右内边距是2px
padding:1px 2px 3px;上内边距1px,左右内边距是2px,下内边距是3px
padding:1px 2px 3px 4px;上内边距1px,右内边距是2px,下内边距是3px,左内边距是4px(顺时针)
例子
<link rel="stylesheet" href="./盒子模型.css">
<div id="div10">padding:10px;</div>
<div id="div11">padding:10px 10px;</div>
<div id="div12">padding:10px 10px 10px;</div>
<div id="div13">padding:10px 10px 10px 10px;</div>
盒子模型.css
#div10 {
width: 100px;
height: 50px;
background-color: pink;
padding: 10px;
}
#div11 {
width: 100px;
height: 50px;
background-color: yellow;
padding: 10px 20px;
}
#div12 {
width: 100px;
height: 50px;
background-color: pink;
padding: 10px 20px 30px;
}
#div13 {
width: 100px;
height: 50px;
background-color: yellow;
padding: 10px 20px 30px 40px;
}
补充
内边距会影响盒子实际大小
1、当我们给盒子指定 padding 值之后，发生了 2 件事情：
1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。
2、内边距对盒子大小的影响：
- 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
- 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
3、解决方案：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
外边距margin
外边距的使用方式
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
语法
合写分写语法和内边距一致
典型应用
让块级盒子水平居中
外边距可以让块级盒子水平居中的两个条件：
- 盒子必须指定了宽度（width）。
- 盒子左右的外边距都设置为 auto 。
常见的写法，以下三种都可以：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
例子
<link rel="stylesheet" href="./盒子模型.css">
<div id="div15"></div>
盒子模型.css
#div15 {
width: 200pt;
height: 100pt;
background-color: pink;
margin: 0 auto;
}
外边距的合并
不像border那样直接border-collapse:collapse;
外边距的合并需要自己手动的使需要合并的边只存在一个外边距
例子
<link rel="stylesheet" href="./盒子模型.css">
<div id="div16"></div>
<div id="div17"></div>
盒子模型.css
#div16 {
width: 200pt;
height: 30pt;
background-color: blue;
margin: 30pt;
}
#div17 {
width: 200pt;
height: 30pt;
background-color: blue;
margin: 0pt 30pt 30pt 30pt;
}
外边距嵌套的合并
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加 overflow:hidden。
<link rel="stylesheet" href="./盒子模型.css">
<div id="div18">
<div id="div19"></div>
</div>
盒子模型.css
#div18 {
/*
可以为父元素定义上边框。
border-top: 1pt solid transparent;
height: 89pt;
*/
/*
可以为父元素定义上内边距。
padding-top: 1pt;
height: 89pt;
*/
/* 可以为父元素添加 overflow:hidden */
height: 90pt;
overflow: hidden;
width: 260pt;
background-color: pink;
margin-top: 30pt;
}
#div19 {
width: 200pt;
height: 30pt;
background-color: yellow;
margin-top: 30pt;
margin-left: 30pt;
}
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
* {
padding: 0;
margin: 0;
}
ps基本操作
因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是在 PS 里面完成。
测量图片大小
1、文件->打开
2、打开文件后 按ctrl+R召唤标尺（视图->标尺）
变成
3、右击标尺，把3、右击标尺，把里面的单位改为像素
4、Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
5、按住空格键，鼠标可以变成小手，拖动 PS 视图
6、用选区拖动 可以测量大小
7、Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
3734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
