html-盒子模型-垂直布局

一般情况下，我们一般不会设置固定高度，都是让他被内部撑开，父元素的高度是被子元素撑开的，块元素宽高是被内容撑开的，如果父元素宽高设置，小于内容区，则内容回溢出。

若父元素设置了，就是设置多少就是多少。子元素是在父元素的内容区中排列的

如果子元素的大小超过了父元素，则子元素会从父元素中溢出。

使用overflow属性设置父元素如何处理溢出的子元素。

可选值：

visible 默认值子元素会从父元素中溢出，在父元素外部的位置显示

hidden 溢出的内容将会被裁剪不会显示

scroll 生成两个滚动条，通过滚动条来查看完整的内容

auto 根据需要生成滚动条

任务如何去除滚动条样式！

额外两个属性，了解一下

overflow-x：；auto 单独设置水平方向的溢出内容

overflow-y：；auto 蛋到户设置垂直方向溢出的内容

垂直外边距的重叠

兄弟元素

如果外边距都是正值，外边距谁大听谁的。

如果一正一负，外边距的设置，两者相加。

如果两个都是负值，则外边距的设置，绝对值大听谁的。

注意：兄弟元素的外边距一般不需要我们处理，方便我们开发的：

-父子元素

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，从而导致页面布局混乱。

从以下几点分析：内容区、内边距、边框、外边距。

行内元素的盒模型

1，内容区：

默认情况下，不可以自定义内容区的大小

2.内边距

默认情况下，可以正常设置内边距，但垂直方向不会影响到这个页面布局

3，边框 *

默认情况下。、，可以设置边框，但垂直方向边框大小，不影响页面布局

4，外边距

默认情况下·，我们垂直方向的外边距，不可设置，水平方向可以设置，且水平方向外边距不会重叠。

display 设置元素类型

可选值

none 影藏元素

block 将元素转成块元素

inline-block 元素转成行内块元素

table 将元素转换成表格

flex 转换为弹性元素

visibility;;设置元素影藏

行内元素的盒模型

1: 不能设置width和height，被内容撑开

2: 可以设置padding，但垂直方向padding不会影响页面的布局，不会挤别人

3: 可以设置边框，但是垂直的边框不会影响到页面的布局，不会挤别人

4: 可以设置水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，但不支持垂直外边距

display 用来设置元素显示的类型

可选值：

inline 将元素设置为行内元素

block 将元素设置为块元素

inline-block 行内块块元素（即可以设置宽高，又不会独占一行）

table 将元素设置为一个表格

none 元素不在页面中显示（隐藏一个元素）

visibility 用来设置元素的显示状态

可选值：

visible 默认值元素在页面中正常显示

hidden 元素不在页面中显示（隐藏一个元素），位置依然保留。

html-盒子模型-垂直布局相关推荐

CSS盒子模型/页面布局
1.盒子模型页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置 ...
CSS之布局（盒子的垂直布局）
盒子的垂直布局: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
前端学习——css盒子模型简单布局
<html><head><title>盒子模型简单布局</title><meta charset="UTF-8"/>&l ...
CSS3盒子模型-盒子模型的布局
盒子模型布局稳定性开始学习盒子模型,我们初学者最大的困惑就是, 分不清内外边距的使用,什么情况下使用内边距,什么情况下使用外边距?答案是: 其实他们大部分情况下是可以混用的. 就是说,你用内边距也可 ...
css中盒子模型的布局
目录一水平布局二垂直布局 css中的盒子模型布局分为两种:水平布局和垂直布局一水平布局盒子模型中水平方向影响因素有7个,分别是:margin-left border-left padd ...
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下,点越多.图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素 ...
CSS选择器、盒子模型及布局
一.CSS的简介 Cascading Style Sheets:层叠样式表可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能. 将网页内容和显示样式进行了 ...
盒子模型+浮动布局+定位布局
盒子模型 border (边框)元素边框 margin 外边距 padding 内边距 content (内容)可以是文字或图片浮动布局 1.浮动:float:left/right; 2.清 ...
标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
转载自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们 ...
【前端-CSS】盒子模型-水平方向、垂直方向的布局
框模型/ 盒模型/盒子模型水平布局元素在其父元素中的水平方向位置由margin-left.border-left.padding-left.width.padding-right.border-r ...

html-盒子模型-垂直布局

html-盒子模型-垂直布局相关推荐

最新文章

热门文章