前端学习（二）CSS基础1

最新推荐文章于 2023-03-15 23:43:25 发布

赏善罚饿

最新推荐文章于 2023-03-15 23:43:25 发布

阅读量8.9k

点赞数 1

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/whitefish520/article/details/107526331

版权

前端专栏收录该内容

23 篇文章 6 订阅

订阅专栏

什么是CSS

CSS的引入：

由于HTML只关注内容的语义，导致单纯用HTML做出的网页很丑
在HTML中设置样式非常不方便，也非常繁琐
使用CSS能让网页更加美观
CSS让HTML从样式中脱离，HTML专门做结构，CSS专门做样式

CSS的定义：层叠样式表（Cascading Style Sheets），用来做网页的样式，CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式

CSS的作用：主要用于设置HTML页面中的文本内容（字体、大小、对齐等）、图片的外形（宽高、边框、边距等），以及版面的布局和外观显示样式

CSS的三种引入方式

行内式

概念：也称为内联样式、行间样式，是通过标签中的style属性来设置样式
基本语法：

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

任何HTML标签都拥有style属性，因此都可以使用行内式来设置样式，例如

<p style="color:green; font-size:24px">东边日出西边雨，我就问你行不行</p>

注意以下几点：

style只是标签的一个属性
样式属性名和属性值之间，以冒号:隔开
不同的样式属性之间，以分号;和空格隔开
只能控制当前所在的标签及嵌套在该标签下的子标签
没有实现样式和结构相分离

内部样式表

概念：也称内嵌样式表，是将CSS代码集中写在HTML文档的head标签内部，并用style标签定义样式
基本语法如下

<head>
	<style type="text/css">
		选择器 {
			属性1:属性值;
			属性1:属性值;
		}
	</style>
</head>

例如：

<head>
	<style type="text/css">
		p {
			color:red;
			font-size: 19px;
		}
	</style>
</head>
<body>
	<p>东边日出西边雨，我就问你行不行</p>
	
</body>

注意

其中的样式选择器，其实就是选择哪一些元素来做装修
一般情况下，style标签位于HTML文档的head标签内部
只能控制当前的HTML页面
没有彻底做到样式与结构相分离

外部样式表

概念：也称为外链式或链入式，是将所有的样式放在CSS文件中，通过link标签链入到HTML文档中
基本语法如下

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径" /> 
</head>

注意：

link标签是单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为`stylesheet`，表示被链接的文档是一个样式表文件
type	定义所链接文档的类型，在这里需要指定为`text/css`，表示链接的外部文件为CSS样式表
href	定义所链接外部样式表的url，可以是相对路径，也可以是绝对路径

三种方式的对比

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

CSS基础选择器

选择器的作用：找出特定的HTML元素

标签选择器

概念：标签选择器（元素选择器）是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
语法：

标签名 {
    属性1:属性值;
	属性2:属性值;
    ...
}

作用：标签选择器可以把某一类标签全部选择出来，比如所有的div标签
优点：能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式

类选择器

类选择器使用英文点号.进行标识，后面紧跟类名，语法如下

.类名 {
	属性1:属性值;
	属性2:属性值;
    ...
}

在标签中，使用class属性调用该样式，例如

<p class="类名"></p>

优点：可以为元素单独定义样式，可以选择一个或多个标签，实现差异化样式
注意：
- 类选择器使用英文点号.来表示，后面紧跟类名，类名是自定义的
- 定义类名时，对于长名称或词组，不同的单词使用横线连接
- 不要以纯数字、中文等命名，要做到见名知义

类选择器的特殊用法

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

<div class="pink font20">亚瑟摩根</div>

注意：

各个类名中间用空格分开
多类名选择器在后期布局比较复杂的情况下，还是较为多用的

id选择器

id选择用符号#进行标识，后面紧跟id名

用法如下：

<!-- id选择器 -->
#id名 {
	属性1:属性值;
	属性2:属性值;
    ...
}
<!-- 标签 -->
<p id="id名"></p>

