css盒子模型代码和模型图（第七章CSS部分）

第一章问题集锦：

1、ID选择器与类选择器优先级

ID选择器优先

2、CSS文件中编码问题

1）要么就删除，默认就是编辑器的编码

2）有的浏览器不识别，在编码后加上“;”

3、属性和样式是否正确

直观的办法就是保存运行，看看是否是正确；如果不正确

1）大胆的去尝试；

2）找到对应的标签，把行内样式抽取成内嵌或外链，绝对没错。

4、定位原点：

1）所有的元素都在BODY中显示，那么body的原点就是最左上角(0px,0px)

2）其他元素放到容器，那么这个容器的最左上角就是该容器的原点

3）在BODY中的标签相对于BODY定位是该标签的最左上角相对于BODY原点的x，y坐标为准

css盒子模型代码和模型图（第七章CSS部分）(1)

背景设置与盒子模型

一、宽(width)高(height)度设置：

1、行内元素与块元素的区别

宽高度设置对于有些行内元素无效；图片、表格有效；网页中使用的图片比较多，建议控制图片宽高度，以便控制显示内容大小（图片会缩放，最好按等比例来设置，否则会变形）。

2、指定像素与百分比

一般情况下行内样式需要设置宽度的单位，比如说像素px（pixel）；设置宽度为百分比可以固定宽度，比如块元素DIV，宽度不设置为100%，高度为0px(或内容的高度)，以单位值固定的宽高度的标签内容超出不会在容器内显示。

二、背景（background）：

背景色Background-color

背景图片 background-image:url(图片路径); 默认会水平、垂直方向重复

Url：统一资源定位符，就是资源的地址。

注意外链样式尽量不要使用图片背景，非要使用可以使用服务器根目录定位。

背景重复 background-repeat: no-repeat repeat-x repeat-y

背景吸附 background-attachment:scroll (默认，随对象滚动) fixed（固定）

<body style="background-image:url('1.jpg'); background-repeat:no-repeat;

background-attachment:fixed; height:1500px;">

asfasdfasdfsadfdsfa

</body>

背景定位 background-position:top center bottom left right x y（用于一张图片背景定位，容器不动背景图像移动！！！），例如一张图片背景定位

background-size:cover可以让背景图片拉伸，但是要求IE8以上版本！！！

三、盒子模型：

css盒子模型代码和模型图（第七章CSS部分）(2)

布局一般顺序：

1、关注内容，放内容；

2、控制内容与边框距离，Padding，内边距；

Padding（内边距，内容距离标签边框的距离，该元素的宽度=内容宽度 padding）:10px; 代表上、右、下、左（顺时针）内容与边框的距离都是10PX；还可以控制内边距的上下、左右距离：50px 100px;可以这样书写完全控制 padding:10px 20px 30px 40px;

3、border：外边框。可以单独写border-bottom:1px solid black; 也可以简写border:1px solid black;

4、Margin：外边距。边框距离容器的距离。Margin:10px; 类似于padding上、右、下、左，外间距,但是只有顶部、左侧有效。Margin:10px20px 30px 40px;

margin-left:100px; margin-top:100px;

5、针对于表格：cellpadding为单元格内容距离单元格边框的边距；cellspacing单元格与单元格之间的边距。

css盒子模型代码和模型图（第七章CSS部分）(3)