CSS3基础

css书写方式

行内式

1
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

内嵌样式

1
2
3
4
5
6
<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>

外链式

1
2
3
<head>
  <link type="stylesheet"  rel="stylesheet" href="CSS文件的路径"/>
</head>

CSS字体样式属性

font-size:字号大小

推荐使用像素单位px

font-family:字体

1
2
3
4
p{ font-family:"微软雅黑";}
font-family:"Microsoft Yahei"
font-family: "\5FAE\8F6F\96C5\9ED1"
F12-console-输入escape("字体")-回车文字转码-%u变\-调用

font-weight:字体粗细

font-style:字体风格

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式 (重点)

选择器{font: font-style font-weight font-size/line-height font-family;}使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开

CSS 三大特性

CSS层叠性

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

CSS继承性

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

CSS特殊性（Specificity）

继承或者* 0,0,0,0
每个元素（标签选择器）0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style=”” 1,0,0,0
每个!important 重要的 ∞ 无穷大
注意：

  1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
  2. 继承的 权重是 0

注意：

  1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
  2. 继承的 权重是 0

CSS 布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子位置。

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位

浮动(float)

概念：元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

浮动——漂，漂浮在普通流的上面，不占位置，只有左右浮动。 脱标—脱离标准流

left rigth none

案例

案例2——浮动不占位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    /* 让第 1 个盒子漂浮起来，不占位置 */
    float: left;
}

.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

​ float 属性会让盒子漂浮在普通流的上面，不占位置。

案例 1 —— 文字环绕效果

1
2
3
4
5
6
7
8
9
10
11
12
div {
    width: 500px;
    height: 500px;
    border: 1px solid hotpink;
    /* 让盒子居中显示 */
    margin: auto;
}

img {
    /* 让图片浮动在盒子的右侧，div 中的文字环绕在图片周围 */
    float: right;
}

​ div 中的文字环绕在图片周围 */

案例 3——div 水平排列

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */
    /* display: inline-block; */
    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */
    float: left;
}

div:nth-child(even) {
    background-color: hotpink;
}

​ - 设置浮动属性 float: left;，可以让 div 水平排列，并且没有间隙；

  • 转换为行内块元素 display: inline-block;，可以水平显示，不过 div 之间有间隙，不方便处理。

注意：案例中 float 属性是设置给所有 div 的。

浮动(float)的应用（重要）

在实际布局中浮动的应用方法

  1. 用普通流的大盒子（父级）定义上下顺序——占住位置；
  2. 使用浮动在大盒子内部设置小盒子的位置——水平排列。
  3. 注意：一个父盒子里面的子盒子，如果其中一个子盒子浮动，则其他子盒子都需要浮动，才能在一行显示。

浮动后与盒子的关系

与父盒子的关系

子盒子的浮动参照父盒子对齐

不会与父盒子的边框重叠，也不会超过父盒子的内边距

与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；

普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流的块元素。

行内块元素特性（重要）

元素添加浮动后，会具有行内块元素的特性——元素的大小取决于：

定义的大小（优先级高）

元素内部的内容

特别注意：1. 浮动的盒子需要和标准流的父级搭配使用；2. 浮动可以使元素具有行内块特性。

浮动 float默认转换为行内块

清除浮动

为什么要清除浮动
准确地说，并不是清除浮动，而是清除浮动后造成的影响
方法1
浮动元素末尾添加

1
2
3
4
5
<div style=”clear:both”></div>
left
right
both

​
父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
单伪元素清除浮动 给浮动元素的父元素使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.clearfix:after {  

		content: "";

		display: block;

		height:0;

		visibility: hidden;

		clear: both;

	} 

	/兼容ie6、ie7清除浮动/

	.cleafix {

		*zoom: 1;

	}

​ 双伪元素清除浮动 给浮动的元素的父元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.clearfix:before, .clearfix:after {

		content: "";

		display: table;

	}

	.clearfix:after {

		clear: both;

	}

	/兼容ie6、ie7清除浮动/

	.clearfix {

		*zoom: 1;

	}

CSS 背景(background)

background-color 背景颜色

background-image 背景图片地址 

1
none :   url :

background-repeat 是否平铺

1
background-repeat : repeat | no-repeat | repeat-x | repeat-y

background-position 背景位置

1
2
position : 　top | center | bottom | left | center | right   方位名词   relative相对  absoluter绝对
center  屏幕缩放背景依然居中

background-attachment 背景固定还是滚动

1
background-attachment : scroll | fixed

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

背景的合写（复合属性）

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background-size 背景图片大小

1
2
3
4
5
宽高属性width,height

	cover覆盖

	contain  等比占满

background-origin 设置背景显示的原点位置

1
2
3
默认值padding-box
content-box
border-box

background-clip 背景图修改

1
2
3
默认值 border-box
padding-box
content-box

盒子背景透明度

1
background: rgba( 0,0,0,0.2);

连写

