HTML及CSS重点内容总结

最新推荐文章于 2024-10-02 23:31:06 发布

march on_6

最新推荐文章于 2024-10-02 23:31:06 发布

阅读量134

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/yyh619/article/details/121598688

版权

构造三角形

思路：

采用盒子边框设置；
各边使用一种颜色；
隐藏三边，保留一边，改变形状即为所求。

解题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形构造</title>
    <style>
     div{
         border: 200px solid #663399;
         width:0;
         height:0;
         border-color: rgba(0, 0, 255, 0) rgba(152, 251, 152, 0) red rgba(255, 255, 0, 0);
        }
    </style>
</head>
<body>
    <div> </div>
</body>
</html>

列举选择器及权重

解题：（优先级）

1.最高：

作者样式表中的 ! important样式 (直接写在定义的后面，提高指定样式的的应用优先级)

2.次高：

内联样式：写在元素样式内部，优先级较高（相当于一个四位数的千位）

形式：<a style=" "> </a>

3.次次高：

id选择器（相当于一个四位数的百位）

形式：<style> # id名{ } </style>

<a id=" "> </a>

4.次低：

伪类选择器、属性选择器、类选择器（相当于一个四位数的十位）

（1）：hover{ } 选中某些元素的某种状态

——link: 超链接未访问时的状态

——visited: 超链接访问过后的状态

——hover: 鼠标悬停状态

——active：激活状态，鼠标按下状态

(2) 根据属性名和属性值选中元素

<style> 属性名{ } </style>

（3) <style> .class名{ } </style>

<div class=" "> </div>

5.最低：

元素选择器、伪元素选择器（相当于一个四位数的个位）

（1）元素名{ }

（2）: : after{ }

居中方式

内容：

1.文本垂直居中；

2.水平居中；

3.div盒子居中。

解题：

文本垂直居中

1.高度上居中：

—设置height；

—设置line-height等于height；

2.在行中央：

—设置text-align：center；

水平居中

1.定宽；

2.使外边距自适应。

<style>
    .header{
         width: 300px;  /*定宽，因为宽的吸收能力大于外边距 */
        margin:0 auto;  /*控制外边距，使其左右自适应*/
    }
</style>
<body>
    <header>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, corporis! Culpa sapiente laudantium eius ducimus vitae, incidunt cum, ad exercitationem obcaecati provident numquam sit quam debitis. 
    </header>
</body>

div盒子居中

.dakuang{
    height: 500px;
    width: 500px;
    background-color: cadetblue;
    position: relative;
}

.xiaokuang{
    height: 200px;
    width: 200px;
    background-color: brown;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto auto;
}

解决图片底部白色问题

题意：

处理图片与div盒子间的白边问题，分析其出现的原因，及如何解决。

分析：

1.图片为行级元素，而盒子为块级元素；

2.浏览器设计问题，使图片与文字对齐时采用基线垂直对齐（vertical-align:baseline）

解题：

方法一

让图片变为行块盒，从而可调整其外边距；再让其下边距为负值（使图片下移）。

<style>
    img{
        width: 200px;
         display:inline-block;
         margin-bottom: -4px;
       }
    div{
        background-color: red;
        width: 100%;
        height: 100px;
    }
</style>

方法二

改变vertical-align属性默认值，使图片与文字底部对齐。

<style>
    img{
        width: 200px;
        vertical-align: bottom; 
       }
    div{
        background-color: red;
        width: 100%;
        height: 100px;
    }
</style>

方法三

将图片变为块盒，块盒与块盒间没有空隙

<style>
    img{
        width: 200px;
         display:block;
       }
    div{
        background-color: red;
        width: 100%;
        height: 100px;
       }
</style>

方法四

将块盒外边距变为负，使其向上移动若干

<style>
    img{
        width: 200px;
       }
    div{
        background-color: red;
        width: 100%;
        height: 100px;
        margin-top:-4px;
       }
</style>