HTML+CSS 基础

今晚月亮也睡了

已于 2022-06-16 11:00:14 修改

阅读量933

点赞数

分类专栏： htmlcss 文章标签： html css 前端

于 2022-06-16 10:22:01 首次发布

本文链接：https://blog.csdn.net/weixin_45756606/article/details/125311011

版权

htmlcss 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML标签

基础标签

<!DOCTYPE>定义文档类型

<html>定义HTML文档

<title>定义文档标题

<body>定义文档的主体部分

<h1>to<h6>定义HTML标题

<p>定义段落

<br>定义换行

<hr>定义水平线

定义注释

格式标签

<address>定义文档作者或拥有者的联系信息

<b>定义粗体文本。

<em>定义强调文本。

<i>定义斜体文本。

<strong>定义语气更为强烈的强调文本。

表单标签

<form>定义表单域，实现用户信息的收集和传递

input select textarea 都要有自己的name

属性	值	作用
action	url地址	用于指定接受并处理表单数据的服务程序url地址
method	get/post	设置表单数据的提交方式
name	名称	指定表单名称，区分你同一个页面中的多个表单域

<input>定义输入控件。

属性	值	作用
type	text	文本框用户可以里面输入任何文字
	password	密码框用户看不见输入的密码
	radio	单选按钮圆形必须起相同的name属性才可以实现单选 value属性向后台传输数据
	checkbox	复选框可以实现多选必须起相同的name属性才可以实现多选 value属性向后台传输数据
	submit	提交按钮
	reset	重置按钮
	button	普通按钮
	file	上传文件使用
name	自定义	自己起名
value	自定义	text文本框提示内容单多选提交后台
checked	checked	input首次加载自动选中
maxlength	正整数	最大长度
id	自定义	可以设置id

<label>

 <label for="qwe">男</label>
  <input type="text" id="qwe">   for和id的值要相同 点击男可选中input 增加用户体验

<textarea>定义多行的文本(文本域）输入控件。

属性  rows=“3” 显示的行数
	 cols=“20” 每行中的字符数

<button>定义按钮。

<select>定义选择列表（下拉列表）。

 <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>

<option>定义选择列表中的选项。

属性	值	作用
selected	selected	默认选中

图像/音频标签

<img>定义图像。单标签

属性	值
src 导入图片
title 提示文本鼠标放到图像上,提示的文字	我是pink老师思密达
alt 替换文本图像显示不出来的时候用文字替换	我是pink老师

<audio>定义音频内容。

<video>定义视频。

链接标签

<a>定义链接

锚点定位就是<a href="#live">  后加  <h3 id="live"></h3>

<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面

属性	值
href	href=“http://www.qq.com”
target 打开窗口的方式	_self； _blank	_self	当前窗口打开页面
		_blank	新窗口打开页面

<link>定义文档与外部资源的关系。

<nav>定义导航链接。

列表标签

<ul>定义无序列表。 *一般要清除内外边距 margin0 padding 0

<ol>定义有序列表。

<li>定义列表的项目。

<dl>定义定义列表。

<dt>定义定义列表中的项目。

<dd>定义定义列表中项目的描述。

 无序标签：
<ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
     </ul>  
有序标签：
 <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>pink老师 1</li>
    </ol>
自定义列表：
<dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
    <dl>

表格标签 tr th / tr td

<table>定义表格

属性	值
align	center
border	1 2 3
cellpadding 单元格内容与单元格边界之间的距离	0
cellspacing 各单元格之间的空隙	0
width	px
height	px

<caption>定义表格标题。

<th>定义表格中的表头单元格。

<tr>定义表格中的行。

<td>定义表格中的单元。

属性	值
colspan 单元格所占的列数	123
rowspan 单元格所占的行数	123

<thead>定义表格中的表头内容。

<tbody>定义表格中的主体内容。

样式/节标签

<style>定义文档的样式信息。

定义文档中的节。

<header>定义 section 或 page 的页眉。

<footer>定义 section 或 page 的页脚。

<section>定义 section

<article>定义文章。

<aside>定义页面内容之外的内容。

元信息标签

<head>定义网页头部信息。

<meta>定义关于 HTML 文档的元信息。

&nbsp；空格

CSS三种引入方式

内部样式
<style>
            div {
                color: pink;
            }
     </style>
</head>
<body>
    <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
   
</body>

行内样式
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>

外部样式
 <link rel="stylesheet" href="style.css">

CSS属性书写顺序（重点）

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    border-radius: 10px;
 }

