CSS之布局（盒子的水平布局）

盒子的水平布局：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒子的水平布局</title><style>.outer{width: 800px;height: 200px;border: 10px red solid;}.inner{width: 200px;height: 200px;background-color: #BBFFAA;margin-left: 60px;/*元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定：margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中，水平布局必须满足以下的等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整-调整的情况：-如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足-这七个值中有三个值可以设置为autowidthmargin-leftmargin-right如果将一个外边距和宽度，设置为auto，则宽度会调到最大，外边距最大如果将两个外边距设置为auto，宽度为固定值，则会将外边距设置为相同的值’ 所以我们经常利用这个特点来使一个元素在其父元素中水平居中示例：width:xxxpx;margin:0 auto;*/}</style></head><body><div class="outer"><div class="inner"></div></div></body>
</html>

CSS之布局（盒子的水平布局）相关推荐

CSS选择器、盒子模型及布局
一.CSS的简介 Cascading Style Sheets:层叠样式表可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能. 将网页内容和显示样式进行了 ...
如何用css实现一个盒子的水平垂直方向的居中
1)先将元素通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素的中心点到页面的中心.该方法需要考虑浏览器兼容问题 .parent { position: ...
CSS——盒子模型以及盒子的水平、垂直布局
文章目录前言一.什么是文档流二.盒子模型三.盒子的水平布局四.盒子的垂直布局五.盒子的垂直外边距重叠总结前言本文主要介绍CSS中的盒子模型,以及盒子的水平与垂直布局等相关知识点,感兴 ...
【前端-CSS】盒子模型-水平方向、垂直方向的布局
框模型/ 盒模型/盒子模型水平布局元素在其父元素中的水平方向位置由margin-left.border-left.padding-left.width.padding-right.border-r ...
CSS布局盒子模型(复习巩固)
文档流 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
【Duilib自定义控件】水平布局的滚动扩展布局，实现菜单的可滑动效果
为了实现如下效果: 左侧为固定菜单,右侧为可滑动菜单.当窗口足够大,菜单可全部展显示. 窗口变小时,菜单只能显示一部分.滑动到最左侧,左滑按钮灰掉左滑右滑按钮皆可用滑动到最右侧,右滑按钮灰掉. 需 ...
android线性布局水平布局,andriod：线性布局中的垂直于水平布局问题
1. 线性布局--- LinearLayout: LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后.如果是垂直排列,那么将是一个N行单列的结构,每一行只会 ...
【前端学习笔记】(五)（CSS布局盒子模型）
目录盒子模型 1.盒子模型的介绍 2.内容区域的宽度和高度 3.边框( border ) 3.1 边框(border)- 单个属性 3.2 边框(border)- 连写形式 3.3 边框(borde ...
css中盒子模型的布局
目录一水平布局二垂直布局 css中的盒子模型布局分为两种:水平布局和垂直布局一水平布局盒子模型中水平方向影响因素有7个,分别是:margin-left border-left padd ...

CSS之布局（盒子的水平布局）

盒子的水平布局：

CSS之布局（盒子的水平布局）相关推荐

最新文章

热门文章