DIV伸缩盒子box】的更多相关文章

<div class="div1"> <div class="box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> </div> </div> .div1 .box { border: 1px solid #ccc; padding: 10px; display:…
border  css属性 边框颜色 border-color:red/#ffffff/rgb()默认为黑色 边框样式 border-style:solid (实线) dashed (虚线).默认为none 边框粗细 border-width:1 Border的简写  border:border-width  border-style border-color: Div块  盒子 1.就是标签名.没有特殊的标签属性 2.主要用来排版布局 3.宽度是100%, chrome浏览器默认有8px的外边…
用弹性布局flex: 给父盒子加个display:flex; 给中间盒子设flex=1; /* 弹性盒子布局*/ .wrap{ width: 100%; height: 90px; display: flex; } .left{ width: 300px; height: 90px; background-color: red; float: left; } .content{ flex:1; height: 90px; background-color: yellow; } .right{ w…
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这个清理一下    *{    margin:0px;    padding:0px;    }        */ <!doctype html> <html> <head> <meta charset="utf-8"> <title&…
盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. 图片看不清楚?请点击这里查看原图(大图). 从上图可以看到 IE 盒子模型的范围也包括 margin.border.padding.content,和标准 W3C 盒子模型不…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,header,img,main,section,a,nav,p{ padding: 0; margin: 0; } /*顶部块样式*/ header{ width: 100%; display:…
flex 的学习地址: http://caibaojian.com/demo/flexbox/align-content.html…
盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域. div主要通过CSS样式为其赋予不同的表现.DIV+CSS来实现各种样式. div是块级标签,独占一行 div用的最多的标签 标签之间可以嵌套 <!DOCTYPE html> <html lang="en"> &l…
css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在css中,设置display: display:flex:/-webkit-flex; 或者  display:inline-flex; 在弹性容器上无效的属性: 多栏布局模块的  column-*属性: float与clear对弹性项目无效,使用float使元素的display属性为block; ve…