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 隐藏参考线
相关文章
|
7月前
|
前端开发
详解HTML的盒模型以及HTML相关知识点
详解HTML的盒模型以及HTML相关知识点
56 0
|
6天前
HTML盒子大小
默认情况下,盒子可见框的大小右内容区,内边距和边框共同决定 ​ box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用) ​ 可选值:
|
11月前
|
前端开发
HTML|利用CSS美化一个html表格
HTML|利用CSS美化一个html表格
302 0
|
7月前
|
前端开发 搜索推荐 容器
|
9月前
|
移动开发 前端开发 JavaScript
HTML5+CSS-1
HTML5 1、深入了解网站开发 UI设计师 ​ 设计稿
|
9月前
|
自然语言处理 前端开发 数据安全/隐私保护
HTML5+CSS-2
表格属性 border:表格边框 cellpadding:单元格内的空间(用空白填充,上对齐时会被填充挡住) cellspacing:单元格之间的空间(用空白填充)
|
10月前
|
前端开发
HTML与CSS结合制作相应的盒子模型
HTML与CSS结合制作相应的盒子模型
81 0
|
前端开发
HTML/CSS渐变色的实现
HTML/CSS渐变色的实现
50 0
|
前端开发
HTML盒子模型
一.盒子模型的介绍 1.盒子的概念 (1)页面中的每一个标签,都可看做是一个 “盒子” ,通过盒子的视角更方便的进行布局 (2) 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子 2. 盒子模型 ➢ CSS 中规定每个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型 3. 记忆:可以联想现实中的包装盒
HTML盒子模型
HTML5-8(盒子模型)
HTML5-8(盒子模型)
178 0
HTML5-8(盒子模型)