7.背景
样式 | 含义 |
---|---|
background-color:transparent(默认透明)/ rgba(0,0,0,0.3)(0.3 为透明程度,越小越透明) | 背景颜色 |
background-image:none(默认)/ 地址url(…) | 背景图片 |
background-repeat:repeat(默认纵横平铺)/no-repeat(不平铺)/repeat-x(横)或 repeat-y(纵) | 背景摆放 |
background-position:x坐标 y坐标(x 为左右,y 为上下,可以为数值/百分比/方位top/center/left/bottom/right) | 背景位置 |
background-attachment:scroll(不固定,默认滚动)/ fixed(固定) | 背景是否固定 |
备注:
1.可复合为 background:background-color background-image background-repeat background-attachment background-position
。
2.小的图片一般用背景。
3.背景位置可以混合单位(20px center)。
4.若位置只指定一个方位/数值,则另一个默认居中(right即right center)。
8.三大特性
(1)层叠性(即给相同选择器设置相同样式,则采用就近原则)
div {
color: red;
font-size: 12px;
}
div {
color: pink;
}
备注:虽然color执行下面的pink,但是上面的font-size仍然生效。
(2)继承性(子承父性,继承跟文字相关的text-、font-、line-、color)
div {
color: pink;
font-size: 14px;
}
<div>
<p>龙生龙,凤生凤,老鼠生的孩子会打洞</p>
</div>
备注:
1.儿子p会继承父亲div。
2.可直接给body指定,然后body里面就全都继承。
<style>
body {
color: pink;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
}
div {
/*子元素继承了父元素body的行高1.5*/
/*这个1.5就是当前元素文字大小font-size的1.5倍,所以当前div的行高就是21px*/
font-size: 14px;
}
p {
/*1.5*16=24 当前的行高*/
font-size: 16px;
}
/* li没有手动指定文字大小,则会继承父亲的文字大小 body 12px 所以li的文字大小为12px
当前li的行高就是12*1.5=18px*/
</style>
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
<ul>
<li>我没有指定文字大小</li>
</ul>
</body>
(3)优先级
样式 | 权重 |
---|---|
!important | 无穷(+∞) |
行内样式:style=“ ” | (1,0,0,0)=1000 |
id 选择器 | (0,1,0,0)=100 |
类/伪类选择器 | (0,0,1,0)=10 |
元素选择器 | (0,0,0,1)=1 |
继承选择器/* | (0,0,0,0)=0 |
备注:
1.比较权重大小时,从左到右比较。
2.!important加在后面,即color:pink!important
3.如果一个盒子既有left(top)属性也有right(bottom)属性,则执行left(top)。
<style>
/* 父亲的权重是 100 */
#father {
color: red!important;
}
/* p继承的权重为 0 */
/* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */
p {
color: pink;
}
body {
color: red;
}
/* a链接浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;}*/
a {
color: green;
}
</style>
<body>
<div id="father">
<p>你还是很好看</p>
</div>
<a href="#">我是单独的样式</a>
</body>
权重的叠加:
<style>
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加,但是永远不会有进位 */
/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */
ul li {
color: green;
}
/* li的权重是0,0,0,1 1 */
li {
color: red;
}
/* .nav li 权重0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */
.nav li {
color: pink;
}
</style>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
9.边框
样式 | 含义 |
---|---|
border-width | 宽度 |
border-style | 样式,可以是 none/solid(单实线)/dashed(虚线)/dotted(点线) |
border-color | 颜色 |
border-collapse:collapse; | 合并相邻边框 |
备注:
1.复合写法:border:1px solid red;
2.border-left/top…必须写在 border 下面。
3.直接给一个盒子加边框会加大盒子大小,解决方法:
(1)测量时不量边框;
(2)width/height减去边框宽度。
4.表格边框设置:每个单元格都设置边框
table,
td, th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
10.内边距padding(边框与内容的距离)
设置 | 结果 |
---|---|
padding:5px; | 上下左右 |
padding:5px 10px; | 上下 左右 |
padding:5px 10px 20px; | 上 左右 下 |
padding:5px 10px 20px 30px; | 上 右 下 左(顺时针) |
备注:
1.padding-left/right/bottom/top
2.内边距会撑大盒子,width和height要减去padding;若盒子本身没指定width或者height,则不会撑大盒子大小。
11.外边距margin(盒子与盒子的距离)
设置 | 结果 |
---|---|
margin:5px; | 上下左右 |
margin:5px 10px; | 上下 左右 |
margin:5px 10px 20px; | 上 左右 下 |
margin:5px 10px 20px 30px; | 上 右 下 左(顺时针) |
备注:
1.margin-left/right/bottom/top
2.让块级盒子居中:指定宽度,左右外边距为 auto,例如margin:0 auto
3.让行内(块)盒子居中:给其父元素添加text-align:center。
外边距合并:
1.相邻块元素垂直外边距的合并
若上下两个盒子分别有下外边距和上内边距,则取两个里面的最大值。所以尽量只给一个盒子添加margin值。
2.嵌套(父子)块元素垂直外边距的塌陷:父子都有上外边距,则父亲会塌陷较大外边距。
解决:
1.为父元素定义上边框(border:1px solid transparent)
2.为父元素定义上内边距(padding:1px)
3.为父元素添加 overflow:hidden
备注:
1.行内元素一般只设置左右内外边距,不要设置上下,不过可以转换为块级或者行内块。
2.清除浏览器默认内外边距:*{padding:0;margin:0;},放在CSS里面第一句。
12.圆角边框
border-radius(外边框圆角):length即半径(数值或百分比)
border-radius:10px 5px 10px 5px(左上 右上 右下 左下)
border-top-left-radius:…
备注:
1.若要全圆,则length为高或宽的一半,或者直接50%。
2.圆角矩形:length为高度的一半。
13.盒子阴影box-shadow
属性 | 含义 |
---|---|
h-shadow | 水平阴影(有正负值,越大越往右/下) |
v-shadow | 垂直阴影 |
blur | 模糊距离(越大越模糊) |
spread | 尺寸(影子的大小) |
color | 颜色一般用rgb(0,0,0,0.3) |
inset | 内部阴影(默认outset,不过outset不能写出来) |
备注:
1.盒子阴影不占空间。
2.复合:box-shadow : h-shadow(必须) v-shadow(必须) blur spread color inset;
3.text-shadow(文字阴影): h-shadow v-shadow blur color;
14.网页布局三大方式
三种方式:标准流、浮动、定位
备注:
1.标准流就是块级元素占一行,从上往下;行内元素从左到右,碰到边缘换行。
2.第一准则:多个块级元素纵向排列找标准流,横向排列找浮动。(先用标准流的父元素排列上下位置,然后内部子元素浮动排列)
15.浮动float
1.定义:
浮动就是创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含或另一个浮动框的边缘,使得多个块级元素一行排列显示。
2.写法:
float:none/left/right(先用标准流父元素排列上下位置,再用内部子元素浮动排列左右位置)
3.特点:
(1)脱离标准流的控制移动到指定位置(脱标)。
(2)浮动的盒子不再保留原先位置。
(3)浮动的元素会一行内显示且顶部对齐,一行内装不下会另外起一行。
(4)浮动元素有行内块特性,给行内元素或块级元素加浮动之后不用再转换为行内块元素。
备注:
1.浮动的盒子不会有外边距合并的问题。
2.先设置大小,再设置位置。
3.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
4.一浮全要浮。
4.清除浮动:
1.问题:
父亲盒子不方便给高度,孩子浮动,脱离原文档流位置(父亲高度为 0,下盒子移到下侧),对后面的排版有影响。
2.本质:
(1)清除浮动元素的影响;
(2)若父盒子有高度,则不需要清除浮动;
(3)子盒子会变化,所以父盒子不方便给高度,所以要清除浮动,父亲会根据浮动的子盒子自动检测高度,则不会影响下面的标准流。
2.清除浮动方法:
clear:left/right/both(一般都用both)
1.额外标签法(隔墙法):
策略:闭合浮动,即在浮动元素末尾添加空标签(必须是块级元素)
.clear {
clear: both;
}
<div class="clear"></div>
2.父级添加 overflow:hidden/auto/scroll
3.:after 伪元素法
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
4.双伪元素法
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
备注:导航栏可以用ul包含li和链接a的做法,可以不给宽度,要给a加padding值。
16.页面布局思路
1.思路
-
确定页面版心(测宽)
-
分析行模块及行中列模块
-
列模块浮动布局,先确定每列大小,再确定列的位置
-
Html
-
布局结构
2.css书写顺序
-
布局定位属性:display/position/float/clear/visibility/overflow
-
自身属性:width/height/margin/padding/border/background
-
文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
-
其他:content/curson/border-radius/box-shadow/text-shadow/background
17.定位position
1.定义:
让盒子自由在某个盒子内移动位置或者固定在某个位置,且压住其他盒子。
定位(position)=定位模式+边偏移(top/bottom/left/right)
2.定位种类
方式 | 写法 | 含义 |
---|---|---|
静态定位 | position:static | 无定位,标准流 |
相对定位 | position:relative | 相对于它原来的位置,原来在标准流的位置继续占有,不脱标 |
绝对定位 | position:absolute | 相对于最近一级的有定位的父元素位置,不占原位置 |
固定定位 | position:fixed | 以可视窗口为准移动,页面滚动不变,不占原位,跟父盒子无关 |
粘性定位 | position:sticky | 以可视窗口为准,占原位,必加 top/bottom/right/left其中一个 |
备注:
1.相对定位:top:80px即为距离父元素顶部80px,也就是反向移动。
2.绝对定位:脱标,会飘起来,会被其他盒子占用;若无祖先,则以浏览器为准。
3.绝对定位:子绝父相(子使用绝对定位(可放父盒子任何一个地方,不影响其他兄弟),父亲需要相对定位才能让子在父亲里面)(子不占原位,父站原位)
4.固定定位要固定在版心右侧的算法:left:50%,然后margin-left:版心宽度的一半
5.固定定位是一种特殊的绝对定位。
6.粘性定位是相对定位和固定定位的混合。
3.定位叠放次序
(1)问题:
盒子重叠,可用z-index控制盒子前后次序。
(2)语法:
选择器{ z-index:1;}
备注:
1.数值可以是正整数、负整数或者0,不能加单位,默认是auto,数字越大,盒子越靠上。
2.若z-index相同或者没有指定时,则按书写顺序,后来者居上。
3.只有定位的盒子才有z-index属性。
4.拓展
1.绝对/固定定位的盒子居中,不能通过margin:0 auto水平居中。
水平居中的算法:left:50% margin-left:负的盒子宽度的一半
垂直居中的算法:top:50% margin-top:负的盒子高度的一半
2.浮动只会压住下面标准流盒子,不会压住盒子里面的文字和图片,以为浮动的目的是文字环绕。绝对定位或固定定位会压住下面标准流所有内容。