CSS
目录
CSS 介绍
什么是 CSS
虽然 HTML 元素的属性可以调整一些样式，但是效果不够理想，而我们更愿意把样式编写在<style>标签中，让页面设计更美观更丰富。
实际上，这是通过 CSS 实现的。那么，什么是 CSS 呢？
如果说，HTML 是网页的“素颜”，那么 CSS 就是页面的“美妆师”，它就是让网页的外观更漂亮！
CSS（Cascading Style Sheet，层叠样式表）：简单地说，是用于设置和布局网页的计算机语言，它会告知浏览器如何渲染页面元素。例如，调整内容的字体、颜色、大小等样式、设置边框的样式、调整模块的间距等。
- 所谓
层叠：是指样式表允许以多种方式规定样式信息。即可以规定在单个元素中，也可以在页面头元素中，也可以在另一个 CSS 文件中。规定的方式会有次序的差别。 - 所谓
样式：是指丰富的样式外观。拿边框距离来说，允许设置任何类型的边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。
CSS 发展简史：
- CSS1：1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
- CSS2：1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。
- CSS3：2005 年 12 月，W3C 开始 CSS3 标准的制定，并遵循模块化开发，所以没有固定的发布时间，而是一段时间发布一些特性模块。
CSS 的组成
CSS 是一门基于规则的语言——你能定义用于你的网页中特定元素的一组样式规则。
这里面提到了两个概念：一是特定元素，二是样式规则。对应 CSS 的语法，也就是选择器（selects）和声明（declarations）。
- 选择器：指定将要添加样式的 HTML 元素的方式。可以使用元素的 name 值、class 值、id 值等多种方式。
- 声明：形式为
属性(property):值(value)，用于设置特定元素的属性信息。- 属性：指示文体特征，例如 font-size、width、background-color。
- 值：每个指定的属性都有一个值，该值指示您如何更改这些样式。
使用语法：
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
示例：
h1 {
color: red;
font-size: 5px;
}
示例详解：
语法由一个 选择器(selector) 起头。 它 选择(selects) 了我们将要用来添加样式的 HTML 元素，在示例中是为一级标题添加样式。
接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。
冒号之前是属性，冒号之后是值。不同的 CSS 属性(properties) 对应不同的合法值。在这个例子中，我们指定了color属性，它可以接受许多 颜色值(color values)；还有font-size属性，它可以接收许多 size units 值。
Chrome 开发者工具（F12）更改临时样式
基础语法
引入方式
1）内联方式
仅作了解，目前这种方式已几乎不用，因为维护艰难
内联样式是 CSS 声明在元素的style属性中，仅影响一个元素：
语法：
<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>
举例：
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
Hello World!
</h1>
效果：
虽然语法简单，但是样式无法复用到多个元素上，不利于维护。
2）内部样式表
内部样式表是将 CSS 样式放在style 标签中，通常 style 标签编写在 HTML 的 head 标签内部。
语法：
<head>
<style>
选择器 {
属性名: 属性值;
属性名: 属性值;
}
</style>
</head>
示例：
<head>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
效果：
内部样式只能作用在当前页面上，如果是多个页面，就无法复用了。
3）外部样式表
外部样式表是指将 CSS 编写在扩展名为.css 的单独文件中，并在 HTML 的<link>元素种引用它，通常 link 标签编写在 HTML 的 head 标签内部。
外部样式表是 CSS 附加到文档中的最常见和最有用的方法，因为你可以将 CSS 文件链接到多个页面，从而允许你用相同的样式表来设置所有页面的样式。
语法：
<link rel="stylesheet" href="需要引入的css文件路径">
-
rel：表示“关系（relationship）”，属性值指链接方式与包含它的文档之间的关系，引入 css 文件固定值为 stylesheet。
-
href：需要引入的 css 文件路径。
示例：
- 创建 styles.css 文件：
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
- link 标签引入文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
效果：
当然也可以把 CSS 文件放在其他地方，并调整指定的路径以匹配，例如：
<link rel="stylesheet" href="css/styles.css">
为了保证 CSS 文件的管理，建议在项目中创建一个css文件夹，专门保存样式文件。
引入的优先级
优先级从低到高如下：
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
注释
与 HTML 一样，鼓励你在 CSS 中进行注释，以帮助你理解几个月后返回的代码工作方式，并帮助其他使用该代码的人对其进行理解。
CSS中的注释以/*和开头*/。格式如下：
/* 设置h1的样式 */
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
选择器
说到 CSS 就不得不说到选择器，通常为了样式化某些元素，我们会通过选择器来选中 HTML 文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。
每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。
选择器的分类：
| 分类 | 名称 | 符号 | 作用 | 示例 |
|---|---|---|---|---|
| 基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div |
| 类选择器 | . |
基于class属性值匹配元素 | .center | |
| ID选择器 | # |
基于id属性值匹配元素 | #username | |
| 通用选择器 | * |
匹配文档中的所有内容 | * | |
| 属性选择器 | 属性选择器 | [] |
基于某属性匹配元素 | [type] |
| 伪类选择器 | 伪类选择器 | : |
用于向某些选择器添加特殊的效果 | a : hover |
| 组合选择器 | 后代选择器 | 空格 |
使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素 |
.top li |
| 子级选择器 | > |
使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素 |
.top > li | |
| 同级选择器 | ~ |
使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素 |
.l1 ~ li | |
| 相邻选择器 | + |
使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素 |
.l1 + li |
基本选择器
1）元素选择器
页面元素：
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
选择器：
/* 选择所有 li 标签，背景变成蓝色 */
li{
background-color: aqua;
}
2）类选择器
页面元素：
<div>
<ul>
<li class="ulist l1">List item 1</li>
<li class="l2">List item 2</li>
<li class="l3">List item 3</li>
</ul>
<ol>
<!--class 为两个值-->
<li class="olist l1">List item 1</li>
<li class="olist l2">List item 2</li>
<li class="olist l3">List item 3</li>
</ol>
</div>
选择器：
/* 选择 class 属性值为 l2 的元素，背景变成蓝色 */
.l2{
background-color: aqua;
}
/* 选择 class 属性值为 olist l2 的元素，字体为白色 */
.olist.l2{
color: wheat;
}
3）ID 选择器
页面元素：
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
<ol>
<li class="l1" id="four">List item 1</li>
<li class="l2" id="five">List item 2</li>
<li class="l3" id="six">List item 3</li>
</ol>
</div>
选择器：
/* 选择id值为tow的元素，更改背景色 */
#tow{
background-color: aqua;
}
4）通用选择器
页面元素：
<div>
<ul>
<li class="l1" id="one">List item 1</li>
<li class="l2" id="two">List item 2</li>
<li class="l3" id="three">List item 3</li>
</ul>
<ol>
<li class="l1" id="four">List item 1</li>
<li class="l2" id="five">List item 2</li>
<li class="l3" id="six">List item 3</li>
</ol>
</div>
选择器：
/* 选择所有元素 */
*{
background-color: aqua;
}
属性选择器
页面元素：
<ul class="l1">
<li >List item 1</li>
<li >List item 2</li>
<li >List item 3</li>
</ul>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
<p class="">
p item
</p>
选择器：
[属性名]{ }
元素名[属性名]{ }
元素名[属性名='属性值']{ }
伪类选择器
伪类选择器，用于选择处于特定状态的元素。例如，设置某些元素中的第一个元素，或者某个元素被鼠标指针悬停时的样式。
语法：
标签名:伪类名{ }
常用伪类：锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标悬停链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意：伪类顺序为 link、visited、hover、active，否则有可能失效。
示例：
<!-- HTML 代码 -->
<div>
<a class="red" href="https://www.baidu.com">红</a> <br/>
<a class="blue" href="https://www.baidu.com">蓝</a>
</div>
/* 选择class值为red的a标签，设置其在被访问后为红色链接*/
a.red:visited {
color: red;
}
组合选择器
页面元素：
<div>
<ul class="l1">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<ul class="l2">
<li id="four">List item 1</li>
<li id="five">List item 2</li>
<li id="six">List item 3</li>
</ul>
</ul>
</div>
1）后代选择器
.l1 li{
background-color: aqua;
}
2）子级选择器
.l1 > li{
background-color: aqua;
}
3）同级选择器
.l1 ~ li{
background-color: aqua;
}
4）相邻选择器
.l1 + li{
background-color: aqua;
}
总结
- CSS 的引入方式有三种，建议使用外部样式表。
- 注释类似于 java 多行注释。
- 选择器是 CSS 的重要部分：
- 基本选择器：可以通过元素、类、id 值来选择元素。
- 属性选择器：可以通过属性值选择元素。
- 伪类选择器：可以指定元素的某种状态，比如链接。
- 组合选择器：可以组合基本选择器，更加精细的划分如何选择。
案例：头条页面
案例分析
语义元素
为了更好的组织文档，HTML5 规范中设计了几个语义元素，可以将特殊含义传达给浏览器。
| 标签 | 名称 | 作用 | 备注 |
|---|---|---|---|
| header | 标头元素 | 表示内容的介绍 | 块元素，文档中可以定义多个 |
| nav | 导航元素 | 表示导航链接 | 常见于网站的菜单，目录和索引等，可以嵌套在 header 中 |
| article | 文章元素 | 表示独立内容区域 | 标签定义的内容本身必须是有意义且必须独立于文档的其他部分 |
| footer | 页脚元素 | 表示页面的底部 | 块元素，文档中可以定义多个 |
结构示例：
常见样式属性
| 分类 | 属性名 | 作用 |
|---|---|---|
| 边框 | border | 边框 |
| border-top | 上边框 | |
| border-radius | 设置边框圆角 | |
| 文本 | color | 颜色 |
| font-family | 字体样式 | |
| font-size | 字体大小 | |
| text-decoration | 下划线 | |
| text-align | 文本水平对齐 | |
| line-height | 行高，行间距 | |
| vertical-align | 文本垂直对齐 |
边框样式
/* 回顾简写样式 */
div {
border: 1px solid black;
}
单个边框
设置每个方向边框的宽度、样式和颜色，例如：
.box {
border-top: 1px solid black; /* 上边框 */
border-left: 5px double yellow; /* 左边框 */
border-bottom: 5px dotted green; /* 右边框 */
border-right: 5px dashed red; /* 下边框 */
}
无边框
当 border 值为 none 时，可以让边框不显示，用于特殊效果。
div {
width: 200px;
height: 200px;
border: none;
}
圆角
通过使用 border-radius 属性设置盒子的圆角。虽然能分别设置四个角，但是通常我们使用一个值，来设置整体效果，例如：
div {
width: 200px;
height: 200px;
border: 10px solid blue;
border-radius: 50px;
}
文本样式
颜色
color 属性可以设置所选元素的前景色。
p {
color: red;
}
颜色的值可以由多种方式赋值，常见的有颜色单词的 RGB 十六进制如下：
字体种类
font-family 属性用于指定某种字体。
字体大小
font-size 属性用于设置字体大小。常用单位如下：
-
px：即像素，文本高度像素绝对数值。 -
em：1em 等于我们正设置样式的当前元素的父元素上设置的字体大小。这是相对数值，能看懂即可。
文本修饰
text-decoration 属性用于设置字体上的文本装饰线。
文本对齐
text-align 属性用于控制文本如何在其包含的内容框中对齐。可用值如下，它们的工作方式与常规字处理器应用程序中的工作方式几乎相同：
left：左对齐文本。right：右对齐文本。center：使文本居中。justify：使文本散布，改变单词之间的间距，以使文本的所有行都具有相同的宽度。
行高
line-height 属性用于设置每行文本的高度，也就是行距。
案例实现
CSS 文件：
/*顶部样式*/
.top{
background: black; /*背景色*/
line-height: 40px; /*行高*/
text-align: right; /*文字水平右对齐*/
font-size: 20px; /*字体大小*/
}
/*顶部超链接样式*/
.top a{
color: white; /*超链接颜色*/
}
/*导航条样式*/
.nav{
line-height: 40px; /*行高*/
}
/*左侧分享样式*/
.left{
width: 20%; /*宽度*/
text-align: center; /*文字水平居中对齐*/
float: left; /*浮动*/
}
/*左侧分享图片样式*/
.left img{
width: 38px;
height: 38px;
}
/*左侧文字*/
.left span{
vertical-align: 50%; /*文字垂直居中对齐*/
}
/*中间正文样式*/
.center{
width: 60%; /*宽度*/
float: left; /*浮动*/
}
/*右侧广告图片样式*/
.right{
width: 20%; /*宽度*/
float: left; /*浮动*/
}
/*底部页脚超链接样式*/
.footer{
clear: both; /*清除浮动*/
background: blue; /*背景色*/
text-align: center; /*文字水平居中对齐*/
line-height: 25px;
}
/*底部页脚超链接文字颜色*/
.footer a{
color: white;
}
/*超链接样式*/
a{
text-decoration: none; /*去除下划线*/
color: black; /*超链接颜色*/
}
/*超链接悬浮样式*/
a:hover{
color: red; /*悬浮颜色*/
}
HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条页面</title>
<link rel="stylesheet" href="../css/news.css"/>
</head>
<body>
<!--顶部登录注册更多-->
<div class="top">
<a href="../案例二/04案例二：登录页面.html" target="_self">登录 </a>
<a href="#">注册 </a>
<a href="#">更多 </a>
</div>
<!--导航条-->
<div class="nav">
<img src="../img/logo.png"/>
<a href="#">首页 </a>/
<a href="#">科技 </a>/
<font color="gray">正文</font>
<hr/>
</div>
<!--左侧分享-->
<div class="left">
<a href="#"> <img src="../img/cc.png"/> <span> 评论</span> </a>
<hr/>
<a href="#"> <img src="../img/repost.png"/> <span> 转发</span> </a> <br/>
<a href="#"> <img src="../img/weibo.png"/> <span> 微博</span> </a> <br/>
<a href="#"> <img src="../img/qq.png"/> <span> 空间</span> </a> <br/>
<a href="#"> <img src="../img/wx.png"/> <span> 微信</span> </a> <br/>
</div>
<!--中间正文-->
<div class="center">
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>
<!--作者信息-->
<div>
<i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
<hr/>
</div>
<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<!--正文内容-->
<div>
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
<img src="../img/1.jpg" width="100%"/>
</p>
<p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
<p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
<img src="../img/2.jpg" width="100%"/>
<p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
<p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
</div>
</div>
<!--右侧广告图片-->
<div class="right">
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
</div>
<!--底部页脚超链接-->
<div class="footer">
<a href="#">帮助中心</a>
<a href="#">开放平台</a>
<a href="#">诚聘英才</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
<a href="#">隐私政策</a>
<a href="#">知识产权</a>
<a href="#">廉政举报</a>
</div>
</body>
</html>
案例：登录页面
案例分析
Table 元素
什么是 Table
Table（表格）是由行和列组成的结构化数据集（表格数据）。
表格标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| table | 表示表格，是数据单元的行和列的两维表 | 容器，默认无样式 |
| tr | table row，表示表中单元的行 | |
| td | table data，表示表中一个单元格 | |
| th | table header，表格单元格的表头，通常字体样式加粗居中 |
通过表格标签，我们可以创建出一张表格，示例如下：
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
跨行跨列
接下来使用 colspan 和 rowspan 来改进现有的表格：
<table>
<tr>
<th rowspan="2">GROUP</th>
<th colspan="2"> name</th>
</tr>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td rowspan="2">G1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
<tr>
<td rowspan="3">G2</td>
<td>Aohn</td>
<td>Doa</td>
</tr>
<tr>
<td>Bane</td>
<td>Dob</td>
</tr>
<tr>
<td>Cane</td>
<td>Doc</td>
</tr>
</table>
表格结构
表格布局标签，在实际使用时可以忽略，因此仅作了解
| 标签名 | 作用 | 备注 |
|---|---|---|
| thead | 定义表格的列头的行 | 一个表格中仅有一个 |
| tbody | 定义表格的主体 | 用来封装一组表行（tr 元素） |
| tfoot | 定义表格的各列汇总行 | 一个表格中仅有一个 |
示例：
<table>
<thead>
<tr>
<th>项目</th>
<th >金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>手机</td>
<td>3,000</td>
</tr>
<tr>
<td>电脑</td>
<td>18,000</td>
</tr>
</tbody>
</table>
常见样式属性
背景
CSS background 属性用于设置背景相关的样式。
背景色
background-color 属性用于设置 CSS 中任何元素的背景色。
.box {
background-color: #567895;
}
背景图
background-image 属性允许在元素的背景中显示图像，使用 url 函数指定图片路径。
body {
background-image: url(bg.jpg);
}
控制背景重复
background-repeat 属性用于控制图像的平铺行为。可用值为：
- no-repeat：停止完全重复背景
- repeat-x：水平重复
- repeat-y：反复重复
- repeat：默认值；双向重复
body {
background-image: url(star.png);
background-repeat: no-repeat;
}
轮廓
outline 属性：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
<style>
input {
outline: dotted;
}
</style>
<body>
<input type="text">
</body>
设置为 none 时，可以取消默认轮廓样式，用于特殊效果。
input {
outline: none;
}
显示
display 属性，用于设置一个元素应如何显示。可以设置块级和行内元素的切换，也可以设置元素隐藏。
元素显示
/* 把列表项显示为内联元素，无长宽*/
li {display:inline;}
/* 把span元素作为块元素，有换行*/
span {display:block;}
/* 行内块元素，结合的行内和块级的优点，既可以行内显示，又可以设置长宽，*/
li {display:inline-block;}
示例：
li {
display: inline-block;
width: 200px;
}
元素隐藏
当设置为 none 时，可以隐藏元素。
li {
display: none;
}
盒子模型
万物皆“盒子”。盒子模型是通过设置元素框与元素内容，或元素框与外部元素的边距，而进行布局的方式。
- element：元素。
- padding：内边距，也有资料将其翻译为填充。
- border：边框。
- margin：外边距，也有资料将其翻译为空白或空白边。
基本布局
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
<style>
div{
border: 2px solid blue;
}
.big{
width: 200px;
height: 200px;
}
.small{
width: 100px;
height: 100px;
margin: 30px;/* 外边距 */
}
</style>
<div class="big">
<div class="small">
</div>
</div>
增加内边距会增加元素框的总尺寸：
<style>
div{
border: 2px solid blue;
}
.big{
width: 200px;
height: 200px;
padding: 30px;/*内边距 */
}
.small{
width: 100px;
height: 100px;
}
</style>
<div class="big">
<div class="small">
</div>
</div>
外边距
单独设置边框的外边距，设置上、右、下、左方向：
margin-top
margin-right
margin-bottom
margin-left
值含义：
- 一个值时：
/* 所有 4 个外边距都是 10px */
margin:10px;
-
两个值时：
/* 上外边距和下外边距是 10px 右外边距和左外边距是 5px */ margin:10px 5px; margin:10px auto; /* auto 浏览器自动计算外边距，具有居中效果。 */ -
三个值时：
/* 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px*/ margin:10px 5px 15px; -
四个值时：
/*上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px*/ margin:10px 5px 15px 20px;
内边距
与外边距类似，单独设置边框的内边距，设置上、右、下、左方向：
- padding-top
- padding-right
- padding-bottom
- padding-left
案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="../css/login.css"/>
</head>
<body>
<!--顶部公司图标-->
<div>
<img src="../img/logo.png"/>
</div>
<!--中间表单-->
<div class="center">
<form action="#" method="get" autocomplete="off">
<table width="100%">
<thead>
<tr>
<th colspan="2">账 密 登 录<hr/></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label for="username">账号</label>
</td>
<td>
<input type="text" id="username" name="username" placeholder=" 请输入账号" required/>
</td>
</tr>
<tr>
<td>
<label for="password">密码</label>
</td>
<td>
<input type="password" id="password" name="password" placeholder=" 请输入密码" required/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="submit">确 定</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
<!--底部页脚-->
<div class="footer">
<br/><br/>
登录/注册即表示您同意
<a href="#" target="_blank">用户协议</a>
和
<a href="#" target="_blank">隐私条款</a>
<a href="#" target="_blank">忘记密码?</a>
</div>
</body>
</html>