元素的id值是唯一的，只能对应于文档中某一个具体的元素
用法和类选择器基本相同
id选择器和类选择器最大的区别是使用次数
同一个id只能有一个元素使用，同一个类可以有多个元素使用

通配符选择器

概念：通配符选择器用*表示，*就是选择所有的标签，它的作用范围是整个HTML文档，能匹配本文档内所有元素
语法格式如下：

* {
    属性1:属性值;
	属性2:属性值;
    ...
}

例如下面的代码，对整个HTML文档做一个样式

* {
    margin:0;	/* 定义外边距 */
    padding:0	/* 定义内边距 */
}

选择器比较

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

CSS字体样式

font-size 字体大小

作用：font-size属性用于设置字号，例如

p {
	font-size:20px;
}

单位：分为相对长度单位、绝对长度单位，推荐使用px，谷歌浏览器默认16px，建议给整个body设置16px，这样在所有浏览器显示都一致

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素、最常用，推荐使用

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

font-family 字体

作用：font-family属性用于设置哪一种字体，例如

p {
	font-family:"宋体";
}

常用字体：宋体、微软雅黑、黑体
可以同时指定多个字体，中间用逗号隔开，表示如果浏览器不支持第一个字体，则尝试下一个，如果所有的都不支持，才使用默认字体

p {
	font-familt:Arial, "宋体", "微软雅黑","Microsoft Yahei"; 
}

注意：

各种字体之间必须使用英文状态的逗号隔开
中文字体必须要加英文状态的引号，英文字体一般不需要加引号，但是如果有多个单词或特殊字符，则需要加引号，如Times new Roman
英文字体名必须位于中文字体名之前
尽量使用系统默认字体

CSS Unicode 字体

为什么使用unicode字体
1. 在CSS中设置字体名称，直接写中文是可以的，但是在文件编码（gb2312、utf-8等）不匹配时会产生乱码错误
2. 另外，xp系统不支持类似微软雅黑的中文
解决方案：
1. 可以使用英文来代替，如：font-family:"Microsoft Yahei"
2. 在CSS中直接使用Unicode编码来写字体名称，可以避免这些错误，如：font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight 字体粗细

在HTML中可以使用标签b和strong来加粗文本
可以使用CSS加粗字体，但是CSS没有语义

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

font-style 字体倾斜

在HTML中字体倾斜可以使用标签i和em
可以使用CSS加粗字体，但是CSS没有语义

font-style用来定义字体是否倾斜，可用属性值如下

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

font 综合设置字体样式

可以对font属性设置所有的样式，基本语法格式如下：

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

注意：使用font属性时，必须按照语法格式中的顺序来书写，不同属性以空格隔开，其中font-size和font-family属性为必填属性，否则样式不起作用

font 总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

CSS外观属性

color 文本颜色

作用：color属性用于定义文本的颜色
取值：
1. 预定义的颜色：red、blue等
2. 十六进制：#FF0000、#F00等
3. RGB：rgb(255,0,0)或者rgb(100%,0%,0%)
使用：

选择器 {
    color: #FF00CC;
}

text-align 对齐方式

作用：用于设置文本内容的水平对齐方式
可用属性值如下

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

line-height 行间距

作用：用于设置行间距，即行高
单位：常用px，em和百分比，使用的最多的是像素px，一般情况下比字号大8像素

text-indent 首行缩进

作用：用于设置首行文本的缩进
属性值：一般为2em，表示两个字的宽度

text-decoration 文本装饰

通常用于给链接修改显示效果

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

CSS外观属性总结

属性	表示	注意点
color	颜色	我们通常用十六进制比如而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none

emmet语法

Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了

如果生成的div 类名是有顺序的，可以用自增符号 $

.demo$*3        
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

CSS复合选择器

CSS选择器分为基础选择器和复合选择器，但是基础选择器不能满足我们实际开发中，快速高效的选择，复合选择器是由两个或多个基础选择器组合而成，能更准确更精细虚选择目标元素

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的子孙后代
其写法是把外层标签写在前面，内层标签写在后面，中间用空格分隔

父级 子级 {属性:属性值; ... }

举例：两个p均被选中

