百度前端学院小薇学院task7笔记_答案百度前端task12小薇学院-CSDN博客

本文链接：https://blog.csdn.net/fredaouyang/article/details/61191837

1、纯css拉菜单默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    
</head>
<body>
<form action="#" method="post">
    <select name="" id="">
        <option value="">hahaha</option>
        <option value="">honghonghong</option>
        <option value="">heihei</option>
    </select>
</form>
</body>
</html>

默认样式如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        select{
            /*设置边框*/
            border: 2px solid skyblue;
            /*将默认的select选择框样式清除*/
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            /*在选择框最右侧中间显示小箭头图片*/
            background: url("arrow.png") right center no-repeat;
            width: 200px;
            /*设置字体颜色*/
            color: #333;
            /*清除高亮样式*/
            outline: none;
        }

    </style>
</head>
<body>
<form action="#" method="post">
    <select name="" id="">
        <option value="">hahaha</option>
        <option value="">honghonghong</option>
        <option value="">heihei</option>
    </select>
</form>
</body>
</html>

改变样式后：

2、消除图片上下之间的间隙：img{vertical-align:bottom};

因为图片文字等inline元素是默认与父级元素baseline对齐的，而baseline又离父级底边有一定的距离，所以会出现图片与下面的元素出现间隙的情况。可以设置vertical--align：bottom

3.消除表单输入文本框和按钮之间的间隙。当文本框和按钮相邻时，会产生默认的间隙，因为<inpu>元素时内联块元素，内联元素是当做字体来处理的，字体有间隙，所以表单之间会产生间隙

方法1：将表单的父元素font-size设为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            font-size: 0;
        }
    </style>
</head>
<body>
<div class="parent">
<input type="text" value="消除文本框和按钮间隙">
<input type="button" value="确定">
</div>
</body>
</html>

方法2：将两个表单元素写在一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    
</head>
<body>
<div class="parent">
<input type="text" value="消除文本框和按钮间隙"><input type="button" value="确定">
</div>
</body>
</html>

4.css3选择器nth-child(n)和nth-of-type(n)的区别：

如p:nth-child(n) 代表选择p元素的父元素下的第n个子元素，不论子元素的类型是不是p；

而p:nth-of-type(n)代表选择p元素的父元素下的第n个类型是p的子元素