CSS属性

请添加图片描述

CSS字体属性

字体大小：font-size: px/em/pt;

字体样式：font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

字体粗细：font-weight: bold;(粗体) lighter;(细体) normal;(正常)

700不要跟单位=font-weight: bold 400就是不加粗

字体： font-family: ‘微软雅黑’;

字体行高：line-height: normal;(正常) 单位：PX、PD

文字大小及字体：font: 20px ‘黑体’;

CSS文本属性

文本颜色 color：pink #ccfff rgb(255, 0, 255);

字体修饰：text-decoration: underline(下划线) overline(上划线) line-through(删除线) ；none（取消a默认的下划线）

文字对齐：text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

文字缩进：text-indent: 数值 px,em;

CSS背景属性

背景颜色：background-color: #3333;

背景图片：background-image: url();

背景图片重复：background-repeat: no-repeat; 不平铺

背景图片滚动：background-attachment: fixed;(固定) scroll;(滚动)

背景图片位置：background-position: left(水平) top(垂直)center ;

也可以跟精确数值 background-position:20px（左侧）30px（右侧）

1：
如果都是方位名词，则跟前后顺序无关
如果只指定一个方位名词 则另一个值默认居中对齐 center
2：
精确坐标只指定一个值 就是x坐标的值 另一个默认垂直居中

简写方法： background:#333 url(…) repeat fixed left top;

颜色图片平铺固定左上对齐

背景色半透明：background：rgba（0,0,0,0.3）; 黑色透明

rgba： red grnee blue alpha（透明度）取值0~1之间

其他属性

list-style：none 去除li前的小圆点

input { outline: none; } 去掉input style=”text“的轮廓线

textarea { resize: none; } 防止拖拽文本域

元素的显示与隐藏

display：none 隐藏对象不再占有原来的位置

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

visibility：hidden 元素隐藏但是还占有原来位置

visibility：visible ; 　元素可视

visibility：hidden; 　  元素隐藏

overflow 溢出

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

区块属性

垂直对齐：vertical-align: baseline;(基线) middle; bottom;

用于设置一个元素的垂直对齐方式，只针对行内元素或者行内块元素
baseline 默认 元素放在父元素的基线上
top middle bottom
给图片设置bottom基线 可以解决底层留白问题

元素空格：white-space: nowrap;(不换行)

显示：display:block;(块) inline;(行) inline-block;（行内块） table;

盒子属性

宽度：width: 数值 px;

高度：height: 数值 px;

外边距：margin: 1px 1px 1px 1px; 上右下左简写：marign: 1px;

内边距：padding: 1px 1px 1px 1px; 上右下左简写：padding:1px;

清除浮动：clear:left(左侧不允许浮动)/right(右侧不允许浮动)/both(左右不允许浮动)/inherit(继承父元素)

行间距：line-height: 数值px;

边框属性

边框样式：border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

边框宽度：border-width: 数值 px;

边框颜色：border-color:#3333;

简写方法：border：width style color;

定位属性

定位位置：Position: absolute; relative; static;

元素是否可见：visibility: inherit; visible; hidden;

内容溢出：overflow: visible; hidden; scroll; auto;

emmet语法

1：div*3 生成三个div

2：如果有父子级关系的标签，可以用 >  比如   ul > li就可以了
<ul><li></li></ul>
3：如果有兄弟关系的标签，用  +  就可以了 比如 div+p  
 <div></div>
 <p></p>
4：如果生成带有类名或者id名字的，  直接写  .demo  或者  #two   tab 键就可以了
    <div class="demo"></div>
    <div id="two"></div>p
    
    p.one  <p class="one"></p>
    
    ul>li.one*3 
    <ul>
        <li class="one"></li>
        <li class="one"></li>
        <li class="one"></li>
        </ul>    
