web前端布局HTML+CSS

一、W3C标准

　　万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。万维网联盟建立于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南。 http://www.w3school.com.cn/

　　　　规范是一种态度

　

 

 

二、页面布局

　　2.1 布局元素

　　position定位：

• absolute 生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• relative 生成相对定位的元素，相对于其正常位置进行定位。所以，"left:20" 会向元素的 LEFT 位置添加 20 像素。
• static 默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• inherit 规定应该从父元素继承 position 属性的值。

 

　　display属性：

• none 此元素不会被显示。
• block 此元素将显示为块级元素，此元素先后会带有换行符。
• inline 默认。此元素会被显示为内联元素，元素先后没有换行符。
• inline-block 行内块元素。（CSS2.1 新增的值）
• list-item 此元素会做为列表显示。
• table 此元素会做为块级表格来显示（相似 <table>），表格先后带有换行符。
• inline-table 此元素会做为内联表格来显示（相似 <table>），表格先后没有换行符。
• table-cell 此元素会做为一个表格单元格显示（相似 <td> 和 <th>）
• inherit 规定应该从父元素继承 display 属性的值。

 

　　float浮动：

• left 元素向左浮动。
• right 元素向右浮动。
• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
• inherit 规定应该从父元素继承 float 属性的值。

 

　　就像写做同样，文档流从上到下、从左到右排列元素。float 浮动(清除浮动下置div  属性clear:both)和绝对定位(position：absolute或position: fixed)会脱离文档流。不占用文档空间。

 以下图，

　　　　

　　　　一般状况下横向排列用float,相对元素固定位置用position：relative和position: absolute；悬浮于窗口图标用position:fixed。这样就愉快的完成页面的布局啦

 

 

2.2 元素的盒模型

 

盒模型油里到外分为  元素的width 和height区 、

　　　　　　　　padding（内边距）区域，padding:上  右  下  左

　　　　　　　　border (边界)， border:1px solid #ccc;

　　　　　　　　margin（外边距）区域，margin:上  右  下  左

 

　　布局元素结合margin and padding，就可以布出间距适中的页面咯🤗

 

三、浏览器页面调试

   做为一名后端开发，曾有幸和一位前端妹纸合做，观其调试工做，后凡涉及前端领域皆自处而为，所学即所用，呜呼哀哉😂

 

 

---

 

 

调试通常选用google浏览器，适用于开发者的浏览器 

F12出现DevTools

　　

 

 

 

---

 

 　　页面元素选择

 

 经过元素选择来快捷查看元素的基本属性，能够事半功倍哟

 

 

 

---

我是飞奔的企鹅，

  一只有梦想，有故事的企鹅，欢迎诉说你的故事