【CSS3】box-sizing
来源:互联网 发布:炎黄网络王刃 编辑:程序博客网 时间:2024/06/08 02:09
box-sizing属性可以分为三个值:content-box(default)、border-box、padding-box
content-box:border和padding不计入width之内。即(Element width = width+border+padding)
border-box:border和padding计入width之内,其实就是怪异模式。即(Element width = width)
padding-box:padding计入width内。即(Element width = width+padding)
以下为本人遇到的一个问题:
nav宽度100%设置padding后超出
未修改前源码及效果图:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0; padding: 0;} li{list-style: none;} a{text-decoration: none;} body{background: #ccc;} .header{ width: 100%; min-width: 1000px; height: 70px; background: #fff; padding: 0 30px;} .header .logo{float: left; margin-top: 10px;} .header .nav{float: right;} </style></head><body> <div class="header"> <a href="#" class="logo"> LOGO </a> <ul class="nav"> <li><a href="#">首页</a></li> <li> <a href="#">职业课程</a> <div class="down"> <a href="#">课程库</a> <a href="#">知识体系图</a> <a href="#">职业路径图</a> <a href="#">系列课程</a> </div> </li> <li> <a href="#">就业学习</a> <div class="down"> <a href="#">Web前端开发</a> <a href="#">Android开发</a> <a href="#">JavaWeb开发</a> </div> </li> <li> <a href="bbs.html">社区</a> <div class="down"> <a href="#">wiki</a> <a href="#">技术问答</a> <a href="#">社群</a> <a href="#">资源分享</a> </div> </li> </ul> </div></body></html>
修改后源码及效果图:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0; padding: 0;} li{list-style: none;} a{text-decoration: none;} body{background: #ccc;} .header{ width: 100%; min-width: 1000px; height: 70px; background: #fff; padding: 0 30px; box-sizing: border-box;} .header .logo{float: left; margin-top: 10px;} .header .nav{float: right;} </style></head><body> <div class="header"> <a href="#" class="logo"> LOGO </a> <ul class="nav"> <li><a href="#">首页</a></li> <li> <a href="#">职业课程</a> <div class="down"> <a href="#">课程库</a> <a href="#">知识体系图</a> <a href="#">职业路径图</a> <a href="#">系列课程</a> </div> </li> <li> <a href="#">就业学习</a> <div class="down"> <a href="#">Web前端开发</a> <a href="#">Android开发</a> <a href="#">JavaWeb开发</a> </div> </li> <li> <a href="bbs.html">社区</a> <div class="down"> <a href="#">wiki</a> <a href="#">技术问答</a> <a href="#">社群</a> <a href="#">资源分享</a> </div> </li> </ul> </div></body></html>
阅读全文
0 0
- CSS3 Box-sizing
- css3 box-sizing
- CSS3 Box-sizing
- CSS3 box-sizing 属性
- css3:box-sizing属性
- CSS3 Box-sizing
- css3 box-sizing属性
- CSS3 Box-sizing
- css3的box-sizing
- CSS3 Box-sizing
- css3 box-sizing属性
- css3 box-sizing 属性
- CSS-CSS3 box-sizing
- CSS3 box-sizing 属性
- CSS3 Box-sizing属性
- 【CSS3】box-sizing 属性
- CSS3 box-sizing属性
- CSS3 box-sizing
- redis连接工具->hiredis
- cuba study
- webpack study
- docker study
- vuejs study
- 【CSS3】box-sizing
- Spark SQL通过JDBC连接MySQL读写数据实例(比较过时了)
- SPDY Study
- igraph study
- 使用karma + mocha + sinon 测试 Ajax 请求
- 日志系统
- spring+springMVC+mybatise下 文件的上传与下载
- Cassandra
- 调用opencv库时运行出错