HTML+css-CSDN博客

本文链接：https://blog.csdn.net/qq_59313503/article/details/137327502

一个冒号伪类 ul li：nth-child(公式）

主轴对齐默认x轴属性名justify-content

垂直对齐方式 vertical-align

day01 HTML基础

09-文本格式化

HTML 文本格式化 | 菜鸟教程 (runoob.com)

11-图像标签

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

13-相对路径

从当前文件位置出发查找目标文件

绝对路径

16-链接标签

HTML 链接 | 菜鸟教程 (runoob.com)

   <a href="https://www.runoob.com/" target="_blank" >
        访问菜鸟教程!
    </a>

_blank 跳转到新界面 _self（在当前标签或窗口中打开链接）

17-音频标签

<audio src="./media/y2167.mp3" autoplay="autoplay" controls="controls"></audio>

controls显示音频控制面板
autoplay自动播放
loop循环播放

注意：在HTML5中属性名和属性值相同可以简写

18-视频标签

<video src="./video/v1.mp4" autoplay controls width="600" height="800"></video>

属性和音频差不多，loop 循环 muted静音 autoplay 自动

day02

02-无序列表ul

ul>li*3快速写三个列表

    <ul>
        <li>一</li>
        <li>一</li>
        <li>一</li>
    </ul>

05-有序列表ol

06-自定义列表

    <dl>
        <!-- 定义列表 -->
        <dt>列表标题</dt>
        <dd>列表描述</dd>
        <dd>一</dd>
        <dd>一</dd>
    </dl>

09-表格

10-表格结构标签

11-合并单元格

跨行合并，保留最上单元格，添加属性rowspan

跨列合并，保留最左单元格，添加属性colspan

12-表单

HTML 表单 | 菜鸟教程 (runoob.com)

input标签基本使用

type属性值不同，则功能不同。

 <form action="" method="post">
        <label for="name">姓名：</label>
        <input type="text" placeholder="请输入姓名" id="name">
        <br>
        <!-- password 密码框 -->
        <!-- label标签  增加点击范围   支持文本框、密码框。上传文件、单选框、多选框、下拉菜单、文本域等等 -->
        <!-- 方法一烦死了 -->
        <label for="mima">密码：</label>
        <!-- 占位符placeholder -->
        <input type="password" id="mima" placeholder="请输入密码">
        <br>
        <!-- 方法二 简单 -->
        <!-- radio单选框 name属性给相同的值可以单选  checked 默认选中-->
        性别：
        <label><input type="radio" name="sex">男</label>
        <label> <input type="radio" name="sex" checked>女</label><br>
        <!-- checkbox多选框 复选框 -->
        爱好：<input type="checkbox" name="" id="">舞蹈
        <input type="checkbox" name="" id="">音乐
        <!-- multiple多选文件 -->
        上传头像：<input type="file" name="上传文件" multiple><br>
        <!-- 文本域  rows行数  cols 列数 -->
        请您留言：<textarea name="" id="" cols="30" rows="10">评论</textarea><br>
        <!-- 下拉表单select 选择 option选项 selected 默认选项 -->
        籍贯：<select name="" id="">
            <option value="">北京</option>
            <option value="">广东 </option>
            <option value="" selected>山东</option>
        </select>
        <!-- 按钮button -->
        <button type="button">搜索</button>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>

17-lable标签

和表单控件和文字，增大表单控件的点击范围。

20-div和span布局标签

21-有语义的布局标签

22-字符实体

day03 css基础

03-css引入方式

04-标签选择器

基础选择器

1.标签选择器

选中同名标签设置相同的样式，如p,h1,div,a,img……

2.类选择器

可以多类名写法class=“类名1 类名2”

3.id选择器

#id名{css属性}

4.通配符选择器

10-文字属性

谷歌默认文字大小16px

字体粗细font-weight

/* 400不加粗=normal */
 font-weight: 400;
/* 700加粗=bold */
font-weight: 700;

字体样式 font-style

              /* 倾斜 */
            font-style: italic;
            /* 正常，不倾斜 */
            font-style: normal;

行高line-height

行高大于高度height，文字会偏下。
行高等于高度height，文字会居中。
行高小于高度height，文字会偏上。

font复合属性

em相对单位 1em就是当前元素一个文字的大小

图片水平居中对齐，不可以直接img对齐，而是给图片的父亲对齐。

文本装饰text-decoratin

颜色color

day04-css进阶

复合选择器，由两个或多个基础选择器，通过不同的方式组合而成。

02-后代选择器

选择器写法：父选择器子选择器{css属性}，父子选择器之间用空格隔开。

04-子代选择器

并集选择器

05-交集选择器

选择器写法：选择器1.选择器2{css属性}，选择器之间用点号.隔开。

06-伪类选择器

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

09-层叠性

相同的属性，后面覆盖前面的。

不同的属性，不会覆盖前面的。

10-优先级

优先级：也叫权重，当一个标签使用了多种选择器，会有匹配规则。

通配符<标签<类<id选择器<行内样式<!important

（选择标签的范围越大，优先级越低。）

11-优先级——叠加计算规则

想要修改谁的样式，就选谁的标签。

13-emmet语法

day05

css伪元素CSS 伪元素 | 菜鸟教程

一个冒号伪类 ul li：nth-child(公式）

作用：根据元素的结构关系查找多个元素

2n偶数，2n+1奇数

两个冒号伪元素选择器

注意：行内显示模式，不能设置宽高，必须设置content：“”属性

E::before 在内容前面添加

E::after 在内容的后面添加

盒子模型

CSS 盒子模型 | 菜鸟教程 (runoob.com)

内边距——padding 外边距——margin margin：auto居中有宽度的块级元素

上左右下

边框线——border transport透明边框

solid 实线 dashed虚线 dotted点线

border-方位名词 bd+上下左右先写大的border所有的再写小的

box-sizing:border-box不会撑大盒子

清除默认样式

*{
margin:0; 
padding:0;
}

list-style:none；取消li的小圆点

盒子模型——元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

hidden	超出隐藏
scroll	无论是否超出部分显示滚动条
auto	超出才显示滚动条位置

外边距合并以较大的为准

外边距塌陷：子级的上外编辑会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

取消子级margin，父级设置padding
父级设置overflow：hidden
父级设置border-top

盒子模型——圆角

border-radius

盒子模型——阴影

属性名：box-shadow

属性值：x 轴偏移量 y偏移量模糊半径扩散半径颜色内外阴影inset

rgba（0，0，0，.4）半透明

：hover鼠标经过显示

day06flex布局

text-decoration: none;链接无下划线

浮动

属性名：float

属性值 left 左对齐 right：右对齐

特点：浮动盒子顶对齐，具备行内块特点（内容带下），浮动盒子压住标准流的

清除浮动

方法一：额外标签法（一般不用）

在父元素的内容的最后添加一个块级元素

.clear{clear：both；}

方法二：单伪元素法

   .box::after {
            content: "";
            display: block;
            clear: both;
        }

方法三：双伪元素法（推荐）

       .clearfix::before,
        .clearfix::after {
            content: "";
            display: inline-table;
        }

        .clearfix::after {
            clear: both;
        }

方法四：父元素添加css属性 overflow：hidden

flex布局

不会出现脱标，不用清除浮动

父元素添加 display：flex ，子元素可以自动挤压或拉伸

主轴对齐默认x轴属性名justify-content

属性值	效果
flex-start	从起点开始依次排列
flex-end	从终点开始依次排列
center	子元素居中
space-between	两侧没有缝隙，中间均匀分布
space-around	中间缝隙是边上两倍
space-evenly	平均，缝隙一样大

侧轴对齐方式

属性名：align-items

属性值	效果
flex-start	顶部对齐
flex-end	底部对齐
center	居中对齐
stretch	拉伸铺满整个容器，默认和父亲一样高

flex-wrap 自动换行

wrap：换行 nowrap：不换行（默认）

行内对齐方式，多行两侧对齐

属性名：align-content

属性值	效果
flex-start	从起点开始依次排列
flex-end	从终点开始依次排列
center	子元素居中
space-between	两侧没有缝隙，中间均匀分布
space-around	中间缝隙是边上两倍
space-evenly	平均，缝隙一样大

day07

align-self只移动一个盒子

修改主轴方向

属性名： flex-direction 默认水平方向

属性名	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上到下
row-reverse	从水平方向，从右向左
colum-reverse	垂直方向，从下向上

弹性对比 flex

作用：控制弹性盒子的主轴方向的尺寸

属性名：flex

属性值：整数数字

flex：1 占一份 flex：2 占两份

day09 css高级

相对定位

position：relative

特点：

不脱标，占用自己原来位置
显示模式特点保持不变
设置边偏移则相对自己原来位置移动

绝对定位

position：absolute

特点：

脱标，不占位
显示模式具备行内块特点
设置偏移相对最近的已经单位的祖先元素改变位置
如果祖先都未定位，以浏览器可视区域

子绝对父相对

定位居中

transform：translate（-50%，-50%）

固定定位

position：fixed

侧边栏

堆叠层级 z-index

默认，根据标签的书写顺序排列，越往后越高

定位总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	1、已经单位的祖先元素 2、浏览器可视区
固定单位	fixed	是	行内块特点	浏览器窗口