HTML&CSS

远方灬梦想

已于 2024-04-02 15:53:10 修改

阅读量995

点赞数 3

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

于 2024-04-02 15:50:49 首次发布

本文链接：https://blog.csdn.net/baidu_28665563/article/details/137271486

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端入门

1、HTML&CSS

1、选择器

通配选择器

元素选择器

类选择器

id选择器

复合(组合) 选择器

交集选择器(且)

<style>
p.class {
    ...
}
/* 元素选择器需在前面 */

.class1.class2 {
    ...
}
</style>

并集选择器(或者)

<style>
.class1,
.class2,
#id,
.class {
...
}
</style>
/* 任何选择器都可以作为选择器的一部分 */

后代选择器（儿子、孙子，重孙）
```
ul li a {
	...
}
.class1 a {

}
```
子代选择器(儿子)

div>a {
	..
}
div>p>a {

}
.class1 > a {

}

兄弟选择器(向下找)

div+p {
/*紧紧相连的兄弟元素,向下找*/
...
}
div~p {
    /*通用选择器，所有兄弟选择器，向下找*/
}

属性选择器

[属性名] { } /*选择具有title属性的元素*/
[title="a"]  { }  /*选择具有title属性，且值为a的元素*/
[title^="a"]  { } /*选择具有title属性，且值以a开头的元素*/
[title$="s"]  { } /*选择具有title属性，且值以s结尾的元素*/
[title*="u"]  { } /*选择具有title属性，且值包含u的元素*/

伪类选择器