1
2
background: url(glass.png) #fff no-repeat 10px/12px 12px;
10px  背景图距左边的距离  一个值后面默认跟了一个Top=center,  /后面跟  背景图大小

图片绝对路径

1
background-image: url("~@/assets/images/jsptsummarize.png");

文本属性

color:文本颜色

line-height:行间距
line-height: 25px;

text-align:文本水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐

text-indent:首行缩进
/首行缩进2个字 em 1个em 就是1个字的大小/
text-indent: 2em;

text-decoration 文本的装饰
none
underline
overline
line-through

间距
letter-spacing 字间距
word-spacing 词间距

文本溢出隐藏 overflow:hidden

添加缩略标记 text-overflow:ellipsis …

强制一行显示 white-space:nowrap

伪链接a

1
2
3
4
5
 /* 未访问的链接 */  	:link    
/* 已访问的链接 */   :visited 
 /* 鼠标移动到链接上 */   :hover 
/* 选定的链接 */   :active 
按照  lvha 的顺序  lv 包包 非常 hao

标签显示模式（display）

块级元素(block-level)

1
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

行内元素(inline-level)

1
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内块元素（inline-block）

1
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

选择器

css选择器

标签选择器（元素选择器）
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

(可以使用多次) .类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

1
2
3
4
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id选择器

( 只能使用一次) #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 尽量不使用 ID 选择器

通配符选择器

  • { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 尽量少用通用选择器 

      符合选择器

1
2
3
4
* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

后代选择器

写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子元素选择器

1
比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

交集选择器

1
比如：   p.one   选择的是： 类名为 .one  的 段落标签。

并集选择器

1
.one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

并集选择器

1
并集选择器  和 的意思，  就是说，只要逗号隔开的，所有选择器都会执行后面样式。比如  .one, p , #test {color: #F00;}

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子元素选择器

1
比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

清除元素的默认内外边距

1
2
3
4
5
6
7
8
{

padding:0;         /* 清除内边距 */

margin:0;          /* 清除外边距 */

  }

盒子模型（CSS重点）

盒子边框（border）

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

border-style

none 无
solid 实线
dashed 虚线
dotted 点线
double 双实线

内边距（padding）

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

padding 会撑开盒子 
padding不影响盒子大小情况
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑宽盒子。

外边距（margin）

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

外边距实现块元素居中

1.必须是块级元素。
2.盒子必须指定了宽度（width）
3.然后就给左右的外边距都设置为auto
例:.header{ width:960px; margin:0 auto;}

文字盒子居中图片和背景区别

1.文字水平居中
text-align: center
2.盒子水平居中
margin: 0 auto;
3.插入图片定位
我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin(通过盒模型的挤压定位,改变的是盒子的居中,并不是作用于img图片的居中,可以改变盒子居中后,在调整img的大小.)
4.背景图片定位
我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

盒子模型布局稳定性

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
原因：

  1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
  2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
  3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

外边距合并

相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案： 避免就好了。

嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：

  1. 可以为父元素定义1像素的上边框或上内边距。
  2. 可以为父元素添加overflow:hidden。

待续。。。。

定位(position)

2.3.1 静态定位(static)

静态模式下边偏移属性无效。

2.3.2 相对定位(relative)（自恋型）

在标准流中的位置 + 边偏移属性 来设置元素的位置。

  1. 以 自己在标准流位置的左上角为基点 + 边偏移属性 定位元素新的位置；
  2. 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
  3. 与浮动的对比
    - 浮动 —— 让多个块级元素在一行显示，脱离标准流；
    • 相对定位 —— 让盒子移动到我们想要的位置，不脱标。

2.3.3 绝对定位(absolute)（拼爹型）

完全脱标 —— 完全不占位置；
父元素要有定位 —— 父元素在标准流中的位置 + 边偏移属性 来设置元素的位置；

  • 如果当前父元素没有定位（相对、绝对或固定），则寻找上一级有定位的父元素；

  • 如果所有父元素都没有定位，则以浏览器为准定位（Document 文档）。

  • 如果父亲有定位，则以父亲为准。

    定位口诀 —— 子绝父相
    绝对定位默认转块元素

2.3.4 固定定位(fixed)

固定定位是绝对定位的一种特殊形式： （认死理型）
完全脱标 —— 完全不占位置；
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

  • 跟父元素没有任何关系；

  • 不随滚动条滚动。(固定窗口)

定位(position)的扩展

绝对定位的盒子居中
注意：绝对定位不能通过设置 margin: auto 设置水平居中。

  1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；

  2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

堆叠顺序（z-index）

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

盒子外观属性

盒子阴影(CSS3)
box-shadow:0px 0px 0px 0px #ccc;

圆角边框(CSS3)
border-radius: 50%;( % px)

H5C3
#H5C3
CSS3基础
http://www.dwyblog.cn/2018/08/15/CSS3/
作者
幸福来敲门
发布于
2018年8月15日
许可协议