盒模型
一.盒模型概念
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签(了解)
- 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）(了解)
- 盒模型组成：margin + border + padding + content
- margin 外边距 padding 内边距 border控制边框 content控制内容
- margin+padding 控制布局
二.盒模型成员介绍
1.content
- 通过设置width和height来规定content
2.border
-
border组成:宽度,颜色,样式
-
border成员：border-left、border-right、border-top、border-bottom
-
border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
-
border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
- transparent(透明)(常用)
-
border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style
style属性值:
| 风格 | 解释 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状线 |
| double | 双实线 |
| groove | 槽状线 |
| ridge | 脊线 |
| inset | 内嵌效果线 |
| outset | 外凸效果线 |
3.padding
- padding成员：padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
| 值得个数 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
4.margin
- margin成员：margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
| 赋值个数 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
三.边界圆角
border-radius
- border-radius成员
| 成员 | 解释 |
|---|---|
| border-top-left-radius | 左上 方位 |
| border-top-right-radius | 右上 方位 |
| border-bottom-left-radius | 左下 方位 |
| border-bottom-right-radius | 右下 方位 |
- 单方位设置
| 赋值个数(值类型：长度 | 百分比) | 解释 |
|---|---|
| 1 | 横纵 |
| 2 | 横 | 纵 |
- 按角整体设置
| 赋值个数(值类型：长度 | 百分比) | 解释 |
|---|---|
| 1 | 左上 右上 左下 右下 |
| 2 | 左上 右下 | 右上 左下 |
| 3 | 左上 | 右上 左下 | 右下 |
| 4 | 左上 | 右上 | 右下 | 左下 |
- 分向整体设置
| 格式 | 解释 |
|---|---|
| 1 / 1 | 横向 | 纵向 |
四.显示方式
- display
| 值 | 描述 |
|---|---|
| inline | 内联 |
| block | 块级 |
| inline-block | 内联块 |
标签a、img、list
一、a标签
1、常用用法
<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>
2、相对路径
以当前文件作为参考，.代表当前路径，..代表上一级目录
3、常用属性
title -- 链接说明
target -- _self | _blank -- 目标位置
4、其他用法
- mailto：邮件给...
- tel：电话给...
- sms：信息给...
5、a标签reset操作
a {
color: #333;
text-decoration: none;
outline: 0;
}
6、锚点
① <a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>
② <a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>
7、鼠标样式
{
cursor: pointer | wait | move;
}
二、img标签
1、常用用法
<img src="https://image/icon.gif" />
<img src="./icon.gif" />
2、常用属性
alt -- 异常解释
title -- 图片解释
三、list列表
1、有序列表
<ol>
<li></li>
<li></li>
</ol>
2、无序列表
<ul>
<li></li>
<li></li>
</ul>
3、list的reset操作
ol, ul {
margin: 0;
padding: 0;
list-style:none;
}
伪类选择器
1、a标签四大伪类
- :link：未访问状态
- :hover：悬浮状态
- :active：活跃状态
- :visited：已访问状态
2、内容伪类
- :before：内容之前
- :after：内容之后
:before, :after {
content: "ctn";
}
3、索引伪类
- :nth-child(n)：位置优先，再匹配类型
- :nth-of-type(n)：类型优先，再匹配位置
注意：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始
4、取反伪类
- :not(selector)：对selector进行取反
盒模型布局
1、盒模型布局基本介绍
做页面之前的reset操作:
html,body{
margin:0;
}
- 布局方位：margin-left、margin-right、margin-top、margin-bottom
- 影响自身布局：margin-left、margin-top
- 影响兄弟布局：margin-right、margin-bottom
- 正向 / 反向：正值 / 负值
注意点:margin-top与margin-bottom(重叠取大值 兄弟关系 父子关系)
2、margin布局坑位
- 很多语义标签具有默认margin
- 父子标签margin-top重叠取大者
- 兄弟标签margin-bottom、margin-top重叠取大者