html和CSS基础学习(七)
来源:互联网 发布:淘宝网恒源祥毛衣 编辑:程序博客网 时间:2024/05/07 14:59
内联元素的盒子模型
(1) 内联元素会紧挨在一起,块元素会独占一行。
(2) 内联元素不能设置height和width,设置了也没有用,内联元素可以设置边框,和水平方向的外边距和内边距,而且不会重叠。水平方向可以影响布局
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">p{font-style:italic;color:red ;}div{width: 200px;height: 200px;background-color: goldenrod;}*{margin:0 ;padding: 0;}.sn{/*width: 50px;height:50px ;对布局没有影响*/margin-left: 20px;margin-right:20px;/*推动元素之间的间距*/padding-left: 20px;padding-right: 50px;}.sm{padding-left: 100px;/*与上面的样式叠加*/}</style></head><body><div></div><br /><span class="sn">内联元素的盒子模型</span><span class="sm">内联元素的盒子模型</span><span>内联元素的盒子模型</span></body></html> 55:display和visibility<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">a{display: inline-block;/*将a元素设置为行内块元素,可以设置height,和width*/width: 150px;height: 150px;background-color:red ;/*如图所示将内联元素变成块元素*//*display:none ;*//*会将这个元素隐藏,原来的位置不会被占据*/}.sm{/*visibility: visible;表示这个元素可见*/visibility:hidden ;/*元素被隐藏但是会占据原来的位置*/}</style></head><body><a href="#">我是一个超链接</a><span class="sm">开始表演</span><span >开始表演</span></body></html>
Display可以将元素变成块元素,block属性,inline变为块元素,inline-block行内元素 none:隐藏元素;
Visibility: visible:可见,hidden:隐藏 会占据空间
阅读全文
0 0
- html和CSS基础学习(七)
- 《HTML+CSS基础课程》学习笔记七
- HTML+CSS基础(七):CSS选择器
- html和CSS基础学习(三)
- html和CSS基础学习(六)
- html和CSS基础学习(八)
- html和CSS基础学习(九)
- html和CSS基础学习(十)
- html和CSS基础学习(十一)
- html和CSS基础学习(十二)
- html和CSS基础学习(十三)
- html和CSS基础学习(十四)
- html和CSS基础学习(十五)
- html和CSS基础学习(十六)
- html和CSS基础学习
- HTML基础学习七
- HTML+CSS基础(七):CSS格式化排版
- Css基础学习(七)—链接
- AI与游戏——吃豆人(2)控制器简介
- Windows服务已标记为删除
- Codeforces 742B Arpa’s obvious problem and Mehrdad’s terrible solution
- hadoop 一些属性值含义
- TCP套接字--阻塞模式和粘包问题
- html和CSS基础学习(七)
- bzoj 5017 炸弹 线段树优化建图+tarjan+拓扑排序
- 经济学十大原理
- 算法设计与复杂性原理 第一次上机 玛雅历
- Protocol Buffers(protobuf)java初体验
- 当获取属性值为null
- C++如何读写注册表
- caffe .bashrc+/etc/profile+Makefile.cofig
- Google Map Api 谷歌地图接口整理