准备去面试吖

最新推荐文章于 2023-07-13 15:14:42 发布

OH_Hui

最新推荐文章于 2023-07-13 15:14:42 发布

阅读量84

点赞数

本文链接：https://blog.csdn.net/OH_Hui/article/details/80934476

版权

写百度首页学到的点点滴滴

1.url、src、href、的区别

url:统一资源定位符，是互联网上标准的资源的地址。

href:Hypertext Reference指定超链接目标的url。

<a href="w3cschool.com">W3school</a>

src:属性规定外部脚本文件的url.

<img src="">

2.position 与 relative

(1)父级设置position：relative子级设置position：absolute。子级元素将会根据父级元素定位

(2)一旦给某个元素设置position:absolute,其将不占据空间，且宽度为内容的宽度

(3)display:none将不会占据空间

3.默认样式

body{margin：8px}

4.定宽高与不定宽高的水平垂直居中

(1)已知宽高水平居中

margin:0 auto

<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

(2)已知宽高水平垂直居中

<style type="text/css">
		.outer{
			position: relative;
			width: 400px;
			height: 400px;
			border: 1px solid #000;
		}
		.inner{
			position: absolute;
			width: 200px;
			height: 200px;
			left: 50%;
			top: 50%;
			margin-left: -100px;
			margin-top: -100px;
			border: 1px solid #000;
			
		}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner">
		</div>

(3)不定宽高水平居中

(4)不定宽高水平垂直居中

5.input与button设置高度相同，页面中高度不同？

解决办法：button.height-input.height=2

6.如何去除input与button之间的默认的间距

给其父元素设置：{font-size:0}

7.ul:firstchild与ul:nth-child(1)的区别

8.关于浮动的不解

<style type="text/css">
		.aaa{
			position: relative;
			border: 1px solid #000;
		}
		.bbb{
			position: absolute;
		}
		.ccc{
			position: absolute;
			right: 0;
		}
		</style>
	</head>
	<body>
		<div class="aaa">
			<div class="bbb">bbb</div>
			<div class="ccc">ccc</div>
		</div>
		<div class="ddd">
			<p>ddd</p>
		</div>
	</body>

关于border-bottom的问题

ddd由于aaa设置position：absolute所以会浮上去，解决办法是给<p>设置margin或者.ccc设置padding

我很喜欢这个例子：

<style type="text/css">
			.aaa{
				display: inline-block;
			}
			.bbb{
				display: inline-block;
				width: 100px;
				height: 100px;
				border: 1px solid #000;
			}
			.ccc{
				display: inline-block;
				width: 100px;
				height: 100px;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="aaa">
			<div class="bbb">bbb</div>
			<div class="ccc">ccc</div>
		</div>
		<div class="ddd">
			ddd
		</div>
	</body>