css圆角进化论中高度自适应的css是怎么设置的

html-css024

css圆角进化论中高度自适应的css是怎么设置的,第1张

高度自适应的话，直接加一个overflow:hidden防止溢出，就行了，到时候就会根据内容的多少自动增加高度。一般文章详情页内容展示的地方就是这样子做的

<!DOCTYPE html>

<html>

 <head>

  <title> DIV高度自适应 </title>

  <meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

  <meta name="keywords" content="">

  <meta name="description" content="">

<style type="text/css">

* {margin:0 autopadding:0auto}

body {text-align:center}

.art-content {

margin:0 auto

width: 200px

border:1px solid #ddd

-moz-border-radius:5px

-webkit-border-radius:5px

-o-border-radius:5px

-ms-border-radius:5px

border-radius:5px

overflow:hidden

zoom:1

}

</style>

 </head>

 <body>

<h3>DIV高度自适应</h3>

<div class="art-content">

打算等到发开发票的打开打飞机啊的皮肤

dfaodf<br/>dfadf<br/>wefa[sfadsfdf

</div>

 </body>

</html>

有很多方法，你说的方法布局层次很不清晰，不推荐使用，我见过的：

1. 把一个圆切成四等份，每一份用相对定位放在盒子的四个角上，盒子用border属性，见过我的一个朋友这样写。(宽度和高度都能自适应)

2.把盒子的上下两个边（包括弧线）切下来，按照正常的文档流放在头和尾，中间用border-left和border-right 。(宽度不能自适应)

3.滑动门的做法，左上圆角切下来，保持一个足够长的宽度，右上角只要把弧线切下来就可以，这也是现在淘宝首页的做法，代码如下：

<b class="h">

<b></b>

</b>

第一个b表签放长条的背景，第二个b放右上圆角，只要float:right叠在长条上就能形成上边的两个圆角，同理，下边两个圆角也是这么做，中间当然用border-left和border-right （宽度和高度都能自适应）

改变b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px}

中的height就可以改变高度，不过矩形也会走形，所以想要改变大小的话别的参数也是需要改的