css变成块级元素_css构造块级元素

css

1. 宽高

width:数值;

height:数值;

也可用百分比！

长高的设置不会被后代继承

2. 背景

(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 属性的值

css构造块级元素

我是div容器

我是一个段落