前端第三天
目录:
-
盒模型
-
边界圆角
-
a_img_list 标签
-
伪类选择器
-
盒模型布局
一、盒模型**
1、盒模型概念
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 狭义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
- 盒模型组成：margin + border + padding + content
v_hint：content = width x height
2、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.box {
margin: 10px;
border: solid;
padding: 10px;
width: 100px;
height: 100px;
/*background-color: orange;*/
/*覆盖*/
background: red;
}
/*组成:margin + border + padding + content*/
/*content = width * height*/
/*1.四个成员均具有自身独立显示区域,不相互影响(视觉上感觉会相互影响)*/
/*2.margin/padding外边距/内边距控制布局*/
/*3.border控制边框*/
/*4.content控制内容*/
/*padding*/
/*与content共有背景颜色*/
/*content*/
/*内容显示区域*/
/*红色区域 120 * 120 */
/*content区域 100 * 100 => 内容显示区域*/
/*值设置*/
.box {
/*控制四个方位*/
/*margin: 20px;
padding: 30px;*/
/*上下 左右*/
/*margin: 10px 20px;
padding: 30px 40px;*/
/*上 左右 下*/
/*margin: 10px 20px 30px;
padding: 30px 40px 50px;*/
/*上 右 下 左*/
margin: 10px 20px 30px 40px;
padding: 30px 40px 50px 40px;
/*总结*/
/*1.规定起始 2.顺时针 3.不足找对面*/
}
/*边框: 宽度,颜色,样式*/
.box {
border-width: 10px;
/*transparent透明,会透出背景颜色*/
/*border-color: transparent;*/
border-color: #333;
/*solid solid dotted dotted outset inset double*/
border-style: double;
/*整体设置*/
border: 5px solid orange;
}
</style>
</head>
<body>
<div class="box">12345</div>
</body>
</html>
3、content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
- 内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定
4、border
- border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
- 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
- border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style
| 风格 |
解释 |
| solid |
实线 |
| dashed |
虚线 |
| dotted |
点状线 |
| double |
双实线 |
| groove |
槽状线 |
| ridge |
脊线 |
| inset |
内嵌效果线 |
| outset |
外凸效果线 |
v_hint：border满足整体设置语法，eg：border: 1px solid red;
5、padding
- padding成员：padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
| 值得个数 |
方位 |
| 1 |
上下左右 |
| 2 |
上下 | 左右 |
| 3 |
上 | 左右 | 下 |
| 4 |
上 | 右 | 下 | 左 |
margin 与 padding 总结：
- 规定起始
- 顺时针
- 不足找对面
6、margin
- margin成员：margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
| 赋值个数 |
方位 |
| 1 |
上下左右 |
| 2 |
上下 | 左右 |
| 3 |
上 | 左右 | 下 |
| 4 |
上 | 右 | 下 | 左 |
二、边界圆角**
1、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边界圆角</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
/*单角设置*/
.box {
/*一个固定值: 横纵*/
border-top-left-radius: 100px;
/*两个固定值:横 纵*/
border-top-left-radius: 100px 50px;
/*百分比赋值*/
border-top-left-radius: 100%;
}
/*整体赋值*/
.box {
/*不分方位(横纵)*/
/*左上为第一个角,顺时针,不足找对角*/
/*border-radius: 10px 100px 50px;*/
/*区分横纵*/
/*1./前控制横向,后控制纵向*/
/*2.横向又可以分为1,2,3,4个值,纵向毅然*/
border-radius: 10px 100px 50px / 50px;
/*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/
/*所有最多可以赋值8个值*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2、border-radius
| 成员 |
解释 |
| border-top-left-radius |
左上 方位 |
| border-top-right-radius |
右上 方位 |
| border-bottom-left-radius |
左下 方位 |
| border-bottom-right-radius |
右下 方位 |
| 赋值个数(值类型：长度 | 百分比) |
解释 |
| 1 |
横纵 |
| 2 |
横 | 纵 |
| 赋值个数(值类型：长度 | 百分比) |
解释 |
| 1 |
左上 右上 左下 右下 |
| 2 |
左上 右下 | 右上 左下 |
| 3 |
左上 | 右上 左下 | 右下 |
| 4 |
左上 | 右上 | 右下 | 左下 |
3、其他相关属性
- max|min-width|height
- overflow
| 值 |
描述 |
| visible |
默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden |
内容会被修剪，并且其余内容是不可见的。 |
| scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit |
规定应该从父元素继承 overflow 属性的值。 |
| 值 |
描述 |
| inline |
内联 |
| block |
块级 |
| inline-block |
内联块 |
三、a_img_list 标签**
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a_img_list</title>
<style type="text/css">
/*reset操作: a标签一些默认属性的清除*/
a {
color: #333;
text-decoration: none;
outline: 0;
}
</style>
</head>
<body>
<!-- 一.基本使用 -->
<!-- 超链接标签:a -->
<!-- 双/行/单一类型标签 -->
<a href="https://www.baidu.com">前往百度</a>
<a href="./05_边界圆角.html">前往边界圆角页面</a>
<!-- ./或省略代表当前文件所在路径,可以访问与该文件同路径下的所有文件及文件夹 -->
<a href="./temp/temp.html">前往temp页面</a>
<!-- 二.属性 -->
<!-- title:鼠标悬浮的文本提示 -->
<!-- target:_blank,新开空白标签位来打开目标页面 -->
<a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>
<!-- 三.其他应用场景 -->
<!-- mailto | sms | tel -->
<a href="mailto:zero@163.com">信息给zero</a>
<!-- 四.锚点 -->
<!-- a与a href="#锚点名" -- name="锚点名" -->
<!-- a与标签 href="#锚点名" -- id="锚点名" -->
<a href="#tag">前往底部</a>
<!-- 测试锚点请tab -->
br * 100
<!-- 设置一个锚点 -->
<!-- .bottom做底部布局的区域 -->
<div class="bottom">
<a name="tag"></a>
<!-- <i id="tag"></i> -->
<!-- <div id="tag"></div> -->
...
</div>
<!-- 五.img使用 -->
<!-- src可以连接本地及网络图片 -->
<!-- alt:资源加载失败时的文本提示 -->
<!-- title:图片的文本信息(鼠标悬浮时展示) -->
<!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" alt="雪纳瑞" title="一览雪纳瑞风姿"> -->
<!-- 六.list列表 -->
<!-- reset操作 -->
<style type="text/css">
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
</style>
<!-- 有序列表 -->
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<!-- 无需列表:常用 -->
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
</html>
1、a标签
1—1、常用用法
<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>
1—2、相对路径
以当前文件作为参考，.代表当前路径，..代表上一级目录
1—3、常用属性
title -- 链接说明
target -- _self | _blank -- 目标位置
1—4、其他用法
- mailto：邮件给...
- tel：电话给...
- sms：信息给...
1—5、a标签reset操作
a {
color: #333;
text-decoration: none;
}
1—6、锚点
① <a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>
② <a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>
1—7、鼠标样式
{
cursor: pointer | wait | move;
}
2、img标签
2-1、常用用法
<img src="https://image/icon.gif" />
<img src="./icon.gif" />
2-2、常用属性
alt -- 异常解释
title -- 图片解释
3、list标签
3-1、有序列表
<ol>
<li></li>
<li></li>
</ol>
3-2、无序列表
<ul>
<li></li>
<li></li>
</ul>
3-3、list的reset操作
ol, ul {
margin: 0;
padding: 0;
list-style:none;
}
四、伪类选择器
1、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a {
color: #333;
text-decoration: none;
}
/*:link为一个整体,代表超链接的初始状态*/
a:link {
color: orange;
}
/*:hover鼠标悬浮*/
a:hover {
color: green;
/*鼠标样式*/
cursor: pointer;
}
/*:active活动状态中(被鼠标点击中)*/
a:active {
color: red;
}
/*:visited访问过的状态*/
a:visited {
color: cyan;
}
/*普通标签运用: :hover :active*/
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
background-color: orange;
cursor: pointer;
}
.box:active {
width: 400px;
border-radius: 50%;
}
/*内容伪类*/
.txt:before {
content: "我是前缀~~~"
}
.txt:after {
content: ">>>我是后缀"
}
/*伪类可以单独出现*/
/*:after {
content: "呵呵"
}*/
/*位置伪类*/
/*1.位置从1开始*/
/*2.*/
/*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
/*body a-baidu div01*/
div:nth-child(2) {
color: green;
}
/*先确定类型,再匹配位置*/
/*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
div:nth-of-type(2) {
color: cyan;
}
/*2n*/
/*
div ooo div
ooo div ooo
div ooo div
*/
/*3n*/
/*
div div ooo
div div ooo
div div ooo
*/
/*3n - 1*/
/*
div ooo div
div ooo div
div ooo div
*/
/*取反伪类*/
/*:not([d]) {
color: red;
}
body.body {
color: orange;
}*/
span:not([d]) {
color: red;
}
</style>
</head>
<body class="body">
<!-- 1.a标签的四大伪类 -->
<a href="./123.html">访问页面</a>
<a href="https://www.baidu.com">访问过页面</a>
<div class="box">box</div>
<!-- 2.内容伪类 -->
<div class="txt">原来的文本</div>
<!-- 3.位置伪类 -->
<div class="wrap">
<span>span01</span>
<div>div01</div>
<div>div02</div>
</div>
<!-- 4.取反伪类 -->
<span d>12345</span>
<span dd>67890</span>
</body>
</html>
1、a标签四大伪类
- :link：未访问状态
- :hover：悬浮状态
- :active：活跃状态
- :visited：已访问状态
2、内容伪类
:before, :after {
content: "ctn";
}
3、索引伪类（位置伪类）
- :nth-child(n)：位置优先，再匹配类型：找到所有结构下的第二个标签，如果刚好是div，那么匹配成功
- :nth-of-type(n)：类型优先，再匹配位置：先将页面中所有的div找出，再匹配那些在自己结构层次下的第二个div
v_hint：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始
4、取反伪类
- :not(selector)：对selector进行取反
五、盒模型布局
1、代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型布局</title>
<style>
/*做页面必备reset操作*/
html, body {
margin: 0
}
.box, .wrap {
width: 200px;
height: 200px;
background-color: red;
}
.wrap {
background: orange;
}
/*影响自身布局*/
/*.box {
margin-top: 30px;
margin-left: 100px;
}*/
/*影响兄弟布局*/
/*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/
/*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/
.box {
/*margin-bottom: 30px;*/
margin-right: 100px;
}
/*display:显示方式*/
/*块:block*/
/*内联:inline*/
/*内联块:inline-block*/
.box, .wrap {
display: inline-block;
/*vertical-align: top;*/
}
/*兄弟坑*/
/*盒模型布局坑只出现在和margin-top相关的地方*/
.s1, .s2 {
width: 100px;
height: 100px;
background-color: pink;
}
/*重叠取大值*/
.s1 {
margin-bottom: 30px;
}
.s2 {
margin-top: 50px;
}
/*父子坑*/
.sup {
width: 200px;
height: 200px;
background-color: cyan;
}
.sub {
width: 100px;
height: 100px;
background-color: orange;
}
/*父子top重叠,取大值*/
.sup {
margin-top: 50px;
}
.sub {
margin-left: 50px;
}
/*解决盒模型经典布局坑*/
/*1.将父级固定*/
.sup {
/*border-top: 1px solid black;*/
/*border-top: 1px solid transparent;*/
/*保证显示区域 200*200 */
/*height: 199px;*/
}
.sub {
/*margin-top: 50px;*/
}
/*2.通过padding*/
.sup {
padding-top: 50px;
height: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="wrap"></div>
<!-- 坑 -->
<section class="s1"></section>
<section class="s2"></section>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
2、盒模型布局基本介绍
- 布局方位：margin-left、margin-right、margin-top、margin-bottom
- 影响自身布局：margin-left、margin-top
- 影响兄弟布局：margin-right、margin-bottom
- 正向 / 反向：正值 / 负值
3、margin布局坑位
- 很多语义标签具有默认margin
- 父子标签margin-top重叠取大者
- 兄弟标签margin-bottom、margin-top重叠取大者
网友评论