百度前端学院小薇学院task7笔记

来源：互联网发布：第四十一知乎编辑：程序博客网时间：2024/04/28 11:01

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的子元素

0 0