css元素的水平与垂直布局
水平布局
一个元素在其父元素水平方向上的位置由margin-left,border-left,padding-left,content(width),padding-right,border-right,margin-right共同决定。
一个元素在父元素中时,必须满足以上七个属性值的和等于其父元素内容区的width。
若等式未成立,则会把这种情况称为过度约束,此时等式会自动进行调整,调整的情况为:
- 如果七个值中没有为auto的,浏览器自动调整margin-right来配平等式。
- 七个值中width,margin-right,margin-right可以设置为auto。
- 当其中某个值为auto时,自动调整auto值配平等式。
- 当一个外边距与width都是auto时,width调整为最大,外边距的auto为0;
- 当三个值都为auto时,width调整为最大,两个外边距都为0;
- 当两个外边距都是auto,width固定时,会调整两个外边距的值相等并配平等式。利用这一点可以将元素在其父元素中居中。
垂直布局
默认情况下父元素的高度被内容撑开。
子元素在父元素的内容区进行排序,若为父元素固定了内容区的height,同时子元素超出了父元素的height,这种情况叫做子元素从父元素中溢出,一般使用overflow处理溢出。
overflow
用于设置在父元素中如何处理溢出的子元素。
可选值:
- visible:默认值,子元素从父元素中溢出,在父元素外部显示;
- hidden:隐藏,溢出部分会被裁减,不会显示;
- scroll:滚动,生成两个滚动条,通过滚动条查看完整内容;
- auto:根据需要生成滚动条
可以使用overflow-x或overflow-y单独处理水平或垂直方向上的溢出。
垂直外边距的重叠问题
相邻的垂直方向上的外边距会发生重叠现象。根据定义可以分析外边距重叠主要有两种情况:兄弟元素间的外边距重叠与父子元素间的外边距重叠。
兄弟间的外边距重叠
由于外边距可以为负值,这里又对几种情况进行分类。
- 两者都是正值:取两者间的较大值;
- 一正一负:取两者的和
- 都是负值:取两者中绝对值较大的。
兄弟外边距重叠有利于开发,一般不做处理。
父子间的外边距重叠
父子元素间的相邻外边距,子元素会传递给父元素(主要指上边距),从而影响页面布局,必须进行处理。
处理方式:
- 不使用外边距:使用父元素的padding也可以改变子元素位置,但需要改变父元素content(height)的大小,保证可见框的大小不变。
- 使用透明边框使父子元素的外边距不相邻。
有关外边距重叠的更多解决方案可以去看我的另一篇文章: css中的外边距重叠.
css元素的水平与垂直布局相关推荐
- CSS基础(19)_绝对定位元素的水平或垂直布局
文档流中布局 一个元素在其父元素中,水平布局之前是要满足以下等式: margin-left+border-left+padding-left+width+padding-right+border-ri ...
- CSS水平、垂直布局、盒子
Normal folw 文档流 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- CSS——盒子模型以及盒子的水平、垂直布局
文章目录 前言 一.什么是文档流 二.盒子模型 三.盒子的水平布局 四.盒子的垂直布局 五.盒子的垂直外边距重叠 总结 前言 本文主要介绍CSS中的盒子模型,以及盒子的水平与垂直布局等相关知识点,感兴 ...
- MFC添加加瓦系列一之MFC水平与垂直布局
前言 MFC 作为Windows界面编程元老级的成员,确实是让人又爱又恨.但是如果有人让我在windows下实现功能性桌软,我依然会选择它.于是小马哥决定从今天起推出我的第一个编程系列<MFC填 ...
- CSS之元素的水平方向的布局
元素水平方向的布局: margin-left: border-left padding-left: width: padding-right border-right margin-right 一个元 ...
- 【Qt】水平和垂直布局
00. 目录 文章目录 00. 目录 01. 概述 02. 开发环境 03. 水平布局常用方式 04. 水平布局常用设置 4.1 设置外边距 4.2 设置间距 4.3 添加伸缩空间 4.4 添加控件 ...
- html字体竖排上下间距,css文字竖排显示 文字垂直布局
div css文字竖排 CSS文字竖立显示.CSS文字从上到下垂直显示.CSS文字垂直排版布局篇 在CSS中CSS样式属性writing-mode:tb-rl是设置文字垂直显示竖排的,但是不兼容浏览器 ...
- css实现div水平、垂直都能充满整个屏幕
@charset "UTF-8";*{margin: 0;padding: 0; }html,body { // 核心代码height: 100%;width: 100%; }#m ...
- CSS元素总结及HTML布局
HTML标签 <div>布局标签 <h1-h6>标题标签 <p>段落标签 <a>超 ...
最新文章
- Linux下配置Golang开发环境
- Docker file 搭建 Nginx镜像
- python基础教程:类型转换和舍入
- 微服务架构下 CI/CD 如何落地
- 前端学习(1580):初始react
- putty的的颜色配置步骤
- 学习前端需要掌握什么基础?
- Python中的类属性和类方法(静态方法、私有属性和私有方法)
- 利用BI搭建零售业数据信息平台
- nyoj--82--一笔画问题
- 15.Linux/Unix 系统编程手册(上) -- 文件属性
- 图灵机器人官网 java_图灵机器人-Java/Android
- CNZZ是统计什么的
- ssdt函数索引号_技术分享 - 32位系统上获取SSDT表地址以及从中获取指定SSDT函数的地址...
- 顶级业务架构设计的“道”与“术”,醍醐灌顶!
- 艾美捷科研专用西妥昔单抗Cetuximab相关介绍
- Cocos2d-x随记(2)-精灵移动
- 这4类照片不能留在手机中,越快删除越好,不然后患无穷
- 微信小程序云开发之Node部署
- 3.5mm耳机喇叭和麦克接头差异
热门文章
- 以作回顾、以作借鉴、以作鼓励
- mysql数据库报 请在mysql配置文件修sql-mode为NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION
- JavaScript图片轮播案例
- 中断上下文以及下文延后执行
- 如何用手机观看群晖ds218play上视频
- Android手机令牌教程
- Total Command快捷键大全
- 【深科信动态】科技创新与产业发展政策研究院揭牌成立!
- Pragma section
- Restormer: Efficient Transformer for High-Resolution Image Restoration