欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

学习 day4 html 盒子模型

程序员文章站 2022-06-22 12:49:17
盒子模型 1.框模型 框:页面上所有元素都可以称为“框” 框模型:(BOX Model),又称盒子模型 定义框处理元素内容、内边距padding、外边距margin、边框的样式border 外边距margin margin-方向: margin-left: margin-right: margin- ......

盒子模型

1.框模型

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

框模型:(box model),又称盒子模型

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

学习  day4  html   盒子模型

 

外边距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;