一、CSS初识
1. 名称解释
CSS(Cascading Style Sheets):CSS样式表或层叠样式表(级联样式表)
2. HTML的局限性
- HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式。
- 操作html属性不方便
- HTML里面添加样式带来的是无尽的臃肿和繁琐
3. 注释
/* 这是注释 */
二、引入CSS样式表
1. 行内式
通过标签的style属性来设置元素的样式
- style其实就是标签的属性
- 多组属性值直接用
;
隔开 - 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余。
- 缺点: 没有实现样式和结构相分离。
<p style="color: red; font-size: 12px;">文字</p>
2. 内嵌式
将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义。
- style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面
- 缺点: 没有彻底分离结构与样式
<head>
<style type="text/CSS">
选择器(选择的标签) {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
3. 外链式
是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中。
rel
: 定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。href
: 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
<link rel="stylesheet" href="index.css">
三、选择器
1. 基础选择器
1.1. 标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
- 作用:可以把某一类标签全部选择出来。
- 优点:快速为网页中同类型的标签统一样式
- 缺点:不能设计差异化样式。
p {font-size: 16px; color: #333;}
1.2. 类选择器
- 类选择器使用"."(英文点号)进行标识,后面紧跟类名。
- 语法:类名选择器
<style>
.box {
font-size: 16px;
color: #333;
}
</style>
<p class="box"></p>
-
优点
:可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。 -
注意
:类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名, 尽量使用英文字母来表示。
- 多类名选择器:各个类名中间用空格隔开。
1.3. id选择器
id选择器使用#
进行标识,后面紧跟id名,元素的id值是唯一的,只能对应于文档中某一个具体的元素
<style>
#app {
font-size: 16px;
color: #333;
}
</style>
<div id="app"></div>
1.4. 通配符选择器
通配符选择器用*
号表示,*
就是选择所有的标签。它是所有选择器中作用范围最广的,能匹配页面中所有的元素。
注意:会匹配页面所有的元素,降低页面响应速度,不建议随便使用
* {
margin: 0;
padding: 0;
}
2. 复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
2.1. 后代选择器
.box p {color: red; font-size: 16px;}
2.2. 子元素选择器
- 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
- 其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个
>
进行连接 - 这里的子,指的是亲儿子。不包含孙子 重孙子之类。
.box>p {color: red; font-size: 16px;}
其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格
2.3. 同级选择器
2.3.1. ~(波浪号)
p ~ div
是指 p
之后出现的所有同级 div
元素都会被选中
<style>
p ~ div {
height: 300px;
background-color: red;
}
</style>
<div class="container">
<p></p>
<div></div>
<ul>
<li>
<!-- 这个 div 不会被选中 -->
<div></div>
</li>
</ul>
<div></div>
</div>
2.3.2. +(加号)
p + div
是指 p
之后相邻的同级 div
元素(div
只会选中一个)
<style>
p + div {
height: 300px;
background-color: red;
}
</style>
<div class="container">
<div></div>
<p></p>
<!-- 只有该 div 会被选中 -->
<div></div>
<div></div>
<ul>
<li>
<div></div>
</li>
</ul>
<div></div>
</div>
2.4. 交集选择器
p.f12 {
font-size: 12px;
}
2.5. 并集选择器
如果某些选择器定义的相同样式,就可以利用并集选择器,可以让代码更简洁。并集选择器(CSS选择器分组)是各个选择器通过 ,
连接而成的,通常用于集体声明。
- 任何形式的选择器(包括标签选择器、class类选择器 id选择器等),都可以作为并集选择器的一部分。
- 并集选择器通常用于集体声明 ,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为和的意思。
.one, p, #test {
color: #F00;
}
2.6. 伪类选择器
伪类用于定义元素的特殊状态。
2.6.1. 动态伪类
E:link
:匹配元素被定义了超链接且未被访问过,常用于链接描点上。(超链接点击之前)E:visited
:匹配元素被定义了超链接且已被访问过,常用于链接描点上。E:active
:匹配元素被激活时。常用于链接描点和按钮上E:hover
:用户鼠标悬停在元素E上E:focus
:匹配元素获取焦点时,常用于表单input
、textarea
等。
注意:a
标签的四种伪类选择器的顺序为:a:link
,a:visited
,a:hover
,a:active
2.6.2. 表单元素状态伪类
E:checked
:选中状态,匹配选中的复选按钮或者单选按钮表单元素E:enabled
:启用状态,匹配所有启用的表单元素E:disabled
:禁用状态,匹配所有禁用的表单元素
四、font字体
1. font-size
- font-size属性用于设置字号(字体大小)
谷歌浏览器
默认的文字大小为16px- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小。
body { font-size:16px; }
2. font-family
用于设置使用哪一种字体,可以指定多个字体,如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体,如果都没有,以电脑默认字体为准。
body { font-family: "Microsoft Yahei", Arial;}
CSS Unicode字体
font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
- 在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。
- xp 系统不支持 类似微软雅黑的中文。
- 解决方案:英文来替代。比如
font-family:"Microsoft Yahei"
。在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
3. font-weight
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400 等同于 normal,而 700 等同于 bold (数字表示粗细用的多) |
4. font-style
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
属性 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 font-style: normal; |
italic | 浏览器会显示斜体的字体样式。 |
5. font:综合设置字体样式
选择器 { font: font-style font-weight font-size/line-height font-family;}
- 注意:使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以
空格
隔开 - 其中不需要设置的属性可以省略(取默认值),但必须保留
font-size
和font-family
属性,否则font属性将不起作用。
五、字体外观属性
1. color
color属性用于定义文本的颜色
描述 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue,pink |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
2. text-align
text-align属性用于设置文本内容的水平对齐方式,相当于html中的align对齐属性。
属性 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
3. line-height
line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。
行高测量
行高 = 上距离 + 内容高度 + 下距离,上距离和下距离总是相等的,因此文字看上去是垂直居中的。
行高与高度的三种关系
- 如果行高
等于
高度,文字会垂直居中
- 如果行高
大于
高度,文字会偏下
- 如果行高
小于
高度,文字会偏上
4. text-indent
用于设置首行文本的缩进
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值。
- 建议使用em作为设置单位。
- 1em 就是一个字的宽度。如果是汉字的段落,1em 就是一个汉字的宽度
p {
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
5. text-decoration
通常我们用于给链接修改装饰效果
值 | 描述 |
---|---|
none | 默认。定义标准的文本。取消下划线(最常用) |
underline | 定义文本下的一条线。下划线 也是我们链接自带的(常用) |
overline | 定义文本上的一条线。(不用) |
line-through | 定义穿过文本下的一条线。(不常用) |
六、标签显示模式(display)
标签显示模式
是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型,它们也称为块元素和行内元素。
标签显示模式转换
- 块转行内:
display: inline;
- 行内转块:
display: block;
- 块、行内元素转换为行内块:
display: inline-block;
1. 块级元素(block)
常见的块元素有
<h1>~<h6>
、<p>
、<div>
、<ul>
、<ol>
、<li>
等,其中<div>
标签是最典型的块元素。
块级元素的特点
- 独占一行
- 高度,宽度,外边距以及内边距都可以控制。
- 宽度默认是容器(父级宽度)的100%
- 是一个容器及盒子,里面可以放行内或者块级元素
- 注意:只有文字才能组成段落,因此p标签里面不能放块级元素,特别是p不能放div。同理,还有h1~h6,dt,它们都是文字类块级标签,里面不能放其他块级元素。
2. 行内元素(inline)
常见的行内元素有
<a>
、<strong>
、<b>
、<em>
、<i>
、<del>
、<s>
、<ins>
、<u>
、<span>
等,其中<span>
标签最典型的行内元素。
行内元素的特点
- 相邻行内元素在一行上,一行可以显示多个。
- 高度、宽度直接设置是无效的。
- 默认高度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意
- 链接里面不能再放链接
- 特殊情况a里面可以放块级元素,但是给a转换一下块级模式最安全。
3. 行内块元素(inline-block)
在行内元素中有几个特殊的标签
<img>
、<input >
、<td>
,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点
- 和相邻行内元素(行内块)在一行上,但是之间会有空白风险。一行可以显示多个
- 默认宽度就是它本身内容的宽度。
- 高度,行高,外边距以及内边距都可以控制。
4. 三种模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
七、CSS三大特性
1. 层叠性
概念
- 所谓层叠性是指多种CSS样式的叠加
- 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
原则
- 样式冲突时,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。也就是后面的样式会覆盖前面的
2. 继承性
概念
- 子标签会继承父标签的某些样式,如文本颜色和字号。
- 想要设置一个可继承的属性,只需将它应用于父元素即可。
注意
- 恰当地使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。
- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
3. 优先级
概念
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,
- 选择器相同,则执行层叠性
- 选择器不同,就会出现优先级的问题。
权重计算公式
- 值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
- 关于CSS权重,我们需要一套计算公式来去计算,这个就是 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 最重要的 | ∞ 无穷大 |
权重叠加
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.
八、布局
CSS 提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位
1. 普通流(标准流)
- 块级元素会独占一行,从上向下顺序排列
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
2. 浮动
2.1. 什么是浮动
- 脱离标准普通流的控制,(浮)移动到指定位置(动)— 俗称
脱标
- 浮动的盒子 不再占用原来的位置
2.2. 语法
选择器 { float: 属性值; }
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流。
建议: 如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题
2.3. 作用
- 让多个盒子水平排列成一行,使得浮动称为布局的重要手段。
- 可以实现盒子的左右对齐等等。
- 浮动最早是用来控制图片,实现 文字环绕图片 效果。
- float属性会改变元素的display属性,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。
2.4. 浮动小结
特点 | 说明 |
---|---|
浮 | 加了浮动的盒子 「是浮起来」 的,漂浮在其他标准流盒子的上面。 |
漏 | 加了浮动的盒子 「是不占位置的」,它原来的位置 「漏给了标准流的盒子」。 |
特 | 「特别注意」:浮动元素会改变display属性, 类似转换为了行内块,但是元素之间没有空白缝隙 |
2.5. 清除浮动
为什么要清除浮动
因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
- 清除浮动本质:清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后, 父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
清除浮动的方法
选择器 { clear: 属性值; }
属性值 | 描述 |
---|---|
left | 清除左侧浮动的影响 |
right | 清除右侧浮动的影响 |
both | 这个是最常用的,同时清除左右两侧浮动的影响 |
-
额外标签法(隔墙法),是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
<div style="clear:both"></div>
- 优点:通俗易懂,书写方便
- 缺点:添加许多无意义的标签,结构化较差
-
- 父级添加overflow属性方法
- 可以给父级添加:overflow为 hidden| auto| scroll 都可以实现
- 优点:代码简洁
- 缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
-
- 使用after伪元素清除浮动,是方式一的升级版,好处是不用单独加标签了
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } /* IE6、7 专有 */ .clearfix { *zoom: 1; }
3. 定位
3.1. 什么是定位
- 脱离标准普通流的控制,将盒子 「定」 在某一个 「位」 置 — 俗称
定位
绝对
、固定
定位的盒子 不再保留原来的位置- 定位是用来布局的,它有两部分组成:定位 = 定位模式 + 边偏移
3.2. 边偏移
边偏移
需要和 定位模式
联合使用,单独使用无效
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top: 80px | 「顶端」偏移量,定义元素相对于其父元素「上边线的距离」。 |
bottom | bottom: 80px | 「底部」偏移量,定义元素相对于其父元素「下边线的距离」。 |
left | left: 80px | 「左侧」偏移量,定义元素相对于其父元素「左边线的距离」。 |
right | right: 80px | 「右侧」偏移量,定义元素相对于其父元素「右边线的距离」 |
3.3. 定位模式
选择器 { position: 属性值; }
值 | 语义 |
---|---|
static | 「静态」 定位(默认) |
relative | 「相对」 定位 |
absolute | 「绝对」 定位 |
fixed | 「固定」 定位 |
sticky | 「粘性」 定位 |
-
静态定位(static)
- 静态定位是元素的默认定位方式,无定位的意思。它相当于border里面的none,不要定位的时候用。
- 静态定位 按照标准流特性摆放位置。它没有边偏移。
- 静态定位在布局时几乎不用
-
相对定位(relative)
- 相对定位是元素相对于它原来在标准流中的位置来说的。
- 相对于自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
-
绝对定位(absolute)
- 是元素以带有定位的父级元素来移动位置,父元素的定位模式可以是
任意模式
- 父元素没有定位,则以浏览器为准定位(Document文档)。
- 绝地定位后会脱离标准流,不再占用原来的位置
- 定位口诀:
子绝父相
,一般布局时父元素的定位模式为relative
- 是元素以带有定位的父级元素来移动位置,父元素的定位模式可以是
-
固定定位(fixed)
- 固定定位是绝对定位的一种特殊形式;
- 固定定位后会脱离标准流,不再占用原来的位置
- 只认浏览器的可视窗口–浏览器可视窗口+边偏移属性来设置元素的位置
- 跟父元素没有任何关系;单独使用
- 不随滚动条滚动
-
粘性定位(sticky)
- 可以被认为是相对定位和固定定位的混合
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位 占有原来的位置(相对定位特点)
- 必须添加
top
,left
,right
,bottom
中的其中一个,如果不添加则会当做 相对定位 - 兼容性较差,IE不支持
3.4. 堆叠顺序(z-index)
- 在使用 「定位」 布局时,可能会 「出现盒子重叠的情况」。
- 加了定位的盒子,默认 「后来者居上」, 后面的盒子会压住前面的盒子。
- 应用
z-index
层叠等级属性可以 「调整盒子的堆叠顺序」。
特性如下
- 属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上;
- 如果属性值相同,则按照书写顺序,后来居上;
- 数字后面不能加单位
- z-index只能用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效。
3.5. 定位改变display属性
前面提过, display 是 显示模式, 可以通过以下方式改变显示模式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
绝对定位
和固定定位
也和浮动类似, 默认转换的特性,转换为行内块。
所以说, 一个行内的盒子,如果加了 「浮动」、「固定定位」 和 「绝对定位」,不用转换,就可以给这个盒子直接设置宽度和高度等。
3.6. 定位小结
定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换(行内块) | 使用情况 |
---|---|---|---|---|
静态static | 不脱标,正常模式 | 正常模式 | 不能 | 几乎不用 |
相对定位relative | 不脱标,占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 |
绝对定位absolute | 完全脱标,不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 |
固定定位fixed | 完全脱标,不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用,不需要父级 |
九、盒子模型
网页布局的本质
- 首先利用CSS设置好盒子的大小,然后摆放盒子的位置。
- 最后把网页元素比如文字图片等等,放入盒子里面。
- 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
- 标准 w3c 盒子模型的范围包
内容(content)
、边框(border)
、内边距(padding)
、和外边距(margin)
组成。 - 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们称为为盒子的边框
- 盒子内容与边框的距离是内边距
- 盒子与盒子之间的距离是外边距
W3c标准盒子模型
当设置为 box-sizing: content-box;
时,将采用标准模式解析计算,也是默认模式;
- 宽度:Element Height = content height + padding + border (Height为内容高度)
- 高度:Element Width = content width + padding + border (Width为内容宽度)
1. 盒子边框(border)
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框的样式:
- none:没有边框即忽略所有边框的宽度(默认值)
- solid:边框为单实线(最为常用的)
- dashed:边框为虚线
- dotted:边框为点线
边框综合设置
border : border-width || border-style || border-color
border: 1px solid red; 没有顺序要求
盒子边框写法总结表:
很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。
上边框 | 下边框 | 左边框 | 右边框 |
---|---|---|---|
border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
边框合并
通常表格两个单元格之间的边框会出现重叠,从而使边框变粗,这时就可以通过css
属性把重叠的边框合并到一起
border-collapse: collapse;
2. 内边距(padding)
padding属性用于设置内边距。是指边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding简写
值的个数 | 表达意思 |
---|---|
1个值 | padding:四个内边距都相同 |
2个值 | padding: 上下 ,左右 |
3个值 | padding:上 ,左右 ,下 |
4个值 | padding: 上 ,右 ,下 ,左 |
3. 外边距(margin)
margin属性用于设置外边距。margin就是控制 盒子和盒子之间的距离
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
- margin值的简写 (复合写法)代表意思 跟 padding 完全相同。
- 行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。
块级盒子水平居中
- 盒子必须指定宽度(width)
- 然后就给左右的外边距都设置为
auto
外边距合并
使用margin定义块元素的 「垂直外边距」 时,可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距 margin-bottom
,下面的元素有上外边距 margin-top
,则他们之间的垂直间距不是 margin-bottom
与 margin-top
之和,而是取 两个值中的较大者
,这种现象被称为相邻块元素垂直外边距的合并
解决方案:尽量给只给一个盒子添加margin值
嵌套块元素垂直外边距的合并(塌陷)
- 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
- 父元素的上外边距会与子元素的上外边距发生合并
- 合并后的外边距为两者中的较大者
「解决塌陷方案」
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距
- 可以为父元素添加overflow: hidden。
4. 圆角边框(border-radius)
单独分开写法
属性 | 描述 |
---|---|
border-top-left-radius | 左上角 |
border-top-right-radius | 右上角 |
border-bottom-right-radius | 右下角 |
border-bottom-left-radius | 左下角 |
复合写法
border-radius: length;
值 | 描述 |
---|---|
四个值 | 左上 ,右上 ,右下 ,左下 |
三个值 | 左上 ,右上、左下 ,右下 |
两个值 | 左上、右下 ,右上、左下 |
一个值 | 四个圆角值相同 |
- 其中每一个值可以为 数值或百分比的形式。
- 技巧:让一个正方形 变成圆圈
border-radius: 50%;
5. 盒子阴影(box-shadow)
box-shadow: offset-x offset-y [blur [spread]] [color] [inset]
值 | 描述 |
---|---|
offset-x | 阴影的水平偏移量。正数向右偏移,负数向左偏移。 |
offset-y | 阴影的垂直偏移量。正数向下偏移,负数向上偏移。 |
blur | 可选。阴影模糊距离,不能取负数。(影子模糊的虚实,0 就是纯实的,值越大阴影越虚) |
spread | 可选。阴影大小 |
color | 可选。阴影的颜色 |
inset | 可选。表示添加内阴影,默认为外阴影 |
/* 百度PC端头部阴影 */
.header{
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
注意
- 默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影失效
- 盒子阴影不占用空间,不会影响其他盒子的排列
6. 文字阴影(text-shadow)
text-shadow: offset-x offset-y [blur] [color]
值 | 描述 |
---|---|
offset-x | 阴影的水平偏移量。正数向右偏移,负数向左偏移。 |
offset-y | 阴影的垂直偏移量。正数向下偏移,负数向上偏移。 |
blur | 可选。阴影模糊距离,不能取负数。(影子模糊的虚实,0 就是纯实的,值越大阴影越虚) |
color | 可选。阴影的颜色 |
十、元素显示和隐藏
1. display
display 设置一个元素应如何显示
display: none;
: 隐藏元素(隐藏之后,不再保留位置。)display: blokc;
: 除了转换为块级元素之外,同时还有显示元素的意思。
2. visibility
指定一个元素应可见还是隐藏
visibility:visible;
: 元素可视visibility:hidden;
: 隐藏元素(隐藏之后,继续保留原有位置。)
3. overflow (溢出)
设置当元素的内容超过其指定高度及宽度时如何管理内容。
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条(默认) |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
使用场景
- 清除浮动
- 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。
十一、用户界面样式
所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验。
1. 鼠标样式
设置在元素上移动的鼠标指针采用何种系统预定义的光标形状。
cursor: 属性值
属性值 | 描述 |
---|---|
default | 小白 默认 |
pointer | 小手 |
move | 移动 |
text | 文本 |
not-allowed | 禁止 |
2. 轮廓线 outline
绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少,我们平时都是去掉的。最直接的写法是 :outline: 0;
或者 outline: none;
3. 防止拖拽文本域resize
主要作用于表单的多行文本框,默认是可拖拽的
<textarea style="resize: none;"></textarea>
4. vertical-align 垂直对齐
vertical-align 垂直对齐,它只针对于 「行内元素」 或者 「行内块元素」
- 有宽度的块级元素居中对齐,是margin: 0 auto;
- 让文字居中对齐,是 text-align: center;
属性值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 使元素及其后代元素的底部与整行的底部对齐。 |