html 、css 前端开发规划与注意事项

本文主要结合前端 html 、css等基本知识，讲述了前端 html 、css 常用的基础知识，和静态页面开发的一些基本常识和约束！

---

本篇文章只用于前端页面的学习，不用做任何其他用途！，如有违规，联系博主删除

---

html、css基本理论知识： CSS样式基本知识 HTML基础入门

---

1.页面开发前置约束（注释详解）

/*设置浏览器通用：内边框，页面最小布局*/
*{
	/*消除所有标签的内边距，和外边距*/
	padding: 0px;
	margin: 0px;
}

html,body{
	/*将页面完全铺满*/
	width: 100%;
	height: 100%;
}
#content{
	/*将最外层div铺满到父容器body中*/
	width: 100%;
	height: 100%;
	
	/*设置最小页面，防止组件重合，缩到最小页面时会出现滑动栏*/
	/*绝大部分业界规则*/
	min-width: 1240px;
	min-height: 600px;
	
	/*为子容器提供绝对定位前置条件*/
	position: relative;
}

---

2. 开发细节

1.细节一：顶部:最上方的div容器注意事项

/*顶部:最上方的div容器注意事项*/
#box_top{
	width: 100%;
	height: 35px;
	/*margin-top: 25px;    浏览器特性，一般不食用margin-top*/
	position: relative;
	top: 15px;
	/*padding-left: 20px; 外部div宽度已经占据100%，不可以在增加内边距，否则会外溢*/
}

2.细节二：设置标签水平居中

/*中间部分*/
#box_center{
	width: 654px;	
	margin-top: 20px;
	
	/*设置标签水平居中方式一：使用绝对定位*/
	position: absolute;
	left: 50%;  /*右移*/
	margin-left: -327px;/*左移*/
}

#img_logo{
	width: 280px;
	/*设置标签水平居中的第二种方式，只可水平居中，竖直方向无法是实现：使用外边距*/
	margin: 0 auto;/*上外边距为0，左右编剧位于父容器中间*/
	/*独占一行*/
	display: block;
}

3.细节三： IE盒子与标准盒子的区别

/*百度输入框注意事项*/
#input_text{
	width: 80%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
	
	/*去除输入文本焦点外边框*/
	outline: none;
	/*设置成IE盒子*/
	box-sizing: border-box;
	/*设置文本框搜索样式*/
	border: 2px solid #E2E2E2;
	border-right-width: 0px;
	padding-left: 20px;
}

4.细节四：伪类选择器

/*伪类选择器focus：当点击文本框焦点时，标签发生的变化*/
#input_text:focus{
	border-color: rgb(77,110,242);
}

/*伪类选择器：鼠标停留特效*/
#input_text:hover{
	border-color: #A2A2A2;
}

---

3.页面布局划分

每次在对前端页面开发前，需要划分前端布局，用 div 标签将其划分主要有如下规则：

1. 从外到内
2. 从上到下
3. 从左到右

---