学习 day4 html 盒子模型

?xiaoxiao, 发布于2019-04-23 11:44 / 452人阅读

盒子模型

1.框模型

框：页面上所有元素都可以称为“框”

框模型：（BOX Model）,又称盒子模型

定义框处理元素内容、内边距padding、外边距margin、边框的样式border

外边距margin

margin-方向:
       margin-left:
       margin-right:
       margin-top:
       margin-bottom:

不定义方向一个值默认四个方向一样；两个值第一个左右第二个上下；三个不常见；四个值左上右下

左右外边距设置为auto时，当前的块级元素会居中显示

内边距padding

padding-方向:

        padding-left
        padding-right:
        padding-top:
        padding-bottom:

不定义方向一个值默认四个方向一样；两个值第一个左右第二个上下；三个不常见；四个值左上右下

边框的样式border

border-方向:

　　border-left
        border-right:
        border-top:
        border-bottom:

不定义方向一个值默认四个方向一样；两个值第一个左右第二个上下；三个不常见；四个值左上右下

注意：
1.有些块级元素会存在默认外边距如 body h1~h6 p
2、垂直外边距合并
两个垂直外边距相遇时，将会合成一个外边距。最终外边距的值是两者中边距较大的的值。

3、背景图片
   属性：background-image
   取值：url(图像路径)
       background-image:url("");

1、背景重复
       默认情况，背景图会在水平和垂直两个方向都出现重复的效果(平铺)
       属性：background-repeat
       取值：
       repeat ：默认值，水平垂直平铺
       repeat-x : 水平平铺
       repeat-y : 垂直平铺
       no-repeat : 不平铺（用的最多）
2、背景图片固定
   属性：background-attachment
   取值：

   fixed，背景图像固定
    3、背景定位
   改变背景图像在元素中的位置
   属性：background-position
   取值：
   x y :x表示水平方向移动距离，+向右，-向左，y表示垂直方向移动距离，+向下，-向上
   x% y% :
   0% 0% : 显示在元素的左上方
   100% 100% : 显示在元素的右下方
   50% 50% : 居中
   left :靠左
   right:靠右
   center :将元素显示在水平或垂直方向的中间
   top:靠上
   bottom:靠下
   background-position:left top;
   background-position:top left;
   background-position:center;

4、文本格式化

   1、指定字体
   font-family：选择字体格式
   font-family:"microsoft yahei","arial","verdana";
   2、字体大小
   font-size:value;

   font-size:12px;
   3、字体加粗      normal正常
   font-weight:normal / bold ;
   400 - 900
   4、字体样式(斜体)   i
   font-style:normal/italic;
   5、小型大写字母   font-variant字体型状
   font-variant:normal/small-caps;
   6、字体属性
   font:font-style font-variant font-weight font-size font-family;
   常用方式：
   font:font-size font-family;
   font:12px "微软雅黑",arial,verdana;

云服务器 GPU云服务器盒子模型盒子 html html 盒子边框 html 盒子剧中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1075.html

100天搞定机器学习|Day4-6 逻辑回归

摘要：而逻辑回归对于这样的问题会更加合适。也就是说，逻辑回归是用来得到样本属于某个分类的概率。这样构造的损失函数是合理的，并且它还是一个凸函数，十分方便求得参数，使得损失函数达到最小。然后导入逻辑回归类。逻辑回归avik-jain介绍的不是特别详细，下面再唠叨一遍这个算法。 1.模型在分类问题中，比如判断邮件是否为垃圾邮件，判断肿瘤是否为阳性，目标变量是离散的，只有两种取值，通常会编码为...

qujian 2019-07-31 11:31 评论0 收藏0
盒子模型浅析

摘要：上篇文章总结了块级元素和行内元素这篇文章总结了有关盒子模型的知识，助于梳理知识首先，什么是盒子模型我们知道，文档中，基本上每个元素都可以看作一个盒子，我们称之为盒子模型。在盒子模型中我们设置的指的是盒子真实占有宽高即如的宽高。上篇文章总结了块级元素和行内元素这篇文章总结了有关盒子模型的知识，助于梳理知识首先，什么是盒子模型我们知道，html文档中，基本上每个元素都可以看作一个盒子，我们称...

番茄西红柿 2019-04-23 13:38 评论0 收藏0
DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

iOS122 2019-08-29 11:13 评论0 收藏0
DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

HackerShell 2019-08-01 15:41 评论0 收藏0