div p{color:red;}

<div>
	<p>后代选择器-儿子</p>
	<span>
        <p>后代选择器-孙子</p>
    </span>
</h3>

子元素选择器

后代选择器会选择父元素下面的所有符合的子元素和孙元素，而子元素选择，只会选择父元素下一层的子元素，不会去选择孙元素，也就是只选择亲儿子
语法：

父元素>子元素 {color:red;}

举例：只有第一个p元素被选中

div>p{color:red;}

<div>
	<p>后代选择器-儿子</p>
	<span>
        <p>后代选择器-孙子</p>
    </span>
</h3>

交集选择器

交集选择器由两个选择器构成，标签必须同时满足两个选择器的特点
由标记选择器和类选择器组成，中间以点.连接，语法格式如下

选择器1.选择器2 {
	属性:属性值;
}

举例

p.red{color:red;}

<p class="red"> 这条被选中</p>
<p> 这条未被选中</p>

并集选择器

如果某些不同类型的元素需要定义相同的样式，可以利用并集选择器，让代码更简洁
任何形式的选择器（包括标签选择器、类选择器、id选择器），都可以作为并集选择器的部分
并集选择器用逗号隔开，语法格式如下

选择器1, 选择器2{
	属性:属性值;
}

举例：

.red, p{color:red;}

<p class="red"> 这条被选中</p>
<p> 这条被选中</p>
<div class="red">这条也被选中</div>

链接伪类选择器

伪类选择器的作用：向某些选择器中的标签添加特殊的效果

链接伪类选择器：可以修改四种样式

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

举例：

.nav a{
    text-decoration: none;
}
.nav a:link {
    color:green;
    font-size:20px;
}
.nav a:visited {
    color:#666;
    font-size:10px;
}
.nav a:hover {
    color:pink;
    font-size:40px;
}
.nav a:active {
    color:yellow;
    font-size:80px;
}

<div class="nav">   
    <a href="http://www.xiaomi.com">小米搜索</a>
    <a href="http://www.baidu.com">百度搜索</a>
    <a href="http://www.jd.com">京东白嫖</a>
    <a href="http://www.tmall.com">天猫商城</a>
</div>

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

标签显示模式

显示模式：标签以什么方式显示，例如div独占一行，span一行可以有多个

标签分类：块标签、行内标签、行内块标签

块级标签

块级标签一个占有一整行，常见的有h1~h6、p、div、ul、ol、li等

块级标签的特点：

很霸道，一个标签独占一行
宽度、高度、外边距、内边距都可以设置
默认宽度为父容器的宽度，即浏览器的宽度
是一个容器，里面可以放块级标签和行内标签

注意：

只有文字才能组成段落，因此p标签内部，不能放块级元素，特别是p标签内不能放div
同理，h1~h6都是文字类标签，里面不能放其它块级元素

行内标签

多个行内可以共享一行，常见的有a、strong、b、em、i、del、s、ins、u、span等

行内标签的特点：

一行可以有多个行内标签
不能设置宽度和高度
宽度根据内容来确定
行内元素只能容纳文本或其它行内元素
链接里面不能再放链接
链接里面可以放块级元素，但是建议进行显示模式转换

行内块标签

行内块元素，既有行内元素的特点，又有块级元素的特点，常用的有img、input、td

多个行内元素、行内块元素共享一行
默认宽度根据内容来确定
宽度、高度、外边距、内边距都可以修改

三种模式的总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

标签显示模式转换

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

CSS背景

背景颜色

/* 默认情况下是透明色transparent */
background-color:颜色值;

背景图片

background-image:url(url)

此处必须用url()，地址不需要引号

背景平铺

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

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

背景位置

background-position : position || position

参数可以是百分数，也可以是绝对的长度值，如指定像素18px
参数还可以是方位值：top | center | bottom | left | center | right
注意：
- 必须先指定background-image属性
- position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
- 如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着

background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

背景简写

background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background: 背景颜色背景图片地址背景平铺背景滚动背景位置;
语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

背景透明

语法：

background: rgba(0, 0, 0, 0.3);

