css边距及变态盒模型
来源:互联网 发布:logstash 性能优化 编辑:程序博客网 时间:2024/06/05 11:31
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>布局</title> <style> header{ height: 100px; background-color: #cccccc; } section{ background-color: #FF7100; height: 400px; } #child1{ width: 10%; height: 100%; background-color: #FF0000; float: left; /*padding-left: 1px;*/ border: 10px solid black; /*margin border padding都会影响页面布局,content不变, 实际宽度为:在content的基础上加上margin border或padding*/ /*变态盒模型 borber-box 添加padding或者border不会影响页面布局 只会挤压页面内容content*/ box-sizing: border-box; /*overflow规定了内容溢出盒子时如何处理*/ overflow: auto; /*border-radius 盒子弧度*/ border-radius: 50%; } #child2{ width: 80%; height: 100%; background-color: aqua; float: left; border-radius: 50%; } #child3{ width: 10%; height: 100%; background-color: brown; float: left; border: 10px solid black; box-sizing: border-box; border-radius: 50%; } </style></head><body><header></header><section> <div id="child1"></div> <div id="child2"></div> <div id="child3"></div></section></body></html>
0 0
- css边距及变态盒模型
- CSS边距以及变态盒模型
- 变态盒模型
- 关于变态盒模型的应用
- css 盒模型问题 及Bug修复
- CSS盒模型 及 定位position
- 【5】CSS段落属性及盒模型
- css-盒模型及相关属性
- CSS布局:盒模型及定位
- CSS、CSS盒模型
- css盒子模型及实例
- css盒子模型及实例
- CSS盒模型
- 什么是css盒模型?
- CSS 盒模型
- CSS盒模型讲解
- CSS 盒模型
- CSS盒模型
- 补充上传的一些细节上面的问题
- Generative Adversarial Nets(GAN) Tensorflow实现
- Predict Binding Sites of Transcription Factor && 富集分析
- 对象数组的内存图解
- zookeeper Watcher ZK状态 事件类型
- css边距及变态盒模型
- Android Sockdet
- JS中使用正则查找查找字符串中的手机号码或者固定电话
- visual studio 2015 key vs2015密钥
- MySQL的索引机制,复合索引的使用原则
- eclipse部署web项目至本地的tomcat但在webapps中找不到
- SSH框架总结
- 阅读effective stl 有感(二)
- Android-性能相关