网页布局——盒子模型

1、网页布局的过程
   先准备好相关的网页元素，网页元素基本都是盒子box
   利用css设置好样式，摆放到合适的位置上去
   往盒子里面装内容

   本质就是利用css摆放盒子
2、盒子模型的组成（Box Model）
border 边框
content 内容
padding 内边距
margin 外边距

3、边框border
边框有三部分组成：宽度、样式、颜色
border-width:单位一般是px
border-style：solid、dotted、dashed、double
border-color：颜色

边框的复合写法
border：1px solid red ;没有顺序

边框分开写法：
border-top:1px solid red;//只设定上边框，其余的同理
border-bottom:10px dashed purple
边框会影响实际盒子的大小

padding 内边距
边框和内容区之间的距离
padding-left
padding-right
padding-top
padding-bottom

padding简写：
1、一个值：上下左右
2、两个值：上下、左右
3、三个值：上，左右，下
4、四个值：上、右、下、左

padding也会影响盒子的实际大小

margin 外边距，控制黑子和盒子之间的距离
margin-left
margin-right
margin-top
margin-bottom
margin的简写意义和padding完全一样

块级元素水平居中
margin:0 auto

行内元素和行内块元素的水平居中：给父元素添加text-align:center

相邻块元素垂直外边距合并：
当上下相邻的两个块元素（兄弟关系）相遇时，如果过上面的元素的有margin-bottom,下面的元素有上外边距margin-top,
则他们之间的垂直距离不是两者之和，而是取较大的那个值，这就是相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：
1、为父元素设置上外边框
2、为父元素设置上内边距
3、为父元素设置overflow:hidden

清除内外边距：
*{
margin:0;
padding:0;
}

网页布局——盒子模型相关推荐

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
文章目录一.网页底部盒子模型测量及样式 1.盒子布局说明 2.底部的大盒子测量及样式 3.版心盒子 4.版权盒子 5.链接盒子二.代码示例 1.HTML 标签结构 2.CSS 样式 3.显示效果 ...
Day05-CSS布局-盒子模型
CSS布局-盒子模型一.CSS三大特性 3.1 优先级的介绍 3.2 权重叠加计算 3.3 (拓展)权重叠加计算案例 4.1 Chrome调试工具二.PxCook的基本使用三.盒子模型 1.1 ...
网页的盒子模型是什么？怎么设置盒子样式
网页的盒子模型是什么?怎么设置盒子样式欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树S ...
【前端学习笔记】(五)（CSS布局盒子模型）
目录盒子模型 1.盒子模型的介绍 2.内容区域的宽度和高度 3.边框( border ) 3.1 边框(border)- 单个属性 3.2 边框(border)- 连写形式 3.3 边框(borde ...
CSS布局盒子模型(复习巩固)
文档流 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
html盒子页面居中,网页布局盒子(box)相关属性和盒子居中
网页布局中盒子的相关属性: 一.盒子的基础属性: 1.width和height:设置盒子的宽度和高度:常见单位:px,em,rem,vh/vm等 2.background:color(设置背景颜色), ...
JavaScript-页面布局-div布局-盒子模型
文章目录 1.盒子模型 2.定位方式 3.排列属性-float和clear 4.块和内联属性 5.作者答疑在使用Html构建界面时,最关键的标签是div,这是一个有着各种属性的块状标签,能够以绝 ...
Web网页设计-盒子模型
盒子模型就是把页面中的HTML元素看作一个方形的盒子,也可以理解为一个盛装内容的容器. 每个盒子都由元素的内容.内边距(padding).边框(border)和外边框(margin)组成. 边框属性 ...
css中盒子模型的布局
目录一水平布局二垂直布局 css中的盒子模型布局分为两种:水平布局和垂直布局一水平布局盒子模型中水平方向影响因素有7个,分别是:margin-left border-left padd ...

网页布局——盒子模型

网页布局——盒子模型相关推荐

最新文章

热门文章