2021-08-02

HTML基础

day05学习笔记
01-标签的分类
标签分为三大类，各自特点如下：
1.行内元素 ：
行内元素:不独占一行 不可以设置宽高 margin padding 水平可以设置 宽度由内容撑开行内元素:不独占一行 不可以设置宽高 margin padding 水平可以设置 宽度由内容撑开

2.块级元素
块级元素：独占一行 可以设置宽高 可以设置margin padding 默认宽度是容器的100%

3.行内块元素
行内块级元素: 不独占一行 可以设置宽高 例：img

02-标签的显示与隐藏
标签的隐藏主要有两种方法，就是给标签设置样式：
1、display: none;
2、visibility: hidden;

03-背景
background-color------背景颜色
颜色取值:
1. 颜色名字 red
2.16进制 #000000黑色 – #ffffff白色
3. rgb(8.255,0) 0-255
4.rgbaded, green, blue, alpha) 0-1 完全透明

background-image: url();-----背景图片，url里面填地址
背景比盒子大 从左上角取盒子的宽高
背景比盒子大 水平垂直重复

background-repeat: ; ------图片师范平铺，repeat平铺，no-repeat不平铺

background-position: 100px 100px; -----------图片位置
背景图片放在 盒子的哪个位置开始

background-attachment: fixed; 锁定在页面上 鼠标滚动时图片不会跟着滑动 很有用

background-size: 400px;
1.数字
两个值时，按照值压缩。 一个值时宽高按照大的

主要记以下两个
background-size: cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。，（不管图片变形，要把把盒子充满）

background-size: contain;把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（不管盒子多大，将图片完整显示）

04-盒子模型
标准盒子模型四要素:内容 内边距 外边距 边框
标准盒子—padding 会撑大盒子 显示的宽度=border+padding+content
怪异/IE盒子------padding 不会撑大盒子 显示的宽度width==border+padding+content
关于border的几个值如下：

/*border: 5px solid red;/*solid  double  dashed， 一次性设置是设置四周*/
            border-top: 5px solid red;
            border-right: 2px double blue;
            border-bottom: 3px dashed yellow;
            border-left: 5px solid black;
            /*solid单实线  dotted点线   double双实线 dashed虚线*/

利用border和盒子模型实现小三角形

代码如下：

			width: 0px;
            height: 0px;/*width和height要设置为0*/
            border:20px solid transparent;
            border-top: 20px solid rgb(22, 24, 23);/*顶部三角*/

            /* border-right: 20px solid rgb(128, 135, 240);/*右三角*/

            /*border-bottom: 20px solid rgb(240, 128, 143);/*底部三角*/

            /*border-left: 20px solid lightcoral;/*左三角 */