CSS 内联元素和块级元素内部布局规则
来源:互联网 发布:centos下载教程 编辑:程序博客网 时间:2024/06/04 23:28
- 学会了display属性是不是就学会了布局
- 必须了解的基本概念
- 内联元素内部布局规则
- 测试内联元素内部默认布局规则
- 内联元素改变其对齐方式
- 块级元素内部布局规则
学会了display属性是不是就学会了布局?
知道了内联元素没有宽高属性、横向布局;知道块级元素具有宽高属性、换行布局。懂得了display强大的自由切换块级元素和内联元素。这样是不是已经布局无敌
结果会是惨遭打脸的!你会发现有些的布局并没有按照你的想法实现。尽管有时候全部使用块级元素可以复杂的实现。但是不理解内联元素和块级元素的内部布局规则,可以认为没有真正的理解CSS。就像不懂C指针就没有学会C语言一样。
必须了解的基本概念
什么是行高、行距?什么是基线、中线、底线和顶线?什么事内容区、行内框、行框?
行高:两条基线间的垂直距离
行距:底线和顶线间的垂直距离
基线:参照英文字母x的基准线
内容区:顶线和底线间的垂直距离
行内框:顶线和底线间的垂直距离,是浏览器渲染的一个概念。和内容区相等
行框:行框的高度取决于本行内行内框最大的值
具体内容请参考 :
深入理解 CSS 中的行高与基线
CSS行高——line-height
CSS深入理解vertical-align和line-height的基友关系
内联元素内部布局规则
测试内联元素内部默认布局规则
<span style="background-color: #4b7ffd;"> <img scr="Images/bd_logo1.png" width="270" height="129" /> <a style="background-color: red; ">x测试内联元素内部的内联元素基线对齐方式测试内联元素内部的内联元素基线对齐方式</a></span>
显示效果如图:
可以看出:
- 内联元素的默认布局是基线对齐规则。首先img元素根据自身高度确认相对于父元素的基线位置。之后其他的子元素都以此基线为准开始布局。
- 内联元素的高度由其本身的内容区域决定;内联元素的宽度有子元素的区域决定。本身的内容区域由font-size、font-family 决定,如果没有显示指定,有一个默认的font-size。参考下图更能理解此规则:
图1:
<span style="background-color: #4b7ffd; padding-right: 10px; font-size: 30px"> <img scr="Images/bd_logo1.png" width="270" height="129" /> <!--子元素继承了父元素的font-size--> <a style="background-color: red; padding: 0px;">x测试内联元素内部的内联元素基线对齐方式测试内联元素内部的内联元素基线对齐方式</a></span>
图2:
<span style="background-color: #4b7ffd; padding-right: 10px; "> <img scr="Images/bd_logo1.png" width="270" height="129" /> <!--父元素的为默认的font-size--> <a style="background-color: red; padding: 0px; font-size: 30px">x测试内联元素内部的内联元素基线对齐方式测试内联元素内部的内联元素基线对齐方式</a></span>
内联元素改变其对齐方式
<span style="background-color: #4b7ffd; padding-right: 10px; "> <img style="vertical-align: bottom" scr="Images/bd_logo1.png;" width="270" height="129" /> <!--vertical-align没有继承性--> <a style="background-color: red; padding: 0px; ">x测试内联元素内部的内联元素基线对齐方式测试内联元素内部的内联元素基线对齐方式</a></span>
更改img元素的对齐方式bottom对齐后,可以确定底线位置,同时也可以确定基线位置。父元素和a元素的对齐方式仍然是默认的基线对齐。
块级元素内部布局规则
<div style="background-color: #4b7ffd;height: 150px;"> <a style="background-color: red;">x测试内联元素内部的内联元素基线对齐方式</a> <img scr="Images/bd_logo1.png" width="270" height="129" /></div>
块级元素内部的内联元素仍然遵循内联元素的布局规则
但是对于line-height属性和高相等的块级元素布局有尚不解?
<div style="background-color: #4b7ffd;height: 150px; line-height: 150px"> <a style="background-color: red;">x测试内联元素内部的内联元素基线对齐方式</a> <img scr="Images/bd_logo1.png" width="270" height="129" /> <!--line-height具有继承性--></div>
图示1:
<div style="background-color: #4b7ffd;height: 550px; line-height: 550px"> <a style="background-color: red;">x测试内联元素内部的内联元素基线对齐方式</a> <img scr="Images/bd_logo1.png" width="270" height="129" /> <!--line-height具有继承性--></div>
图示2:
对于块级元素,line-height和高度相等后,如何根据图片确定的基线位置???尚不明白。待解!!!!
阅读全文
0 0
- CSS 内联元素和块级元素内部布局规则
- CSS内联元素和块级元素
- css 块级元素和内联元素
- CSS块级元素和内联元素
- 详解CSS布局设计块元素和内联元素
- CSS布局 块级元素及内联元素
- CSS布局 块级元素及内联元素
- CSS布局 块级元素及内联元素
- 块级元素 内联元素嵌套规则
- CSS的块元素和内联元素
- CSS块元素和内联元素特征
- css块级内联元素
- CSS文档流与块级元素和内联元素
- CSS文档流与块级元素和内联元素
- CSS文档流与块级元素和内联元素
- css中常见的块级元素和内联元素
- css块级元素和内联元素的区别
- CSS文档流与块级元素和内联元素
- jquery控制文本框<select>大全
- Activity与Fragment之间的传值
- netstat命令详解
- saltstack 远程安装配置httpd,keepalive,nginx
- Android系统广播大全
- CSS 内联元素和块级元素内部布局规则
- android 系统常用广播
- 使用Intellij IDEA、Maven、Tomcat、MySQL搭建SSH框架
- 安卓、苹果手机数据转移时的备份以及恢复
- mysql存储函数,游标的使用过程中异常捕捉机制
- 2017.07.11——学习总结
- liunx解压文件
- Android 广播大全 Intent Action 事件
- 附近卖家实现2.0