Css-布局

CSS- 布局

文档流

• 文档流：网页的基础，指网页的最底层。，默认情况下，所有元素都位于文档流

  • 不在文档流：脱离文档流

• 在文档流中

  块元素

  • 独占一行
  • 默认宽度：父元素的全部
  • 默认高度：子元素（内容撑开）

  行内元素

  • 不会独占一行，只占自身大小，一行容纳不下，则转自第二行
  • 自左向右排列
  • 默认宽度，高度：子元素撑开

盒模型

• 属性
  • width，height
  • 外边距（margin）
  • 内边距（padding）
  • 边框（border）
  • width和height指内容区的高度和宽度，增加内边距，边框，外边距不会影响内容区尺寸，但会影响元素框总尺寸
• 可见框：内容区+内边距+边框

内边距

• 长度值，百分比值（相对父元素width）
• 设置方式

方式一：四个方向一样

h1 {padding: 10px;}

方式二：上右下左

h1 {padding: 10px 0.25em 2ex 20%;}

方式三：单独设置

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

外边距合并
当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度去合并前较大值
合并情况

情况一： 一个元素位于另一个元素之上

情况二：包含关系，且没有内边距或边框把外边距分隔开

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

边框

• border-width
• border-color
• border-style
  • solid（实线）
  • datted（点状虚线）
  • dashed（虚线）
  • double（双线）
• 简写：按照，border-width，border-style，border-color，的顺序书写，分号隔开

.box1{
			width:200px;
			height:200px;
			background-color: #bfa;
			/*
			 
			 * 边框：
			 * border-width
			 * border-color
			 * border-style
			 * */
			border-color: orange green;
			/*
			 同时设置四条边
			 * 1:上下左右
			 * 2：上下，左右
			 * 3：上，左右，下
			 * 4：上，右，下，左
			 * 其他的同
			 * */
			border-width:3px;
			/*solid：实线
			 * datted：点状虚线
			 * dashed：虚线
			 * double：双线
			 */
			
			border-style: solid double;
			/*
			 border简写
			 
			 * border：10px，red，soiled；20px green dashed
			 * 按照，border-width，border-style，border-color，的顺序书写，分号隔开。
			 * 
			 * */
			
		}

行内元素的盒模型

• 行内元素不支持设置宽度和高度。
• 行内元素可以设置padding（内边距），border（边框），margin（外边距），且垂直方向不影响页面的布局。
• 可以通过display来设置元素的类型。
  • inline(行内元素)
  • block(块元素)
  • inline-block（行内块元素）
  • table（将元素设置为表格）
  • none（元素影藏）
• visibilty可以用来设置元素的显示状态。
  • visible（默认值，页面中正常显示）
  • hidden（页面中隐藏，占位置）

水平布局

决定因素

• margin-left， margin-right
• border-left,border-right
• margin-left,margin-right
• width
  以上7个元素之和=父元素内容区长度

如果不成立
margin-left，margin-right，width中

• 没有auto——》margin-right
• 1 auto——》调整auto的值
• 宽度+外边距 auto——》宽度最大，auto外边距为0
• 两个外边距auto+宽度固定值——》外边距设置一样的值
• 三个值auto，外边距0，宽度最大

垂直布局

子元素在父元素中排列，当内容溢出时

• overflow属性处理
• overflow-x：处理水平方向溢出
• overflow-y：处理垂直方向溢出
  • 可选值
  • visible：默认显示
  • hidden：隐藏
  • scroll：显示水平与垂直滚动条
  • auto：根据需要显示滚动条