第一章 问题集锦:
1、ID选择器与类选择器优先级
ID选择器优先
2、CSS文件中编码问题
1)要么就删除,默认就是编辑器的编码
2)有的浏览器不识别,在编码后加上“;”
3、属性和样式是否正确
直观的办法就是保存运行,看看是否是正确;如果不正确
1)大胆的去尝试;
2)找到对应的标签,把行内样式抽取成内嵌或外链,绝对没错。
4、定位原点:
1)所有的元素都在BODY中显示,那么body的原点就是最左上角(0px,0px)
2)其他元素放到容器,那么这个容器的最左上角就是该容器的原点
3)在BODY中的标签相对于BODY定位是该标签的最左上角相对于BODY原点的x,y坐标为准
背景设置与盒子模型
一、宽(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(用于一张图片背景定位,容器不动背景图像移动!!!),例如一张图片背景定位
<div style="width:100px; height:100px; background-image:url(1.jpg); background-repeat:no-repeat; border:1px solid black; background-position:-201px -236px;"></div>
background-size:cover可以让背景图片拉伸,但是要求IE8以上版本!!!
三、盒子模型:
布局一般顺序:
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单元格与单元格之间的边距。
边框圆角: border-radius:50px;
<img src="anniu.jpg" width="200px" height="100px" style="cursor:pointer; border-radius:10px;" onclick="alert('haha');" />
对齐(align):
1、容器对齐:
该标签相对于容器对齐,该标签加上align属性(块元素无效);
2、内容对齐(左、右、居中、两端)
该标签的内容样式 style=”text-align:center;”
作业:利用以上知识,使用table布局以下效果
提示:
背景色: #6c6c6c
文本框提示: placeholder=”提示信息”
边框阴影: box-shadow:inset 0 0 10px gray;