HTML与CSS学习总结基础3

鱼晚.

已于 2023-11-21 21:52:24 修改

阅读量52

点赞数

文章标签： html css 学习

于 2023-11-21 12:49:18 首次发布

本文链接：https://blog.csdn.net/m0_62146534/article/details/134517177

版权

结构伪类选择器

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

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child（N）	查找第N个E元素（第一个元素N值为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>       
       li:first-child{
        color:green;
       }
       li:last-child{
        color:rgb(244, 109, 131);
       }
       li:nth-child(3){
        color:purple;
       }      
    </style>
</head>
<body>
    <ul>
        <li>ewrw</li>
        <li>wrwrw</li>
        <li>erwe</li>
        <li>ertet</li>
        <li>erterte</li>
    </ul>
</body>
</html>

:nth-child(公式)

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

功能	公式
偶数标签	2n
奇数标签	2n+1；2n-1
找到7的倍数的标签	7n
找到第7个以后得标签	n+7
找到第7个以前的标签	-n+5

n默认从0开始

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器	说明
E::before	在E元素里面最前面添加一个元素
E::after	在E元素里面最后面添加一个元素

注意：1、必须设置content：“ ”属性来设置伪元素的内容，如果没有内容，引号内容留空

2、伪元素默认是行内显示模式

3、权重和标签选择器相同

PxCook

Pxbox（像素大厨）是一款切图设计工具软件，支持PSDW文件的文字、颜色、距离自动智能识别。

开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）

盒子模型

布局网页，摆放盒子和内容

盒子模型的重要组成部分

内容区域 - width&height
内边距 - Padding（内容与盒子边缘的距离）
外边距 - margin
边框线 - border

边框线

属性名：border（bd）

属性值：边框线粗细、线条样式（solid：实线；dashed：虚线；dotted：点线）、颜色（不区分顺序）

border：1px solid red；（1像素红色实线）

border-方位词

border-top（上边框）

border-bottom（底边框）

border-left（左边框）

border-right（右边框）

内边距

作用：设置内容与盒子边缘之间的距离

属性名：Padding

同上有padding-方位词的使用方法

内边距多值写法

取值个数示例含义
一个值 padding：10px；四个方位内边距都是10px
四个值 padding：10px 15px 10px 20px；分别表示上、右、下、左的内边距
三个值 padding：20px 30px 40px；分别表示上、左右、下
两个值 padding：40px 20px；分别表示上下、左右

取值个数	示例	含义
一个值	padding：10px；	四个方位内边距都是10px
四个值	padding：10px 15px 10px 20px；	分别表示上、右、下、左的内边距
三个值	padding：20px 30px 40px；	分别表示上、左右、下
两个值	padding：40px 20px；	分别表示上下、左右

尺寸计算

默认情况

盒子尺寸=内容尺寸+border尺寸+内边距尺寸

给盒子加border/padding会撑大盒子

两种解决办法

1、手动做减法，减去border/padding的尺寸

2、内减模式：box-sizing：border-box（不需要手动计算，加border和padding也不会撑大盒子）

外边距

属性名：margin

与padding属性值写法相同

外边距在盒子外，不会撑大盒子

居中写法：
margin：0 auto；
前提是盒子要有设置宽度width。

清除标签默认样式

*{

        margin：0;

        padding：0;

}

去掉有序、无序列表前的项目符号方法：
li{
    list-style:none;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

元素溢出

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

属性名：overflow

属性值

属性值效果
hidden 溢出隐藏
scroll 溢出滚动（显示滚动条位置，无论是否溢出）
auto 溢出滚动（溢出才显示滚动条位置）

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（显示滚动条位置，无论是否溢出）
auto	溢出滚动（溢出才显示滚动条位置）

外边距问题

外边距合并

场景：垂直排列的兄弟元素，上下margin会合并

现象：取两个margin中的较大值生效

塌陷问题

场景：父子级的标签，子级的标签添加上外边距会产生塌陷问题

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

解决方法

1、取消子级margin，父级设置padding

2、父级设置overflow：hidden

3、父级设置border-top

行内元素-内外边距问题

场景：行内元素添加margin、padding，只能改变水平位置，无法改变元素垂直位置

解决方法：给行内元素添加line-height可以改变垂直位置
span{
    margin:70px;
    padding:80px;
    line-height:90px;    /*行高可以改变垂直位置*/
}

圆角模型 - 圆角

作用：设置元素的文本框为圆角

属性名：border-radius

属性值：数字+px/百分比（如果是多个数值，即从左上角开始顺时针赋值，没有取值的角与对角值取值相同）

圆角最大半径为50%。

盒子模型 - 阴影

作用：给元素设置阴影效果

属性名：box-shadow

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

注意：

x轴偏移量和y轴偏移量必须书写
默认是外阴影，内阴影需要添加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>        
        /*前期准备工作*/
       a{
        text-decoration: none;
       }
       *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
       }
       li{
        list-style: none;
       }

       /*开始画盒子模型*/

       .xinwen{     /*大盒子*/
            width:360px;
            height: 200px;
        /* background-color: rgb(253, 252, 252);设置背景色是为了方便测试 */
            margin:150px auto;

       }
       .xinwen .c1{    /*第一个盒子*/
            height: 36px;
            background-color: #eee;
            border:1px solid #dbdee1;
            border-left:none;
            
       }
       .xinwen .c1 a{    /*第一个盒子的a标签*/
    
            display: block;
            width:48px;
            height: 34px;
            background-color: white;           
            border-top:3px solid #ff8400;
            border-right:1px solid #dbdee1;
            margin-top: -1px;   /*把盒子网上挪动，使橙色部分和父级边框重合 */


            line-height: 34px;
            text-align: center;    /*使文字居中对齐*/
            font-size:14px;
            color:#333;         /*链接文字的颜色*/
            
       }
       .xinwen .c2{
            padding:5px;

       }
       .xinwen .c2 li{
            background-image:url(./c.jpg);    /*设置第一个背景图，橙色点点*/
            background-repeat: no-repeat;     
            background-size: 10px;            /*背景图大小*/
            background-position: 0 center;    /*背景图垂直方向居中对齐*/
            padding-left: 15px;             /*设置li列表内容左边距，这里的背景图不会一起移动是因为设置的不是img标签的padding*/

       }
       /*第二个盒子的a标签*/
       .xinwen .c2 li a{
            background: url(./p.jpg) no-repeat;
            background-size: 14px;
            background-position: 0 center;
            padding-left: 17px;


            font-size: 12px;
            color:#666;
            line-height: 24px;

       }

       .xinwen .c2 li a:hover{
            color:#ff8400;
       }

       
       

    </style>
</head>
<body>
    <div class="xinwen">
    <div class="c1">
        <a href="#">新闻</a>
    </div>
    <div class="c2">
        <ul>
            <li><a href="#">春眠不觉晓</a></li>
        </ul>
        <ul>
            <li><a href="#">处处闻啼鸟</a></li>
        </ul>
        <ul>
            <li><a href="#">夜来风雨声</a></li>
        </ul>
        <ul>
            <li><a href="#">花落知多少</a></li>
        </ul>
        <ul>
            <li><a href="#">寒食东风御柳斜</a></li>
        </ul>
    </div>
</div>
</body>
</html>