html-day04盒子模型

简介: html-day04盒子模型

html-day04盒子模型


1.浮动:是一种布局属性,主要用于实现一行多列效果

语法:
    float:left; 或者  float:right;
应用:
  1.一行多列-元素横着排列
  2.实现图文环绕效果。 
注意:浮动会让元素脱离文档流!

2.盒子模型:是一种思维模型,主要用于实现布局效果。

组成: 尺寸 + 内边距 + 外边距 + 边框

1.尺寸

1.设置宽度    width:*px | *%;
2.设置高度    height:*px | *%;
说明: 
 如果使用百分比,代表的是其父元素的宽高的百分比。
 行级元素不能设置宽高。

2.边框

border:边框的粗度   线型    颜色;
    线型有:  solid实线    dashed虚线   dotted点线  double双线
设置指定方向的边框
    border-方向的英文:边框的粗度   线型    颜色;
    设置左边框          border-left:边框的粗度   线型    颜色;
    设置上边框          border-top:边框的粗度   线型    颜色;
    设置下边框          border-bottom:边框的粗度   线型    颜色;
    设置右边框          border-right:边框的粗度   线型    颜色;
注意:单个和复合属性一起使用,必须复合在前,单个在后!

3.内边距:盒子内容和其边框之间的间隔。

padding:*px;
   padding:10px 20px 30px 40px;
   padding:10px 20px 30px;
   padding:10px 20px;
   padding:10px; 四个方向
   对应规则:上方向出发,顺时针旋转对应。有缺省,取对边。
设置左内边距          padding-left:*px;
设置上内边距          padding-top:*px;
设置下内边距          padding-bottom:*px;
设置右内边距          padding-right:*px;
注意:padding会撑大盒子;在盒子的宽高基础上做减法解决

4.外边距:盒子边框和之外的东西的间隔。

margin:*px; 
  margin:10px 20px 30px 40px;
  margin:10px 20px 30px;
  margin:10px 20px;
    margin:10px; 四个方向
    对应规则:上方向出发,顺时针旋转对应。有缺省,取对边
    设置左外边距          margin-left:*px;
    设置上外边距          margin-top:*px;
    设置下外边距          margin-bottom:*px;
    设置右外边距          margin-right:*px;
块级元素和行级元素的区别: 【面试题】
    块级元素:默认独占整行,是一个完整的盒子,可以设置宽高等。
    行级元素:有多宽占多宽,不是完整的盒子,不可以设置宽高、垂直方向的内外边距等。
注意:可内可外用内边距 
      盒子自动水平居中   margin:0 auto;
ps的操作:
    ctrl+h 隐藏参考线
相关文章
|
8月前
|
前端开发
详解HTML的盒模型以及HTML相关知识点
详解HTML的盒模型以及HTML相关知识点
56 0
|
4天前
|
移动开发 前端开发 JavaScript
HTML 布局
HTML 布局
12 1
|
19天前
|
前端开发
html中添加样式表
【4月更文挑战第4天】html中添加样式表
23 5
|
19天前
HTML盒子大小
默认情况下,盒子可见框的大小右内容区,内边距和边框共同决定 ​ box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用) ​ 可选值:
|
12月前
|
前端开发
HTML|利用CSS美化一个html表格
HTML|利用CSS美化一个html表格
302 0
|
10月前
|
前端开发 容器
HTML5+CSS-4
21、float浮动 文档流:文档流是文档中可显示对象在排列时所占用的位置 float特性:加浮动的元素会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列
|
11月前
|
前端开发
HTML与CSS结合制作相应的盒子模型
HTML与CSS结合制作相应的盒子模型
83 0
|
前端开发
HTML盒子模型
一.盒子模型的介绍 1.盒子的概念 (1)页面中的每一个标签,都可看做是一个 “盒子” ,通过盒子的视角更方便的进行布局 (2) 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子 2. 盒子模型 ➢ CSS 中规定每个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型 3. 记忆:可以联想现实中的包装盒
HTML盒子模型
|
Web App开发 前端开发 测试技术
Html之 DIV+CSS布局
Html之 DIV+CSS布局
133 0
Html之 DIV+CSS布局
HTML5-8(盒子模型)
HTML5-8(盒子模型)
178 0
HTML5-8(盒子模型)