HTML CSS问题记录

bighpuse

已于 2022-11-21 12:29:04 修改

阅读量100

点赞数

文章标签： html5 css

于 2022-10-26 10:24:36 首次发布

本文链接：https://blog.csdn.net/bighpuse/article/details/127527461

版权

1.如何让两个div 并排显示，并保留块级元素的其他特征？

<!DOCTYPE html>
<html>
	<head>
		<title>Padding</title>
		<style type="text/css">
							
			p.example {
				width:150px;
				margin: 0px;
				border-top:10px inset yellow;
				border-bottom:10px inset yellow;
				border-right:10px inset yellow;
				border-left:10px inset yellow;
				padding: 10px;
				display:inline-block;}
			
			p.two {
				width:150px;
				padding: 20px;
				margin:0px;
				border-top:10px inset yellow;
				border-bottom:10px inset yellow;
				border-right:10px inset yellow;
				border-left:10px inset yellow;
				padding: 10px;
				display:inline-block;}	
			
		</style>
	</head>
	<body>
		
		
		<p class="example">Analog synths produce a wave sound, 
		whereas the sounds stored on a digital synth have been sampled and then turned into numbers.</p>
		
		<p class="two">Analog synths produce a wave sound,
		whereas the sounds stored on a digital synth have been sampled and then turned into numbers.</p>
	</body>
</html>

2.盒子内部照片居中

solution1:

<!DOCTYPE html>
<html>
	<head>
		<title>Centering Content</title>
		<style type="text/css">
			body {
				text-align:center}
		
		</style>
	</head>
	<body>
	
		<div>
		<img src="images/logo.gif">
		</div>
	</body>
</html>

solution2:

必须为该div设置宽度，否则无法实现居中。

因为margin属性中调用了auto，auto是通过盒子的宽度计算盒子边界到页面边界的距离。不设置宽度的话，功能无法实现。

#pic_mouse{
		margin: 10px auto 10px auto;
		width:200px;
	}

盒子内部文字垂直居中

solution1：

将盒子的height与文字的lin-height设置一样高

line-height：包括文字本身和文字的上下间距

.head1,.head2,.head3,.head4
	{
		width:110px;
		height:50px;
		font-size: 20px;
		line-height: 50px;
	}

Chap15

3.盒子的位置

position：static就是页面默认的排版即normal flow

position:relative 以谁为参考？

以原盒子在normal flow中位置的左上角为基准

position:absolute 以谁为参考？

以第一个设置了position为absolute或者relative的父级元素的左上角

4.GS960

（00）设置盒子的padding：(不要自己设)

padding-right用suffix

padding-left用prefix

（05） grid_6 prefix_6 与grid_12的区别

两者总宽度相同

但前者的内容只能在左侧的grid内填写，prefix_6相当于是留白了

后者内容可在盒子内任意填写

（01）960 gird12的div里再套盒子(盒子纵分)

grid12只有940px

注意最左和最右侧的margin

使用omega（padding-right:0）和alpha（padding-left:0）救场

(03)保险，细致起见

可在每一行（浏览器上）的代码后都加上 <div class="clear"></div>

（04）盒子横分

不必设宽度，直接定义高度即可

CHAP17

5.background-image

float元素的高度坍塌问题：用overflow：auto/hidden解决