CSS之元素的水平方向的布局

元素水平方向的布局:
margin-left:
border-left
padding-left:
width:
padding-right
border-right
margin-right
一个元素在其父元素中水平布局必须满足下面的等式:
margin-left+border-left+padding-left+width+border-right+padding-right+margin-right+== 父元素内容区的宽度

如果上述等式不成立的话,则称为过度约束,等式自动调整
调整的情况:
如果这7个值中没有auto的情况,浏览器会自动调整margin-right的值以致等式成立

有三个属性可以设置为auto
width:
margin-left
margin-right
如果有属性设置为auto,会自动调整该属性值以满足等式的值

如果设置了一个宽度和外边距为auto,则调整宽度为最大值,以及将auto外边距设置为0
如果将这三个属性都设置为auto,则调整宽度为最大值,将其他两个设置为0

如果将两个外边距设置为auto,宽度固定值,则会将两个外边距设置为相同的值
利用这个特性,可以使得子元素在父元素中水平居中显示
0+0+0+200+0+0+0=800

50+0+200+0+0+550=800

eg:
子元素选择器{
width:xxxpx;
margin:0 auto;
}

margin可以设置为负值,表示往反方向走

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>元素的水平布局</title><style>/**/.outer {width: 800px;height: 200px;border: 1px solid red;}.inner {width:200px;height: 100%;background-color: seagreen;/* margin-left: auto;margin-right:auto; */margin:0 auto;/* margin-right: 200px;  *//* border-left:100px;  *//* margin-right: 60px;margin-top:50px;margin-bottom: 20px; */}</style>
</head><body><div class="outer"><div class="inner"></div></div></body></html>

CSS之元素的水平方向的布局相关推荐

利用CSS使元素在水平方向或水平,竖直同时居中
水平居中三种方法,参考: <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset ...
CSS基础(19)_绝对定位元素的水平或垂直布局
文档流中布局一个元素在其父元素中,水平布局之前是要满足以下等式: margin-left+border-left+padding-left+width+padding-right+border-ri ...
什么是盒子模型中的水平方向的布局
目录元素的水平方向布局: 必须要满足的等式调整的情况: 编辑设置auto的情况元素的水平方向布局: 元素在其父元素中水平方向的位置由以下几个属性共同决定 margin-left ...
css元素的水平与垂直布局
水平布局一个元素在其父元素水平方向上的位置由margin-left,border-left,padding-left,content(width),padding-right,border-righ ...
【前端-CSS】盒子模型-水平方向、垂直方向的布局
框模型/ 盒模型/盒子模型水平布局元素在其父元素中的水平方向位置由margin-left.border-left.padding-left.width.padding-right.border-r ...
Flutter基础之水平方向列表布局
在Flutter中,用ListView来显示列表项,其支持垂直和水平方向展示,通过过一个属性我们就可以控制其方向,列表有以下分类: ListView组件属性及描述属性名类型默认值说明 Scro ...
CSS 常用样式水平居中水平垂直居中 Container布局
效果图1 效果图1代码 <div class="bg-all"><div class="large-container"></di ...
CSS水平、垂直布局、盒子
Normal folw 文档流 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
CSS——盒子模型以及盒子的水平、垂直布局
文章目录前言一.什么是文档流二.盒子模型三.盒子的水平布局四.盒子的垂直布局五.盒子的垂直外边距重叠总结前言本文主要介绍CSS中的盒子模型,以及盒子的水平与垂直布局等相关知识点,感兴 ...

CSS之元素的水平方向的布局

CSS之元素的水平方向的布局相关推荐

最新文章

热门文章