Day 8: Introduction to CSS Layout_Basic Tutorial-CSS Tutorial-php.cn

Day 8: Introduction to CSS Layout_Basic Tutorial

WBOY

Release： 2016-05-16 12:09:55

Original

1514 people have browsed it

CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。

1.定义DIV

分析一个典型的定义div例子：

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }

说明如下：

层的名称为sample，在页面中用
就可以调用这个样式。
MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"MARGIN: 10px;"。如果边距为零，要写成"MARGIN: 0px;"。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。MARGIN是透明元素，不能定义颜色。
PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定义颜色。
BORDER是指层的边框，"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"。
BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用"url(../images/bg_logo.gif)"来指定背景图片路径；其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复，如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
COLOR用于定义字体颜色，上一节已经介绍过。
TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。
LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。
WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。

下面是这个层的实际表现:

这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，

这里是演示内容，这里是演示内容，

这里是演示内容...

We can see that the border is 2px gray, the background image is not repeated in the lower right, the content is 20px away from the left border, and the content is centered. Everything is as expected. Hoho, although it doesn’t look good, it is the most basic. If you master it, you will have learned half of the CSS layout technology. That’s it, it’s not difficult at all! (What is the other half? The other half is the positioning between layers. I will explain it step by step later.)

2.CSS2 box model

Since the launch of CSS1 in 1996, the W3C organization has recommended that all objects on the web page be placed in a box. Designers can control the properties of this box by creating definitions. These objects include paragraphs, Lists, titles, images, and layer

. The box model mainly defines four areas: content, padding, border and margin. The sample layer we talked about above is a typical box. For beginners, they are often confused about the levels, relationships, and mutual influences among margin, background-color, background-image, padding, content, and border. Here is a 3D schematic diagram of the box model, I hope it will be easier for you to understand and remember.

CSS2盒模型的3D示意图

3. All auxiliary images should be processed with background

Using XHTML+CSS layout, there is a technology that you are not used to at first. It should be said that it is a way of thinking that is different from the traditional table layout, that is: all auxiliary images are implemented with backgrounds. Something like this:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

Although it is possible to insert directly into the content, this is not recommended. The "auxiliary pictures" here refer to pictures that are not part of the content to be expressed on the page, but are only used for decoration, interval, and reminder. For example: pictures in photo albums, pictures in picture news, and the 3D box model pictures above are all part of the content. They can be directly inserted into the page using the element, while others are similar to logos, title pictures, and list prefixes. Images must be displayed using background or other CSS methods.

There are two reasons for this:

Completely separate performance from structure (refer to reading another article: "Understanding the separation of performance and structure"), use CSS to control all appearance and performance, and facilitate revision.
Make the page more usable and friendly. For example, if a blind person uses a screen reader, pictures implemented using background technology will not be read aloud.