5：如果生成的div 类名是有顺序的， 可以用 自增符号  $
   .demo$*3
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
6：如果想要在生成的标签内部写内容可以用  { }  表示
   div{123}   <div>123</div>
   div{$}*3   <div>1</div>
   			  <div>2</div>
   			  <div>3</div>

css选择器

1.后代选择器（用空格隔开）例子：ui li {} 选择ui里所有的li

2.子选择器（用>号）亲儿子选择器

3.并集选择器（用，隔开）元素1，元素2

4.伪类选择器（用：冒号）比如 :hover 、 :first-child 。

5.链接伪类选择器

a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接

6.focus选择器

一般用于input标签

   /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

css显示模式

margin 外边框距离

padding 内边框距离

1.块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
<div> 标签是最典型的块元素
特点：
自己独占一行
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放 行内 或者 块级元素。
注意：文字类的元素内不能放块级元素

2.行内元素

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>标签是最典型的行内元素
特点：
相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的。(能设置左右内外边距，上下不能设置)
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：
		链接里面不能再放链接
		特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

3.行内块元素

<img />、<input />、<td>
它们同时具有块元素和行内元素的特点
特点：
和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高、外边距以及内边距都可以控制（块级元素特点）

元素模式转换

比如a标签添加宽和高

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

单行文字垂直剧中代码：

让行高 line-hight 等于 height就可以了

div {
            /* 当行高等于盒子的高度时 文字就会垂直剧中 */
            width: 200px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
           /*  padding-left: 200px;  此处padding会撑大父盒子的宽度 */
        }
    </style>
</head>

<body>
    <div>我要居中</div>
</body>

css三大特性

1.层叠性

就近原则 如果一个选择器设置了相同属性 那么就会选择最近的哪个属性

2.继承性

子标签会继承父标签的某些样式，文字 颜色 字号等等
（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承

行高的继承：
 <style>
 body {
   font:12px/1.5 Microsoft YaHei；
 }
  div {
        /* 子元素继承了父元素 body 的行高 1.5 */
       /* 这个1.5 就是当前元素文字大小 font-size 的 1.5倍           所以当前div 的行高就是21像素   14*1.5 */
            font-size: 14px; 
      </style>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    </body>

3.优先级

在这里插入图片描述

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

 <style>
   		.test {
            color: red;
        }
        div {
            color: pink!important;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>

盒子模型

1.网页布局的本质

利用css摆盒子

2、盒子模型（Box Model）组成

边框、外边距、内边距、和 实际内容

在这里插入图片描述

3、边框（border）

注意：

边框会额外增加盒子的实际大小因此我们有两种方案解决：

测量盒子大小的时候,不量边框。
如果测量的时候包含了边框,则需要 width/height 减去边框宽度

属性	作用
border-width	边框粗细 px
border-style	：none 没有边框
	：soild 实线
	：dashed 虚线
	：dotted 点线
borer-color	边框颜色
border-collapse	: collapse 表示相邻边框合并在一起

边框写法：
 border: 1px solid red;  
 border-top: 1px solid red;  /* 只设定上边框， 其余同理 */

4、内边距（padding）边框与内容之间的距离

在这里插入图片描述

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

5、外边距（margin）盒子和盒子之间的距离
在这里插入图片描述
外边距可以让块级盒子水平居中的两个条件：

盒子必须指定了宽度（width）。
盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;   块级水平居中！！！！

行内元素或者行内块元素水平居中给其父元素添加 text-align:center

浮动（不占位置）

一个父盒子上面放盒子标准流放不下会挤下去所以要用到浮动

一般常用的网页布局 top banner main footer

传统网页布局的三种方式：

普通流（标准流）

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

标准流（普通流/文档流）

块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

在这里插入图片描述

注意：

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动元素经常和标准流父级搭配使用：

先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置.

一个元素浮动了，理论上其他的兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

float ： left

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }

        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }

        /* 这里必须写 .box .last 要注意权重的问题  20 */
        .box .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>

清除浮动

1、为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

2、清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度，就不会影响下面的标准流了

3、清除浮动样式

选择器{clear:属性值;} 实际工作几乎只用clear； both；

在这里插入图片描述

4、清除浮动的多种方式

