CSS 构造块级元素

来源：互联网发布：网络控制器怎么装编辑：程序博客网时间：2024/05/17 07:14

参考：CSS
1）宽高
2）背景
3）边框

CSS 对块级元素的处理也是相当强大,使用 CSS3 中的新增功能我们可以对元素
加阴影，多背景，圆角等绚丽效果，但有兼容性问题。

宽高
width:数值;
height:数值;
也可用百分比！
长高的设置不会被后代继承
背景
(1)背景颜色
background-color:颜色值;
元素的背景颜色默认为 transparent
background-color 不会被后代继承。

(2)背景图片
使用 background-image 属性默认值为 none 表示背景上没有放置任何图像
如果需要设置一个背景图像，必须为这个属性设置一个 url 值
background-image: url(bg.gif);
注意图片的位置引入方法!
背景图片重复的问题
使用 background-repeat 来解决，可以的值：repeat-x，repeat-y，no-repeat
背景图片的位置
使用 background-position 来设置
1>可以使用一些关键字：top、bottom、left、right 和 center 通常，这些关键字
会成对出现。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
2>也可以用百分比
background:50% 50%;
第一个表示水平第二个表示垂直
3>当然更可以用数值，以 px 单位
background:40px 10px;
第一个表示水平第二个表示垂直
4>也可以混用！
背景关联
background-attachment:fixed
(3)总结写法
background: #00FF00 url(bg.gif) no-repeat fixed center left;
3. 边框
border:1px solid #ccc;
dashed 表示虚线
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
分开设置
最后来讨论一个有趣的问题：
后代元素长度大于祖辈元素的大小时候的处理方法：
overflow:;
可能的值：
visible：默认，内容不会被修剪，会呈现在元素框之外。
hidden：超出的内容会被修剪掉，直接不现实。
scroll：超出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被超出，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。

这里写图片描述

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><title>第四章 用CSS给网页装潢[4] -构造块级元素</title><link rel="stylesheet" type="text/css" href="style/demo.css" /><style type="text/css"></style></head><body><div id="div1">    我是div容器    <p>我是一个p段落</p></div><div>我是div容器</div></body></html>

/*body {    background-image:url(../images/2.jpg);    background-repeat:no-repeat;    background-attachment:fixed;}*/#div1 {    width:900px;    height:1000px;    /*background-color:#66FF99;*/    /*background-image:url(../images/1.jpg);*/    /*background-repeat:no-repeat;*/    /*        1)background-position:center left;        使用关键字 ：top、bottom、left、right 和 center时，表示        第一个值是 y轴（垂直方向）,第二个值是x轴（水平方向）        2)background-position:50% 3%;        使用具体的数字，例如百分比的时候、或者像素（px为单位）        第一个值 指得是X轴（水平方向）,第二个只是Y轴（垂直方向的偏移）    */    /*background-position:50px bottom;*/    background:#66FF99 url(../images/1.jpg) no-repeat 50px bottom;    /*        background:颜色值 图片的地址 图片是否平铺 水平偏移值 垂直偏移值;        background:#cccccc;        不需要的设置选项可以不写    */    border:20px dashed #cccccc;    border-bottom:none;    /*    border-left:10px solid #cccccc;    border-top:10px solid red;    border-right:10px solid green;    border-bottom:10px dashed #FF00FF;    */}#div1 p {}

阅读全文

0 0