2021-09-12

清除坍塌

点击

<style>
    .content{
        border: 2px solid #afed11;
        margin: 100px 600px;
    }
    .a{
        width: 100px;
        height: 200px;
        background-color: red;
        floagt:left:
    }
    .b{
        width: 100px;
        height: 100px;
        background-color:blue;
        floagt:left:
    }
</style>
<div class="content">
    <div class="a"></div>
    <div class="b"></div>
</div>

方法1：增加块元素，用clear:both清除

<style>
    .clear{
        clear: both;
    }
</style>
<div class="content">
    <div class="a"></div>
    <div class="b"></div>
    <div class="clear"></div>
</div>

方法2：给父元素设置overflow清除浮动
clear在html中插入一个div.clear标签，而content 利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

<style>
    .content{
        border: 2px solid #afed11;
        margin: 100px 600px;
        overflow: auto;
    }
</style>

方法3：使用after伪类

<style> 
    .clear{zoom:1} 
    .clear:after{  /*.父集元素的类名：after*/
        content:'';
        height: 0;
        display: block;
        clear:both;
    }
</style>
<div class="content clear">
   <div class="a"></div>
   <div class="b"></div>
</div>

清除浮动后（解决父集坍塌）：

display属性

点击去往引用页面
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值
比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

block

占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；
1.使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
2.能够改变元素的height，width的值.
3.可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

inline

自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
1.使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
2.不能更改元素的height，width的值，大小由内容撑开.
3.可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.

inline-block

1.结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
2.用通俗的话讲，就是不独占一行的块级元素。

display：inline-block的效果几乎和浮动一样

none
内容隐藏

图片居中对齐

img {
    display: block;
    margin: 0 auto;
}

块级元素：可以让多个非块级元素 排列成一行

例如：div中有img 和子div 》》块级元素独占一行，因此大div中两行（img 和子div ）
子div中有span a 都是非块级元素，因此可以排列为一行

		<header id="headNav">
			<div class="innerNav clear" style="border:1px solid red;">
				<img src="img/logo.png" /> /*一号店图片*/
				<a class="fl" href="#"><img src="images/loginlogo.jpg" alt="" /></a>
				
				<div class="headFont fr">
					<span>您好，欢迎光临1号店！<a href="#" id="please">请登录</a></span>
					<a class="helpLink" href="#"><i class="runbun"></i>帮助中心<i class="turnb"></i></a>
				</div>
				
			</div>
		</header>

span

div相当于一个大盒子，一行只有一个div
span相当于一个小盒子，一行可以有多个span,但是是行内元素
两者都用于布局
？行内元素设置了position属性或float属性后属性默认变成inline-block，所以可以设置宽高

class=“innerNav clear”

在html中，class=“类名+空格+类名”,表示该元素同时拥有两个类。

img标签

如果无法显示图像，浏览器将显示替代文本

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

form标签

form表单是用户可以填写信息并提交数据到服务器的控件

<form action="表单提交地址" method="提交方法">
……文本框、按钮等表单元素……
</form>

input标签

required 属性是一个布尔属性。
required 属性规定必需在提交表单之前填写输入字段。

border属性：给i和input整体添加外边框、去除input的边框

		    .tableItem{
		    	position: relative;
		    	/*height: 50px;*/
		    	padding: 14px 18px;
		    	border: 1px solid #dedede;/*添加整体的外边框*/
		    	background: #FFFFFF;
		    	line-height: 24px;
		    	
		    }

						<div class="tableItem">
							<i class="userHead"></i>
							<input type="text" placeholder="邮箱/手机/用户名" required/>
						</div>
						<div class="tableItem">
							<i class="userLock"></i>
							<input type="text" placeholder="密码" required/>
						</div>

.tableItem input{
				vertical-align: middle;
				width: 230px;
				height: 24px;
				padding-left: 20px;
				border:0 none;/*去除input的边框*/
				
			}

checkbox与选项文字的距离

<a class="autoMatic fl" href="#">   <input class="loadGiet" type="checkbox"/>自动登录 </a>

.loadGiet{
				margin-right: 10px;
			}

文本居中对齐

<h2 class="moreWeb">更多合作网站账号登录</h2>

.moreWeb{
				text-align: center;
			}

非文本内容左右居中对齐：display margin

<button class="tableBtn">登录</button>

display:将行内元素设置为块状元素》可以对margin 上下进行设置
margin: 0 auto; 自动居中对齐

			.tableBtn{
				width: 300px;
				height: 30px;
				display: block;
				margin: 0 auto;/*居中对齐*/
				background-color: #ff3c3c;
				border: 0 none; /*按钮边框 不展示*/
				/*文本的设置*/
				font-size: 15px;
				color: #fff;
				text-shadow: 15px 15px 15px #FF7373; /*不要也可以*/
				font-family: "微软雅黑";
				list-style: 30px;
			}

href="#"

是指联接到当前页面，其实是无意义的，页面也不会刷新

图片地址

放在CSS文件里的

background: url(../images/zhit.png) no-repeat;

放在HTML文件里的

background: url(images/zhit.png) no-repeat;