盒子模型

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;

  

学习 day4 html 盒子模型的更多相关文章

  1. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  2. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  3. HTML学习笔记 w3sCss盒子模型(阴影)(div的一些使用)案例 第十节 (原创) 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS学习笔记07 盒子模型

    1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...

  5. CSS学习笔记:盒子模型

    盒子模型(CSS basic box model):When laying out a document, the browser's rendering engine represents each ...

  6. 1.26学习总结——css盒子模型

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

  7. CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子

    怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...

  8. HTML学习笔记 w3sCss盒子模型应用案例(div布局) 第十一节 (原创) 参考使用表

    * { margin: 0px; padding: 0px; } .top { width: 100%; height: 50px; background-color: antiquewhite; } ...

  9. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

随机推荐

  1. 【方案】mvc 保证定时器回收限制

    在项目中我们或多或少的遇到一些需要定时触发或者计算的东西,这个时候我们就需要定时器来作为解决方案.非常好思路清晰,业务逻辑完好,定时器也开好了,当我们信心满满的挂到IIS服务器的时候,发现写的定时器在 ...

  2. PAT1088:Rational Arithmetic

    1088. Rational Arithmetic (20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue F ...

  3. eclipse 创建maven web示例

    注意,以下所有需要建立在你的eclipse等已经集成配置好了maven了,没有的话需要安装maven. 一.创建项目 1.新建maven项目,如果不在上面,请到other里面去找一下 一直点击下一步, ...

  4. 斐波那契数列第n项的值及前n项之和

    <script>// 算法题 // 题1:斐波那契数列:1.1.2.3.5.8.13.21...// // 一.斐波那契数列第n项的值 // // 方法一//递归的写法function a ...

  5. C#通熟易懂观察者模式

    观察者模式(有时又被称为模型-视图(View)模式.源-收听者(Listener)模式或从属者模式)是软件设计模式的一种.将观察者(watcher)和被观察者(subject)完美分离. 这里讲一个场 ...

  6. 为何没有asia/beijing时区?

    Asia/Beijing 这个时区是消失了么? 大约1小时 ago @tinyfool 对啊,我就奇怪为什么北京时间就要用上海和成都... 大约1小时 ago @tinyfool @CatChen我所 ...

  7. MySQL(二)MySQL的安装和简单使用

    1.MySQL产品的介绍 MySQL数据库属于MySQL AB公司,总部位于瑞典,后被Oracle收购. 优点: (1)成本低:开放源代码,可以免费使用 (2)性能高:执行很快 (2)简单:很容易安装 ...

  8. Canvas的基本用法

    canvas没有设置宽度和高度的时候,会初始化宽度:300像素和高度:150像素.可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲 ...

  9. spring创建bean及数据注入

    通过spring的IoC可以实现由配置文件来创建类的对象,可以降低类鱼类之间的耦合, 通常我们都是在代码中控制对象的生成和属性注入,而使用IoC后,就可以将设计好的类交给IoC容器,让容器去控制对象的 ...

  10. linux常用命令:创建文件和文件夹

    1.首先说一下touch 创建文件的命令,touch可以用于创建二进制文件,用法非常简单.用法:touch+文件名,touch与文件名之间一定要有空格.图中先用之前分享过的命令来查看一下/目录下面有多 ...