如何继承父类的css属性

html-css09

如何继承父类的css属性,第1张

怎么理解?

简单说就是父元素的样式,在子元素上可以生效。如:

body{font-size:14px}

<body>

<p>这里显示的字号为14px</p>

</body>

像上面的,我不用对p标签进行定义字体的大小,但是因为body(父元素)做了一个font-size:14px的设置,所以p(子元素)自然会继承了字体14px的大小。

还有,要了解继承性,那就要先了解那些属性具有继承性,哪些没有。

这里人家问了个例

http://zhidao.baidu.com/question/57841814.html

下面的参考地址,具体自己看。

三种方法可以解决:

1、给父元素(也就是你的.new)加一个overflow:hidden;

2、将父元素也一起浮动(这个比较复杂,会影响到父元素的同级元素);

3、在父元素的最后一个子元素(也就是你的ul标签)后边再增加多一个非浮动的子元素,然后将这个子元素加个clear(例:<div style="clear:both"></div>)

至于第3种方法的原理嘛…是因为父元素一定会包围着他所有遵循标准流的子元素(也就是你在最后新加的那个非浮动子元素),而这个子元素的顶部会紧贴在你的ul底部,所以父元素会因此撑开高度。

(CSS浮动原理:如果B元素浮动,上一个元素也是浮动的话,会紧跟其后,除非不够宽才会另起一行;如果上一个元素不是浮动的话,也就是遵循标准流,那么B元素顶部会紧贴上一个元素底部;当然,如果B元素不浮动,是遵循文档流的话,就会默认占一行了)

一、布局HTML:布局就是将整体的框架给搭建起来,让用户知道你的布局

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>继承父亲的高度</title>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

</body>

</html>

二、css中如何继承父元素的高度:(1)添加CSS样式,父级盒子的高度要明确是多少,子级盒子的高度可以直接写成100%,那这样就直接继承了父级盒子的高度。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>继承父亲的高度</title>

<style type="text/css">

.father {

width: 200px

height: 200px

background-color: orange

}

.son {

width: 100px

/*height: 20px*/

height: 100%

background-color: teal

}

</style>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

</body>

</html>

在开发工具里面的代码截图:

三、未添加样式的在浏览器渲染的截图:

四、添加了样式的在浏览器里面的渲染的截图: