CSS基础

最新推荐文章于 2024-11-05 20:00:00 发布
最新推荐文章于 2024-11-05 20:00:00 发布
阅读量115 收藏
点赞数
分类专栏： 前端--基础 文章标签： css tensorflow 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53940095/article/details/132696301
版权

CSS基础

CSS引入方式

（1）内嵌式
在<head>标签中嵌套<style>标签；
优先级高于外联式；
（2）外联式
在<head>标签中通过<link>标签引入外部.css文件；
优先级最低；
（3）行内式
在标签中通过属性style引入css；
优先级最高；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./my.css">
    <!-- 这是外联式引入 -->
    <style>
        h1{
            color: blueviolet;
        }
    </style>
    <!-- 这是内嵌式引入 -->
</head>
<body>
    <h1>123</h1>
    <p>这是段落标签</p>
    <div style="color: blue;">这是div标签</div>
    <!-- 这是行内式引入 -->
</body>
</html>

CSS选择器

CSS选择器用于选择某个/些标签，修改其样式。常见的CSS选择器有标签选择器、类选择器、id选择器、通配符选择器等；

标签选择器

选中一类标签，修改样式；
例如，选中页面所有的<p>，修改其字体颜色为红色；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>pppppppp</p>
    <p>pppppppp!!!!!!!</p>
</body>
</html>
类选择器

选中具有相同class属性值的标签，修改其样式；
例如，class为redp的字体颜色为红色，为greenp的字体颜色为绿色，为fontsize的字号大小为30px；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .redp{
            color: red;
        }
        .greenp{
            color: green;
        }
        .fontsize{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 定义+使用 -->
    <p class="greenp">11111</p>
    <p class="redp fontsize">22222</p>
</body>
</html>
id选择器

选择id属性值相同的一个标签（id具有唯一性），修改其样式；
例如，修改id为div1的字体颜色为蓝色。字号大小为30px；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            color: blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="div1">蓝色的大字</div>
</body>
</html>
通配符选择器

选择所有标签，修改其样式；
例如，修改所有字体颜色为红色；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
        }
        /* 通配符可以用来清除默认样式 */
    </style>
</head>
<body>
    <div>123</div>
    <p>456</p>
    <h3>789</h3>
</body>
</html>
复合选择器
后代选择器

选中父级标签内的子级标签，修改其样式；
例如，修改<div>中的所有<p>标签的样式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
    <div>
        <p>这是div的子标签p</p>
    </div>
</body>
</html>
子代选择器

与后代选择器不同，子代选择器是只能选中父级标签的直接子级标签（相对于父级标签的嵌套深度为1），修改其样式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div a {
            color: rebeccapurple;
        }
        /* 选所有子节点 */
        div > a{
            text-decoration: none;
        }
        /* 选直接子节点 */
    </style>
</head>
<body>
    <div>
        父级<br>
        <a href="#">div的子节点</a>
        <p>
            <a href="#">div的非直接子节点</a>
        </p>
    </div>
</body>
</html>
并集选择器

并集选择器能够同时选中多种不同类型的标签，修改其样式（通过’,'分隔）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,div,span{
            color: aqua;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>123</p>
    <div>456</div>
    <span>789</span><br>
    <h1>000</h1>
</body>
</html>
交集选择器