最后一个参数是alpha 透明度取值范围 0~1之间
我们习惯把0.3 的 0 省略掉这样写 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
因为是CSS3 ，所以低于 ie9 的版本是不支持的。

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标，切记如果有精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色背景图片地址背景平铺背景滚动背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

CSS三大特性

层叠性

概念：所谓层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
原则：
1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
2. 样式不冲突，不会层叠

继承性

概念：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
注意：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

优先级

概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题。

权重计算公式

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

值从左到右，左面的最大，一级大于一级，数位之间不可进位，级别之间不可超越。
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
div {
color: pink!important;
}

权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

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

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

继承的权重是0

修改样式，一定要看该标签有没有被选中。

1）如果选中了，那么以上面的公式来计权重。谁大听谁的
2）如果没有选中，那么权重是0，因为继承的权重为0

盒子模型

盒子模型包括：内容、边框（border）、内边距（padding）、外边距（margin）

盒子边框 border

语法：

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

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色
border-collapse	设置为collapse，可以合并重叠的表格边框，使得边框变细，仅作用于表格中

边框的样式：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

边框也可以综合设置，例如

border: 1px solid red;  /*没有顺序*/

内边距 padding

概念：边框与内容之间的距离，有上下左右四种

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

指定内边距的结果：

内容与指定边界多了一定的距离
盒子会变大

内边距也可以简写：

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding：上内边距左右内边距下内边距；
4个值	padding: 上内边距右内边距下内边距左内边距；

内边距产生的问题及解决

盒内尺寸计算
- 宽度
  
  Element Height = content height + padding + border （Height为内容高度）
- 高度
  
  Element Width = content width + padding + border （Width为内容宽度）
- 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
设置内边距产生的问题：原来的盒子被撑大
解决办法：重新计算和定义内容的宽度
特殊情况：字标签的宽度继承于父标签，且子标签没有指定width，盒子则不会被撑大，举例如下

<style type="text/css">
    div {
        height: 200px;
        width: 200px;
        background-color: pink;
    }
    p {
        height: 50px;
        background-color: green;
        padding-left: 50px;
    }
</style>

<div>
    <p>ccs border</p>
</div>

外边距 margin

外边距 margin 控制的是盒子与盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin值的简写（复合写法）代表意思跟 padding 完全相同。

块级盒子水平居中

前提条件：
1. 盒子必须指定宽度 width
2. 给左右两边都设置为 margin=auto
常用写法：

/* 1 */ margin-left: auto;   margin-right: auto;
/* 2 */ margin: auto;
/* 3 */ margin: 0 auto;

文字居中与盒子居中区别

盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中左右margin 改为 auto

插入图片与背景图片区别

插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

 img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
	}

清除元素的默认内外边距

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：尽量给只给一个盒子添加margin值。

嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。
更高级的方案需要更高深的知识

盒子模型布局稳定性

学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？

大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。

我们根据稳定性来分，建议如下：

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

  width >  padding  >   margin

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

拓展

圆角边框

语法：

border-radius:length;

其中每一个值可以为数值或百分比的形式。

技巧：让一个正方形变成圆圈

border-radius: 50%;

以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。

而我们这里矩形就只用用高度的一半就好了。精确单位。

盒子阴影

语法

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

前两个属性是必须写的。其余的可以省略。
外阴影 (outset) 是默认的但是不能写想要内阴影可以写 inset

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，默认外部阴影，inset内部阴影

div {
    width: 200px;
    height: 200px;
    border: 10px solid red;
    /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
    /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
    box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
}

赏善罚饿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习（二）CSS基础1

什么是CSSCSS的引入：由于HTML只关注内容的语义，导致单纯用HTML做出的网页很丑在HTML中设置样式非常不方便，也非常繁琐使用CSS能让网页更加美观CSS让HTML从样式中脱离，HTML专门做结构，CSS专门做样式CSS的定义：层叠样式表（Cascading Style Sheets），用来做网页的样式，CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式CSS的作用：主要用于设置HTML页面中的文本内容（字体、大
复制链接

扫一扫