1. 盒子模型
1.1 网页布局的本质
网页布局过程:
- 先准备好相关的网页元素(基本上都是盒子box)
- 利用CSS设置好盒子样式,然后摆放到相应位置(属于浮动与定位)
- 向盒子里装内容
1.2 盒子模型组成
盒子模型
是将HTML页面中的布局元素看作一个矩形的盒子,即承装内容的容器。
CSS盒子模型本质是一个盒子,封装周围的HTML元素,包括:边框(border)
、外边距(margin)
、内边距(padding)
和实际内容(content)
。
1.3 边框(border)
1.3.1
border可以设置元素的边框。边框由三部分组成:粗细、样式、颜色
语法:
border : border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
border-style
属性指定要显示的边框类型。
允许以下值:
dotted
- 定义点线边框dashed
- 定义虚线边框solid
- 定义实线边框double
- 定义双边框groove
- 定义 3D 坡口边框。效果取决于 border-color 值ridge
- 定义 3D 脊线边框。效果取决于 border-color 值inset
- 定义 3D inset 边框。效果取决于 border-color 值outset
- 定义 3D outset 边框。效果取决于 border-color 值none
- 定义无边框hidden
- 定义隐藏边框
边框简写:
border: 1px solid red ;没有顺序
边框分开写法:
border-top: 1px solid red; 只设定上边框,其余同理
1.3.2表格的细线边框
border-collapse
属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法:
border-collapse : collapse; 表示相邻的单元格合并在一起
1.3.3 边框影响盒子的实际大小
解决方案:
- 测量盒子大小时,不量边框
- 测量时包含了边框,用width/height减去边框宽度
1.4 内边距(padding)
1.4.1
padding
属性用于设置内边距,即边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding-left | 左内边距 |
padding-right | 右内边距 |
padding
简写:
值的个数 | 表达意思 |
---|---|
padding:5px | 上下左右都为5像素 |
padding:5px 10px | 上下为5像素,左右为10像素 |
padding:5px 10px 20px | 上5像素,左右10像素,下20像素 |
padding:5px 10px 20px 30px | 上5像素,右10像素,下20像素,左30像素 |
1.4.2 影响盒子的实际大小
如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
解决方案:
如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。
1.5 外边距(margin)
1.5.1
外边距的简写与内边距相似,CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:
- 如果缺少左外边距的值,则使用右外边距的值。
- 如果缺少下外边距的值,则使用上外边距的值。
- 如果缺少右外边距的值,则使用上外边距的值。
如下图所示:
所有外边距属性都可以设置以下值:
auto
- 浏览器来计算外边距length
- 以 px、pt、cm 等单位指定外边距%
- 指定以包含元素宽度的百分比计的外边距inherit
- 指定应从父元素继承外边距
1.5.2 外边距的合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
-
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
-
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。
-
注:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
1.6 边框(border)
border-radius
属性用于设置元素的外边框圆角
语法:
border-radius : length;
radius半径(圆的半径)原理
:(椭)圆与边框的交集形成圆角效果。
- 参数值可以为
数值
或百分比
的形式 - 如果是
正方形
,想要设置为一个圆,把数值修改为高度或者高度的一半
即可,或者直接写为50%
。 如果是一个矩形,设置为高度的一半就可以
- 该属性时一个
简写属性
,可以跟四个值,分别为左上角、右上角、右下角、左下角。
1.7 盒子阴影
可以使用box-shadow
属性为盒子添加阴影。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
- 注:
1.默认的是外阴影,但是不可以写这个单词,否则导致阴影无效。
2.盒子阴影不占空间,不会影响其他盒子排列。
1.7 文字阴影
text-shadow
属性向文本设置阴影。
语法:
text-shadow: h-shadow v-shadow blur color;
值 | 描述 测试 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
2. 浮动
布局 - 浮动和清除
float
属性规定元素如何浮动。
clear
属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
2.1 float 属性
2.1.1
float
属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器{float : 属性值; }
float
属性可以设置以下值之一:
left
- 元素浮动到其容器的左侧right
- 元素浮动在其容器的右侧none
- 元素不会浮动(将显示在文本中刚出现的位置)。默认值。inherit
- 元素继承其父级的 float 值
2.1.2 浮动的特性:
- 浮动元素会脱离标准流(
脱标
)——不再保留原来的位置
- 浮动的元素会
一行内显示并且元素顶部对齐
- 浮动的元素会具有
行内块元素
的特性
- 注:浮动的元素是互相贴靠在一起的(没有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
2.2 clear 属性
2.2.1
clear
属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。
语法:
选择器{clear : 属性值; }
clear
属性可设置以下值之一:
none
- 允许两侧都有浮动元素。默认值left
- 左侧不允许浮动元素right
- 右侧不允许浮动元素both
- 左侧或右侧均不允许浮动元素inherit
- 元素继承其父级的 clear 值
使用clear
属性的最常见用法是在元素上使用了float
属性之后。
2.2.2 清除浮动的方法
- 额外标签法,也称为隔墙法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
所有 CSS 浮动属性:
属性 | 描述 |
---|---|
box-sizing | 定义元素的宽度和高度的计算方式:它们是否应包含内边距和边框。 |
clear | 指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。 |
float | 指定元素应如何浮动。 |
overflow | 指定如果内容溢出元素框会发生什么情况。 |
overflow-x | 指定当溢出元素的内容区域时,如何处理内容的左/右边缘。 |
overflow-y | 指定当溢出元素的内容区域时,如何处理内容的上/下边缘。 |
3. 定位
3.1 定位组成
定位
:将盒子定在某个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位 =定位模式+边偏移。
定位模式
用于指定一个元素在文档中的定位方式。
边偏移
则决定了该元素的最终位置。
3.1.1 定位模式
定位模式决定元素的定位方式,它通过CSS的position
属性来设置,其值可以分为四个:
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
3.1.2 边偏移
边偏移就是定位的盒子移动到最终位置。有top 、bottom、left、right 4个属性。
边偏移属性 | 描述 |
---|---|
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
3.2 静态定位 static
静态定位是元素的默认定位方式
,即无定位。
语法:
选择器{ position : static;}
- 静态定位按照标准流特性摆放位置,没有边偏移
- 静态定位在布局时很少使用
3.3 相对定位 relative
相对定位
是在元素移动位置的时候,相对于它原来的位置
来说的。
语法:
选择器 { position : relative }
- 注:在使用相对定位时,无论是否进行移动,元素仍然
占据原来的空间
。因此,移动元素会导致它覆盖其它框。
3.4 绝对定位 absolute
绝对定位
是元素在移动位置的时候,是相对于它的祖先元素
来说的。
语法:
选择器 { position : absolute }
特点:
1.如果没有祖先元素
或者祖先元素没有定位
,则以浏览器为准定位。
2.如果祖先元素有定位,则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置
。
4. 伪类
伪类
用于定义元素的特殊状态。
可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
语法:
selector:pseudo-class {
property: value;
}
注:a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后,才能生效,a:active 必须在 CSS 定义中的 a:hover 之后才能生效,伪类名称对大小写不敏感。
所有伪类:
选择器 | 例子 | 例子描述 |
---|---|---|
:active | a:active | 选择活动的链接。 |
:checked | input:checked | 选择每个被选中的 元素。 |
:disabled | input:disabled | 选择每个被禁用的 元素。 |
:empty | p:empty | 选择没有子元素的每个 元素。 |
:enabled | input:enabled | 选择每个已启用的 元素。 |
:first-child | p:first-child | 选择作为其父的首个子元素的每个 元素。 |
:first-of-type | p:first-of-type | 选择作为其父的首个 元素的每个 元素。 |
:focus | input:focus | 选择获得焦点的 元素。 |
:hover | a:hover | 选择鼠标悬停其上的链接。 |
:in-range | input:in-range | 选择具有指定范围内的值的 元素。 |
:invalid | input:invalid | 选择所有具有无效值的 元素。 |
:lang(language) | p:lang(it) | 选择每个 lang 属性值以 “it” 开头的 元素。 |
:last-child | p:last-child | 选择作为其父的最后一个子元素的每个 元素。 |
:last-of-type | p:last-of-type | 选择作为其父的最后一个 元素的每个 元素。 |
:link | a:link | 选择所有未被访问的链接。 |
:not(selector) | :not§ | 选择每个非 元素的元素。 |
:nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个 元素,从最后一个子元素计数。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个 元素的每个 元素,从最后一个子元素计数 |
:nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 元素的每个 元素。 |
:only-of-type | p:only-of-type | 选择作为其父的唯一 元素的每个 元素。 |
:only-child | p:only-child | 选择作为其父的唯一子元素的 元素。 |
:optional | input:optional | 选择不带 “required” 属性的 元素。 |
:out-of-range | input:out-of-range | 选择值在指定范围之外的 元素。 |
:read-only | input:read-only | 选择指定了 “readonly” 属性的 元素。 |
:read-write | input:read-write | 选择不带 “readonly” 属性的 元素。 |
:required | input:required | 选择指定了 “required” 属性的 元素。 |
:root | root | 选择元素的根元素。 |
:target | #news:target | 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 |
:valid | input:valid | 选择所有具有有效值的 元素。 |
:visited | a:visited | 选择所有已访问的链接。 |
5. 伪元素
伪元素
用于设置元素指定部分的样式。
可用于:
- 设置元素的
首字母
、首行
的样式 - 在元素的内容
之前或之后
插入内容
语法:
selector::pseudo-element {
property: value;
}
所有伪元素:
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 元素之后插入内容。 |
::before | p::before | 在每个 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 元素的首字母。 |
::first-line | p::first-line | 选择每个 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
双冒号表示法 – ::first-line 对比 :first-line
在 CSS3 中,双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中,伪类和伪元素都使用了单冒号语法。
为了向后兼容,CSS2 和 CSS1 伪元素可接受单冒号语法。
总结:
通过学姐的讲解,我补充了一些知识点:
1. :link
和:visited
只用于超链接
2.必须设置content
属性伪元素才能生效,伪元素默认为行内元素
3.(1)z-index
属性是用来设置元素的堆叠顺序的,或称为元素层级,当元素发生堆叠时,层级高的元素会覆盖在层级低的元素上
(2)z-index属性只能在设置了position: relative | absolute | fixed
的元素和父元素设置了 display: flex
属性的子元素中起作用,在其他元素中是不作用的
非常感谢学姐的耐心讲解!!!同时也希望可以跟着学长学姐学到更多知识!