参考: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>
- <p id="p1">
- 我是p容器
- <p>我是一个p段落</p>
- </p>
- <p>我是p容器</p>
- </body>
- </html>
- /*
- body {
- background-image:url(../images/2.jpg);
- background-repeat:no-repeat;
- background-attachment:fixed;
- }
- */
- #p1 {
- 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;
- */
- }#p1 p {
- }
来源: https://www.2cto.com/kf/201710/691615.html