1.额外标签法  W3C推荐做法
在最后一个浮动 加  <div class='clear'></div>  clear:both
要求这个新的空标签必须是块级元素
例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。

2.父级添加 overflow 属性
overflow:hidden | auto | scroll;

3.父级添加after伪元素
4.父级添加双伪元素

在这里插入图片描述

为什么需要清除浮动？

父级没高度。
子盒子浮动了。
影响下面布局了，我们就应该清除浮动了。

常见的图片格式

序号	格式	特点和常用的用途
1	jpg	JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
2	gif	GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际经常用于一些图片小动画效果
3	png	png图像格式，是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景. 如果想要切成背景透明的图片 ,请选择png格式.
4	psd	PSD图像格式，Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿. 对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.

定位

选择器 { 
    position: 属性值;    边偏移 top bottom left right
}

在这里插入图片描述

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

position: relative; 基于自身移动移动之后还占用之前的位置

position:absolute；基于父元素（子绝父相）移动后不再占用原来的位置

精灵图

用pxcook量距离 x y 轴

指定盒子宽高插入背景图片

background: url(images/abcd.jpg) no-repeat -327px -142px

字体图标

1.下载字体图标

icomoon 字库 http://icomoon.io

阿里 iconfont 字库 http://www.iconfont.cn/

2.把下载的 fonts 文件夹放入到自己的根目录下

3.把下载的icomoon style.css 文件打开复制自己的style里

4.打开下载的icomoon demo.html 点击小方框复制到 span标签里

5.span标签必须加入属性 font-family: ‘icomoon’;

<style>
    /* 字体声明 */  此处是复制的 style.css里的内容
     @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

  span {
    font-family: 'icomoon';  必须引用
    font-size: 100px;
    color:pink;
  }
  </style>
</head>

<body>
    <span></span>  此处是复制的下载的 demo文件里的指定图标
    <span></span>
</body>

css三角形

给一个div 不指定宽高

给border ：10px solid transparent 隐藏边框

width: 0;
height: 0;
border: 50px solid transparent;   隐藏边框
border-left-color: pink;

鼠标样式

 <li style="cursor: default;">我是默认的小白鼠标样式</li>

溢出的文字省略号显示

1.单行文本溢出显示省略号

 /*1. 先强制一行内显示文本*/
   white-space: nowrap;  （ 默认 normal 自动换行）
   
  /*2. 超出的部分隐藏*/
   overflow: hidden;
   
  /*3. 文字用省略号替代超出的部分*/
   text-overflow: ellipsis;

2.多行文本溢出显示省略号

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

常见的网页布局

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

常见的布局技巧

一：margin负值的运用

1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

二：文字围绕浮动元素

  * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;
        }
        
        .pic {
            background-color: aqua;
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }

        .pic img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
    </div>
</body>

三：CSS三角强化

把border-bottom 0 soild

<style>
    .box1 {
        width: 0;
        height: 0;
        
        /* 把上边框宽度调大 */
        /* border-top: 100px solid transparent;
        border-right: 50px solid skyblue; */
        /* 左边和下边的边框宽度设置为0 */
        /* border-bottom: 0 solid blue;
        border-left: 0 solid green; */
        
        /* 1.只保留右边的边框有颜色 */
        border-color: transparent red transparent transparent;
        /* 2. 样式都是solid */
        border-style: solid;
        /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
        border-width: 100px 50px 0 0 ;
    }

</style>
</head>
<body>
    <div class="box1"></div>
</body>

学习网站

W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/

块级元素和行内元素的区别

行内元素: a、span、b、img、strong、input、select、lable、em、button、textarea 、selecting 
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form
行内、块级元素区别: 
	1、块级元素会独占一行（div），其宽度自动填满其父元素宽度;
		行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化 
	2、一般情况下，块级元素（div）可以设置 width,height 属性 (注意:块级元素即使设置了宽度，仍然是独占一行的) 
		行内元素设置 width, height 无效
    3、块级元素可以设置 margin 和 padding 
     	行内元素的水平方向的 padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的 padding-top,padding-bottom,margin-top,margin-bottom 都不会产生边距效果。(水平方向有效， 竖直方向无效)