a:link {
 /*选中没有访问过的a元素*/
    ...
}
a:visited {
    /**选择的是访问过的a元素/
}

伪类选择器-动态伪类

a:hover {} /*悬停*/
a:active {} /*激活*/
/*hover,active 所有元素都有*/
input:focus {}

伪类选择器-结构伪类

div>p:first-child {} /*选择div第一个子元素是p元素的元素*/
div p:first-child {} /*选择div所有的p元素，且p元素的是其夫元素的第一个子元素*/
p:first-child   {} /*p元素，且p元素的是其夫元素的第一个子元素*/

p:last-child  {}  /*p元素，且p元素的是其夫元素的最后一个子元素*/

div p:first-of-type {}   /*p元素，第一个类型为p*/

div p:nth-of-type(n) {} /*p元素，第n个类型为p*/

p:nth-child(n)  {/*p元素，且p元素的是其夫元素的最后一个子元素*/}
p:nth-child(2n/even) {} /*偶数*/
p:nth-child(2n+1/odd) {} /*奇数*/
p:nth-child(-n+5) {} /*前5个*/


div>p:not(.clasa1) /*否定(排除)结构伪类*/

在这里插入图片描述

伪类选择器-UI伪类

input:checked {} /* 选中的是勾选的复选框或者单选按钮*/
input:disabled

伪类选择器-目标伪类

div:target {} /* 选择描点选中的元素 */

伪元素选择器

div::first-letter {}
div::selection {}

input::placeholder {}
p::before {content：‘$’}
p::before {content：‘$’}

在这里插入图片描述

选择器的优先级

在这里插入图片描述

2、字体

在这里插入图片描述

3、盒模型

margin:

给一个块级元素左右margin设置auto可以实现该元素在其父元素水平居中


margin: 0 auto

margin 也可以设置负值

margin：-50px

在这里插入图片描述

margin塌陷问题

第一个元素的上外边距和最后一个元素的下外边距会作用在父元素上

overflow:hidden

在这里插入图片描述

margin 合并问题

在这里插入图片描述

元素的溢出

在这里插入图片描述

隐藏元素

在这里插入图片描述

样式的继承

在这里插入图片描述

元素居中

在这里插入图片描述

行内元素空白问题

在这里插入图片描述

行内块的幽灵空白问题

在这里插入图片描述

4、浮动float

在这里插入图片描述

特点：

在这里插入图片描述

浮动后的影响：

在这里插入图片描述

解决方案：

在这里插入图片描述

布局练习：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- #region -->
    <style>
        /* #region清除默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        /* #endregion清除默认样式 */
        .container {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }
        .logo {
            width: 200px;
        }
        .banner1 {
            width: 540px;
            margin: 0 10px;
        }
        .banner2 {
            width: 200px;
        }
        .page-header div {
            height: 80px;
            line-height: 80px;
            background-color: #ccc;
        }
        .menu {
            height: 30px;
            line-height: 30px;
            background-color: #ccc;
            margin: 10px auto;
            text-align: center;
        }
        .left-top div {
            width: 368px;
            height: 198px;
            margin-right: 10px;
            border: 1px solid #000;
            background-color: white;
            line-height: 200px;
        }
        .left-bottom div {
            width: 178px;
            height: 198px;
            margin-top: 10px;
            border: 1px solid #000;
            line-height: 200px;
            margin-right: 10px;
        }
        .rightbox div {
            width: 198px;
            height: 128px;
            border: 1px solid #000;
            line-height: 128px;
        }
        .item-eight {
            margin: 10px 0;
        }
        .footdiv {
            height: 60px;
            background-color: #ccc;
            line-height: 60px;
            margin: 10px 0;
        }
    </style>
    <!-- #endregion -->
</head>
<body>
    <div class="container">
        <div class="page-header clearfix">
            <div class="logo leftfix">logo</div>
            <div class="banner1 leftfix">banner1</div>
            <div class="banner2 leftfix">banner2</div>
        </div>
        <div class="menu">菜单</div>
        <div class="content clearfix">
            <div class="leftbox leftfix ">
                <div class="left-top clearfix">
                    <div class="content-left leftfix">栏目一</div>
                    <div class="content-right leftfix">栏目二</div>
                </div>
                <div class="left-bottom clearfix">
                    <div class="item-three leftfix">栏目三</div>
                    <div class="item-four leftfix">栏目四</div>
                    <div class="item-five leftfix">栏目五</div>
                    <div class="item-six leftfix">栏目六</div>
                </div>
            </div>
            <div class="rightbox rightfix">
                <div class="item-seven">栏目七</div>
                <div class="item-eight">栏目八</div>
                <div class="item-nine">栏目九</div>
            </div>
        </div>
        <div class="footdiv">页脚</div>
    </div>
</body>
</html>

5、定位position

相对定位

在这里插入图片描述

绝对定位

在这里插入图片描述

固定定位

在这里插入图片描述

粘性定位

在这里插入图片描述

定位的层级

在这里插入图片描述

特殊定位的应用

在这里插入图片描述

6、布局

1、版心

在这里插入图片描述

2、常用的布局名称

在这里插入图片描述

3、重置默认样式

在这里插入图片描述

2、HTML5

在这里插入图片描述

2、新增标签

在这里插入图片描述

视频标签：

在这里插入图片描述

音频标签：

在这里插入图片描述

3、新增全局属性

在这里插入图片描述

3、兼容性处理

在这里插入图片描述

3、CSS3

在这里插入图片描述

1、新增css属性

在这里插入图片描述

2、新增文本属性

在这里插入图片描述

3、新增渐变

在这里插入图片描述

4、web字体

在这里插入图片描述

5、字体图标

在这里插入图片描述

6、2D变换

在这里插入图片描述

缩放：

在这里插入图片描述

旋转：

2D旋转

在这里插入图片描述

扭曲:

在这里插入图片描述

多重变换

在这里插入图片描述

7、3D转换

在这里插入图片描述

8、过渡

在这里插入图片描述

过渡的高级使用：

在这里插入图片描述

复合属性：

在这里插入图片描述

9、动画

在这里插入图片描述

动画的复合属性

在这里插入图片描述

过渡和动画的区别：

过渡需要触发条件，动画不需要。动画可以指定关键帧。

10、多列布局

在这里插入图片描述

多列布局案例：

图片展示瀑布流

<style>
.outer {
    column-count: 5
}
img {
    width: 100%
    transition: 0.2s linear
}
img:hover {
    box-shadow: 0px 0px 20px black;
    transform:scale(1.02)
}
</style>
<div class="outer">
	<img src="...."/>
	<img src="...."/>
	<img src="...."/>
</div>

在这里插入图片描述

11、伸缩盒模型

在这里插入图片描述

主轴方向

在这里插入图片描述

主轴换行方式

在这里插入图片描述

主轴的项目对齐方式

在这里插入图片描述

默认主轴水平从左到右

在这里插入图片描述

侧轴

在这里插入图片描述

1、元素的水平垂直居中布局

<style>
.outer {
    height:400px;
    display:flex;
    /*方案一*/
    /*修改主轴内容水平居中*/
    justify-content: center;
    /*修改侧轴居中*/
    align-itme: center ;
}
.inter {
    width：200px;
    height:200px;
    /*第二中：水平垂直居中*/
    margin：auto;
}
</style>
<div class="outer">
	</div class="inter"></div>
</div>