经过近期的学习，我获益良多，我是转行而步入学习，每次上课前都很紧张，担心自己听不懂，心里压力特别大，感谢授课老师和班主任还有身边的同学朋友的耐心辅导和帮助，现在心里压力降低了，规律的学习心态了，之前让我介绍IT类的WEB《html5》是做什么的我都不知道，因为对布局属性的理解还不够深刻，常常会在纠结中浪费大量时间，对框架，布局或者元素，盒子这类词纠结，现在已经在自己的脑海中构架了相对的知识体系，不足的是至今还没掌握灵活变通，对选择器理解还很不到位，我说说我是如何学习的？
CSS相关布局概要
一.文档声明格式：
注意：文档声明必有，而且必须在文档页面的第一行！HTML5已经简化了，H4以前较为繁琐，就不重复描述以前繁琐的格式。
<！DOCTYPE> : 例子 ：代表当前文档类型是html
title: < title>标题<title/>
head : html页面的两部分之一
body : html页面的两部分之一
meta标签：描述文档的类型和编码；
1.charset:设置文档的字符集编码格式
HTML5中设置字符集编码： >>>常见的字符集编码格式：
a.GB2312：国标码，简体中文；
b.GBK,扩展的国标码；
c.UTF-8,万国码Unicode
2，http-equiv:将我们的信息写给浏览器看，按照里面的要求去执行，需要配合content属性使用。
（http-equiv属性只是表明需要设置哪一部分，具体的设置内容放到content属性中）
可选属性值：content-type(文档类型) ;refresh（网页定时刷新） ;
set-cookie（设置浏览器cookie缓存）
3，name属性：使用方法同http-equiv。常用且需要掌握的属性值：author（作者） keyword（网页关键字） description（网页描述）。
二.文档流
运用css布局首先要具备一些概念上的知识，文档流的概念充斥着布局的整个过程。浏览器渲染页面是有先后顺序的，其顺序是至上而下，根据HTML的文档结构进行渲染。
1、div+css
耳熟能详的div+css布局指的是：仅用容器标签div配合css样式进行布局。
2、display: none / block/ inline / inline-block
设置元素的显示方式，以上为常见的取值。这是布局中非常重要的概念
block块元素：独自占据一行的元素,可控制宽高。如 div p h1~h6 ...
inline内联元素：不占据一行，，不能控制宽高，需要内容撑开。如 a span ...
inline-block: 内联的块元素，不占据一整行，但是可以控制宽高
CSS:
.box1{
display: block;
width: 100px;
height: 100px;
background-color: #aaa;
}
.box2{
display: inline;
width:100px;
height:100px;
background-color: #f45; }
.box3{
display: inline-block;
width: 100px;
height: 100px;
background-color: #567; }
HTML:容器一容器二容器三
可以看出，inline和inline-block都不会独自占据一行，且inline无法控制宽高。
三.盒模型
1.盒子模型由 外边距margin border边界padding内边距 内容尺寸width/height 四种样式组成的。
《盒子的尺寸包括 内容尺寸 盒子尺寸 区域尺寸》
内容尺寸：content ；
盒子的尺寸content+padding+border；
区域尺寸content+padding+border+margin；
2.盒子模型分为标准盒模型，与怪异盒模型
标准盒模型width|height尺寸=content尺寸；
怪异盒模型width|height尺寸=content+border边界+padding内边距尺寸；
盒子与盒子之间用margin ；
盒子内部用padding ；
盒子尺寸尽量用auto；
好了，以上就是布局需要熟悉掌握的概念，接下来还有学习属性布局，背景样式浮动，等等，后面慢慢介绍...........
网友评论