自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

css盒子模型之宽度和高度

作者:灰牛站长•发布时间:2021-07-12 09:22:28•浏览

盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式)

HTML代码

<div class="pag1"></div>
<div class="pag2"></div>
<div class="pag3"></div>
<div class="pag4"></div>
<div class="pag5"></div>
<div class="pag6"></div>
<div class="pag7"></div>
<div class="pag8"></div>
<div class="pag9"></div>

CSS样式

*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
div{width: 33.33%;height: 33.33%;float: left;}
.pag1{background-color: antiquewhite}
.pag2{background-color: aqua}
.pag3{background-color: aquamarine}
.pag4{background-color: darkred}
.pag5{background-color: saddlebrown}
.pag6{background-color: #FAEBD7}
.pag7{background-color: azure}
.pag8{background-color: greenyellow}
.pag9{background-color: blueviolet}

e.g补充:盒子模型自适应和响应式参考自然堂,Mobike

相关文章

  • css网页布局|三列布局-左右固定-中间自适应

    css网页布局|三列布局-左右固定-中间自适应

    基本思路: 和2列布局很相似 左右2列采用浮动+宽度 中间区域实际是用margin挤压出来的 DOM顺序不能写乱,必须先写左右再写中间 HTML结构 div class="left"左侧...
    2021-07-21 10.07.07
  • 代码技巧之常用快捷键的整理

    代码技巧之常用快捷键的整理

    常用快捷键的整理 ctr1+C复制 ctr1+V粘贴 ctrl+Z撤销 回到上一步操作 ctr1+D复制整行 ctr1+Z剪切整行 增加/删除单行注释ctrl+/ 增加/删除多行注释ctrl+shift+/ html注释...
    2021-07-12 11.07.53
  • z-index的特点

    z-index的特点

    思路: ➥z-index的结构/定位元素默认的z-index ➥z-index单位 ➥能不能用子元素和父元素比较 ➥父元素没有z-index,能不能通过子元素控制他们的层级=改变层级...
    2021-07-12 11.07.57
  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38

手机端