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 隐藏参考线
相关文章
|
前端开发
详解HTML的盒模型以及HTML相关知识点
详解HTML的盒模型以及HTML相关知识点
72 0
|
9天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
9天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
|
6月前
HTML盒子大小
默认情况下,盒子可见框的大小右内容区,内边距和边框共同决定 ​ box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用) ​ 可选值:
|
前端开发
HTML|利用CSS美化一个html表格
HTML|利用CSS美化一个html表格
383 0
|
前端开发
HTML与CSS结合制作相应的盒子模型
HTML与CSS结合制作相应的盒子模型
98 0
|
前端开发
html和css实现导航条
html和css实现导航条
87 0
html和css实现导航条
|
前端开发
HTML/CSS渐变色的实现
HTML/CSS渐变色的实现
75 0
|
前端开发
HTML盒子模型
一.盒子模型的介绍 1.盒子的概念 (1)页面中的每一个标签,都可看做是一个 “盒子” ,通过盒子的视角更方便的进行布局 (2) 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子 2. 盒子模型 ➢ CSS 中规定每个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型 3. 记忆:可以联想现实中的包装盒
143 0
HTML盒子模型