PHP从入门到精通,024第三章CSS之DIV+CSS标准化布局display属性(DAY5第1课)
四、DIV+CSS标准化布局
(一)、DIV+CSS布局
说明:在网页开发制作中,需要对页面内容进行“模块化标准布局”,把内容放入到某个位置,让页面形成固定规律展示出来。
模块化:在网页中所有的内容都是以块来展示的。
标准化:在开发网站时是有一定的标准的,W3C给的。
好处:为了把HTML页面和CSS代码进行分离,方便以后的维护和合作开发、有利于搜索引擎的抓取。
(二)、无意义的“div”和“span”
说明:在HTML标记中一般都是有自带“名称”,如:h1是加标题的,a是加超链接的。
只有div和span是没有意义的,所以布局就使用div和span,div一般是给大块的内容布局,span是给行内的内容布局。
块元素:不管内容多少,都会占一行,可以改变大小但是还是独占一行。
行内元素:内容多少占多少
(三)、块元素和行内元素的转换
属性名 | 描述 | 属性值 |
---|---|---|
display | 块元素和行内元素的转换 | block(块)、inline(行内)、inline-block(行内块) |
dispaly | 显示和隐藏 | none(隐藏)、block(显示) |
a{
border:1px solid red;
width:100px;
/*dispaly:block;
//转换成块元素*/
display:inline-block;
//转换成行内块
text-align:center;
}
a.a4{
display:none;
//显示和隐藏
display:block;
}
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- 一个人的碎碎念
- 我从来不做坏事
- 从蓦然回首到花开在眼前,都是为了更好的明天。
- 西湖游
- 改变自己,先从自我反思开始
- leetcode|leetcode 92. 反转链表 II
- thinkphp|thinkphp 3.2 如何调用第三方类库
- 从我的第一张健身卡谈传统健身房
- CGI,FastCGI,PHP-CGI与PHP-FPM