交集选择器是将选择条件叠加在一起，选择符合所有条件的标签，修改其样式（通过’ '分隔）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box{
            color: red;
        }
        /* 交集选择器 */
        div.box>h1{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p class="box">这是p标签</p>
    <p>ppppp</p>
    <div class="box">
        这是div标签
        <h1>这是要有下划线的标签</h1>
    </div>
</body>
</html>
伪类选择器

伪类选择器有多种伪类，这里先以动态伪类的:hover为例（设置鼠标悬停时的标签样式）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器标签</title>
    <style>
        a:hover{
            color: red;
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <a href="#">超链接</a>
</body>
</html>

当div1和div2是同级标签，且要通过div1悬停时修改div2的样式时，如下所示：

.div1:hover +.div2 img{
    display: none;
}
        /* 使用hover控制同级元素 */

而结构伪类选择器，是根据元素在HTML中的结构关系查找元素；
参数可以填写公式（可以不是常数），例如2n、2n+1、-n+5（前5个）、n+5（第5个及其以后的元素）[这里n=0,1,…]；
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child{
            color: aqua;
        }
        ul li:last-child{
            color: red;
        }
        ul li:nth-last-child(2){
            color: purple;
        }
        /* 倒数第n个（不含0） */
        ul li:nth-child(3){
            color: greenyellow;
        }

        ul.test2 li:nth-child(2n){
            color: chocolate;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
    <hr>
    <ul class="test2">
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
        <li>这是第10个li</li>
    </ul>
</body>
</html>

其他常见的伪类选择器请参考链接：
伪类选择器

CSS选择器优先级

!important＞内联选择器＞id选择器＞类别选择器＞属性选择器＞伪类选择器＞通配符选择器＞继承选择器；

在复合选择器中，优先级按如下模式进行计算：
在这里插入图片描述
其中，每一级之间没有进位，规则类似于字符串的字典序；
另外，继承选择器的属性无法通过加!important修改优先级；

字体和文本样式

字体样式
属性名称含义
font-size字体大小，带单位px
font-weight字体粗细，400正常，700加粗
font-style字体倾斜，normal正常，italic倾斜
font-family字体类型，可以写多个，sans-serif为无衬线字体

font为复合属性，可以简写为如下形式：

div{
	font:style weight size/line-height family;
}

其中style、weight等直接写属性的取值；line-height为行高，可以取值为像素或字号倍数；

文本样式

text-indent属性表示文本缩进，取值为像素或em（1em为标签的font-size大小）；
text-align属性表示文本水平对齐方式，取值为left/right/center；
text-decoration属性表示文本修饰，常见取值如下表所示：

属性值效果
underline下划线
line-through删除线
overline上划线
none无装饰线（常用于超链接清除下划线）

在这里插入图片描述
另外，标签居中可以通过margin属性取值为0 auto实现（在盒子模型中有此属性）；

标签背景

background-color为背景颜色，取值有英文单词、rgb、rgba、#等方式；
其中，非rgba的设置可以通过opacity属性设置透明度；
background-image为背景图片，通过其中的url()设置图片源；
background-repeat属性为背景平铺方式；
在这里插入图片描述
background-position为背景图片的位置，有两个值，分别是水平位置（left/center/right）、垂直位置（top/center/bottom）；

background也是一个复合属性，常见的取值方式如下：

div.img{
            margin: 0 auto;
            width: 100px;
            height: 100px;
            background: blue url("../2023_08_31/88.jpg") no-repeat center center cover;
         }

当然，background可以不按color image repeat position顺序取值；

标签显示模式

通过display属性，可以修改标签现有的显示模式；
在这里插入图片描述
三种显示模式的特点如下图所示：
在这里插入图片描述

CSS特性

CSS有三大特性，分别是继承性、层叠性、优先级；

继承性

子元素默认继承父元素样式特点，其中，文字控制属性是可以继承的，如color、font、text、line-height等；

层叠性

选择器优先级相同时体现层叠性，效果可能是叠加，也可能是覆盖；
以下面这个例子为例，gray会覆盖red（覆盖），而div没有设置的属性font-size，由.box选择器进行设置（叠加）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red;
            color: gray;
        }
        .box{
            font-size:30px;
        }
    </style>
    <!-- 选择器优先级相同时，才通过层叠性判断，表现为覆盖/互补 -->
</head>
<body>
    <div class="box">123</div>
</body>
</html>
优先级

继承＜通配符选择器＜标签选择器＜类选择器＜id选择器＜行内样式＜!important
（详见“CSS选择器”部分）

盒子模型

每个盒子由内容content、内边距区域padding、边框区域border和外边距区域margin构成；
在这里插入图片描述

border属性

border为复合属性，有边框线宽度（px）、边框线种类、颜色等；
若使用某个方向的边框线，则使用boder-方向设置即可；
border-style有多种取值，如下图所示：
在这里插入图片描述

padding属性

padding属性表示内边距，最多取4个值；
当4个值时，顺序为上右下左（顺时针）；
当3个值时，表示上 左右 下；
当2个值时，表示上下，左右；
当1个值时，表示四个方向；

margin属性

margin属性表示外边距，属性取值顺序同上述的padding；
另外，可以通过margin:0 auto；设置标签居中，0表示上下外边距为0px，而auto则表示左右的外边距要相等，因此为水平居中；

自动内减属性

由于padding、margin、border等的出现，width和height的设置并非整个盒子的宽度和高度；
通过设置box-sizing属性值取值为border-box即可实现自动内减（width和height设置即为盒子的大小）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: red;
            box-sizing: border-box;
            padding: 10px;
            border: 10px solid black;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

line-height属性失效问题

当使用line-height属性垂直居中时，其不能设置在font复合属性后面，否则该居中属性失效（若要使用，则使用font-size等属性单独设置font）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        .box{
            height: 40px;
            border-top: 3px #ff8500 solid;
            border-bottom: 1px #edeef0 solid;
            padding: 0px 0px 0px 0px ;
            display: block;
        }
        .box a{
            /* width: 80px; */
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            text-decoration: none;
            padding: 0px 10px;
        }
        /* line-height不能写在font复合属性前面 */
        .box a:hover{
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪导航1111111</a>
        <a href="#">新浪导航2</a>
        <a href="#">新浪导航3</a>
        <a href="#">新浪导航4</a>
    </div>
</body>
</html>

清除标签默认样式

通过通配符选择器或并集选择器，清除margin和padding（设置为0）；
通过list-style属性设置为none清除ul、ol的列表圆点；

外边距margin问题

（1）垂直布局的块级元素，上下的margin会合并，并取二者的最大值；

（2）具有嵌套关系的块级元素，子元素的margin-top会作用在父级元素上（塌陷现象）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.f1{
            width: 500px;
            height: 500px;
            background-color: red;
            overflow: hidden;
        }
        div.f2{
            width: 300px;
            height: 300px;
            background-color: blue;
            margin-top: 50px;
            /* display: inline-block; */
            /* 转换为行内块元素也可 */
        }
    </style>
</head>
<body>
    <div class="f1">
        <div class="f2">
            son
        </div>
    </div>
</body>
</html>

可以通过以下方式清除塌陷的影响：
给父元素设置border-top/padding-top；
给父元素这是overflower:hidden；
转换为行内块元素；
设置浮动；

伪元素

使用CSS模拟标签，常常用于装饰的图片；
::berfore，在父元素内容的最前面添加一个伪元素；
::after，在父元素内容的最后添加一个伪元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test{
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .test::before{
            content: '123';
            color: red;
        }
        /* 添加的是行内元素 */

        .test::after{
            content: '345';
        }
    </style>
</head>
<body>
    <div class="test">
        test
    </div>
</body>
</html>

在这里插入图片描述

必须设置content属性才能生效，且为行内元素；

推荐CSS书写顺序

浮动/display→盒子模型→文字样式；
按照上述内容书写，有利于浏览器进行解析；

网页基础布局方式

布局方式说明
标准流块元素独占一行（垂直布局）、行内元素/行内块元素一行多个（水平布局）
浮动垂直布局的块元素变成水平布局
定位自由摆放，常用于层叠的情况
浮动

浮动元素会脱离标准流，在标准流不占位置（相当于浮动在标准流的上层）；
浮动元素比标准流高半个级别，可以覆盖标准流中的元素；
浮动后的标签具备行内块的特点（在一行、宽高会生效）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* display: inline-block; */
        }

        .one{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin-top: 50px;
            padding-top: 50px;
            box-sizing: border-box;
        }

        .two{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            /* float: right; */
            float: left;
            margin: 0 auto;
            /* 因浮动，不会生效 */
        }

        .three{
            width: 300px;
            height: 300px;
            background-color: aqua;
        }

        .test{
            width: 500px;
            height: 500px;
            display: inline-block;
        }

        img{
            width: 300px;
            height: 300px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <!-- 浏览器解析时，代码换行会产生一个空格 -->

    <!-- 浮动之图文环绕 -->
    <!-- <br>
    <div class="test">
        <img src="../2023_08_31/88.jpg" alt="">
        白梦妍是白鹿的本名，白鹿是1994年9月23日出生的中国内地女演员和模特。她出生于江苏常州，在2016年7月，白鹿在陆虎单曲《留言》mv里担任女主角，之后在个人首部电视剧《朝歌》中担任女主角而正式出道。2017年，白鹿在古装剧《凤囚凰》中一人分饰两角，同年主演剧版《西游记女儿国》，饰演女儿国国王无双。2018年，凭借《凤囚凰》获得“年度戏剧潜力艺人”奖项。2019年8月6日，主演电视剧《烈火军校》播出。
    </div> -->
</body>
</html>

在这里插入图片描述

清除浮动的影响

可以设置父标签的高度；
可以通过额外标签清除（在父元素最后加入块元素clear:both）；
单伪元素清除法；
双伪元素清除法；
父元素设置overflow:hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            width: 1000px;
            /* height: 300px; */
            margin: 0 auto;
            background-color: pink;
            /* overflow: hidden; */
            /* 也可清除浮动 */
        }
        /* 不清除影响，则top的高度为0px */
        .bottom{
            height: 100px;
            background-color: green;
        }

        .left{
            width: 200px;
            height: 300px;
            float: left;
            background-color: grey;
        }

        .right{
            float:right;
            width: 700px;
            height: 300px;
            background-color: blue;
        }

        .clearfix::after{
            content:'';
            display: block;
            /* 要是块标签，伪元素是行内，需要转换 */
            clear:both;

            height: 0;
            visibility: hidden;
            /* 兼容性问题 */
        }

        /* .clearfix{
            clear:both;
        } */
        /* 在父级最后使用额外的标签，CSS属性clear:both即可 */

    </style>
</head>
<body>
    <!-- 父子级标签，父级不浮动，子级浮动，后续标签会显示在上面 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="bottom">
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

定位

通过position属性设置定位的方式：

定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed

偏移值需要设置两个方向，水平和垂直方向，可以是像素，也可以是百分比：

方向属性名含义
水平left距离左边的距离
水平right距离右边的距离
垂直top距离上边的距离
垂直bottom距离下边的距离
相对定位

相对于自身原有的位置移动，原有的位置不会被占据；
当四个方向属性值都被定义时，以left和top为准；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 相对定位 */
            /* 
                占有原来的位置；
                具有原标签的显示模式；
                依据原位置改变位置；
                都有属性时，以left和top为准；
             */
            /* position: relative;
            left: 100px;
            top: 100px; */

            /* 绝对定位 */
            /*
                有已定位的父级，按照父级为参照物；
                否则按照浏览器窗口为参照物；

                脱标，不占位置（类似于浮动）；
                不具备原标签的显示模式→行内块元素显示模式；
             */

            position: absolute;
            left: 100px;
            top: 100px;
            background-color: blue;
            width: 300px;
            height: 300px;
        }

        /* 父级相对定位，子集绝对定位 */

        .div1{
            position: relative;
            left: 100px;
            top: 100px;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .div2{
            position: absolute;
            left: 50px;
            top: 50px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .div3{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <p>1111111111111111111111111111111</p>
    <p>2222222222222222222222222222222</p>
    <div class="div1">
        <div class="div2">
            <div class="div3">
            </div>
        </div>
    </div>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
</body>
</html>

在这里插入图片描述

绝对定位

相对于非静态定位的父元素定位；
存在已经定位的父级元素则按其为参照物，否则以浏览器窗口为参照物；
常使用父元素相对定位+子元素绝对定位模式
绝对定位的水平居中不能使用margin 0 auto实现，要使用left50%+margin-left width/2实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: absolute;
            /* 绝对定位的标签不能使用margin:0 auto实现水平居中 */
            /* margin: 0 auto; */
            /* 参照物的50% */
            left: 50%;
            /* margin-left: -150px; */
            top: 50%;
            /* margin-top: -150px; */

            transform: translate(-50%,-50%);
            /* 向左位移宽度的50%，向上位移高度的50% */

            width: 300px;
            height: 300px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

在这里插入图片描述

固定定位

相对于浏览器进行定位移动；
配合方位属性进行定位；
例如，浏览器窗口滑动，该元素不随滑动而移动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 相对定位 */
            /* 
                占有原来的位置；
                具有原标签的显示模式；
                依据原位置改变位置；
                都有属性时，以left和top为准；
             */
            /* position: relative;
            left: 100px;
            top: 100px; */

            /* 绝对定位 */
            /*
                有已定位的父级，按照父级为参照物；
                否则按照浏览器窗口为参照物；

                脱标，不占位置（类似于浮动）；
                不具备原标签的显示模式→行内块元素显示模式；
             */

            position: absolute;
            left: 100px;
            top: 100px;
            background-color: blue;
            width: 300px;
            height: 300px;
        }

        /* 固定定位 */
        /*
            固定定位脱标； 
            改变位置参考浏览器窗口，不随网页滚动而移动；
            具备行内块特点，没有内容时需要宽高设置；
         */
        .div1{
            position: fixed;
            left: 100px;
            top: 100px;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .div2{
            position: absolute;
            left: 50px;
            top: 50px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .div3{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <p>1111111111111111111111111111111</p>
    <p>2222222222222222222222222222222</p>
    <div class="div1">
        <div class="div2">
            <div class="div3">
            </div>
        </div>
    </div>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
    <p>3333333333333333333333333333333</p>
    <p>4444444444444444444444444444444</p>
</body>
</html>

元素层级关系

标准流＜浮动＜定位；
相对定位、绝对定位、固定定位默认层级相同；
都属于定位时，在HTML下面的层级更高，但是可以通过z-index属性改变（越大越在上面，默认值为值为0）；

对齐方式

对齐方式说明
vertical-align垂直对齐
baseline基线对齐（默认）
top顶部对齐
middle中部对齐
bottom底部对齐

浏览器遇到行内和行内块标签时，当做文字处理，使用vertical-align取值为middle即可（较大者）；
对内部的图片居中，可以对父元素加text-align属性；

光标类型

通过cursor属性设置光标类型：

取值说明
default箭头（默认值）
pointer小手
text工字型（选中文字时的样式）
move十字光标
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            margin: 100px auto;

            cursor: pointer;
            /*
                move 十字型
                text 工字型
                pointer 手型 
             */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

边框圆角

通过border-radius属性，可以改变标签矩形的四角属性；
取值为圆角的半径，单位是px或百分比；
顺时针赋值，左上角开始，没有的取值看对角；
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            margin: 100px auto;
        }

        .box{
            cursor: pointer;
            
            border-radius: 50px;
            /*
                左上开始，顺时针转动，没有的看对角取值
                超过范围时画出的是一个圆
             */
        }

        .round{
            border-radius: 50%;
            /* 尺寸的一半即可 */
        }

        .jiaonang{
            height: 100px;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="round"></div>
    <div class="jiaonang"></div>
</body>
</html>

溢出部分显示属性

overflow属性，改变标签内容溢出时的显示模式；

属性取值说明
visible溢出部分可见（默认）
hidden隐藏
scroll无论是否溢出都显示滚动条
auto溢出时才显示滚动条
元素显示隐藏方式

visibility:hidden，占位隐藏，不从DOM中移除，具有继承性，不能触发事件；
display:none，不占位隐藏，从DOM中移除，不具有继承性，不能触发事件；
overflow:hidden，不占位隐藏（多余的部分被裁剪），不具有继承性；
opacity:0，占位隐藏（使其变得透明），能够触发事件；

精灵图

将多张小图合并为一张大图，合成的大图为精灵图；
精灵图的使用，可以减少服务器发送次数；
常常使用行内标签，如<span>使用精灵图；

使用精灵图的步骤：
（1）创建盒子，和小图尺寸相同（background-size）；
（2）精灵图设置为背景图bgi；
（3）修改背景图的位置bgp（background-position）；

background复合属性

background:color image repeat position/size（顺序无所谓，但是要有position/size）；
其中，bgs可以取值数字px/百分比/contain/cover；
contain，包含，等比例缩放，不会超出盒子的最大，背景可能填不满；
cover，覆盖，等比例缩放，刚好填满盒子没有空格，图片可能显示不全；

盒子阴影

box-shadow属性，控制盒子阴影；

单属性说明
h-shadow水平偏移量（必填，可负）
v-shadow垂直偏移量（必填，可负）
blur模糊程度
spread阴影扩大
color阴影颜色
inset内部阴影
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: greenyellow;

            margin: 100px auto;

            box-shadow: 5px 10px 20px 10px black;
            /* 外阴影不能写outset 默认值即可 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition属性

transition属性表示过渡，取值为(要过渡的属性 过渡时长)，常常配合:link、:hover等伪类选择器使用（但不是在其内部添加）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.box{
            width: 200px;
            height: 200px;
            background-color: greenyellow;

            /* 大小要变大，鼠标悬停时 1秒内从200 200变化至400 400 */
            transition: width 1s,height 1s,background-color 1s;
            /* 可以用all 时间 */
        }

        .box:hover{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

骨架标签

→HTML5（告知浏览器HTML的版本）；

<html lang=”xx”>，网页使用的语言，zh-CN→简体中文；
<meta charset=”xx”>，网页使用的字符编码；
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”> 移动端网页兼容性；

SEO

SEO，搜索引擎优化，令网站在搜索引擎中排名更靠前；
有竞价方式、html后缀、标签语义化等常见形式；

标签说明
<title>网页标题标签
<meta name=”description” content=”xxx”>网页描述标签
<meta name=”keywords” content=”xxx”>网页关键词标签
icon

icon类似于网页的logo：
在这里插入图片描述
通过<link>标签可以引入icon：

<link rel="short icon" href="url" type="image/x-icon">
深海质粒ABCC9
关注
专栏目录
CSS基础语句
weixin_53968665的博客
12-25 1463
CSS
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础样式
qq_62283164的博客
07-19 1516
CSS基础样式 一、css语法规范 二、CSS选择器 1.类（class）选择器 2.id选择器 3.CSS选择器优先级 三、网页中引入css样式 1.内联（行内）样式 2.内部样式表 3.外部样式表 4.link标签引入外部样式文件 ​编辑 5.CSS样式优先级 四、字体样式 五、文本样式 六、鼠标样式 七、背景样式 八、列表样式 九、CSS伪类 十、CSS练习之美团左侧菜单栏...
CSS基础知识
ashfiqa的博客
01-21 2205
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 4096
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
星星之火的语言c学习
08-18 2880
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 1965
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 4224
CSS基础入门，详细总结
CSS基础中padding详解
ning的博客
10-09 2507
通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元素尺寸的影响。掌握这些知识，可以帮助我们在布局设计中更加灵活和精确地控制元素的显示效果。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSS基础：最详细 padding的 4 种用法解析。
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
【前端基础】CSS进阶
qq_41413652的博客
11-01 1065
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
Web前端第二次作业
nixiaoge的博客
11-05 343
作业要求：制作带有下拉悬停菜单的导航栏。
CSS例子: 横向排列的格子
11-01 525
【代码】CSS例子: 横向排列的格子。
CSS中的背景色和前景色
最新发布
低代码布道师的博客
11-05 781
在我们的样式设计中，通常会有背景色和前景色的概念。前景色我们通常用来设置文本的颜色，而背景色通常是文本的所在容器的颜色。比如如果我们把文本放在普通容器里，那普通容器就需要设置背景色，而文本可以设置前景色。前景色的样式用color表示，而背景色用background-color设置。
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

深海质粒ABCC9

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值