博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
盒子模型
阅读量:5039 次
发布时间:2019-06-12

本文共 1394 字,大约阅读时间需要 4 分钟。

盒子模型

1:外边距

  属性:margin   (margin-top  margin-bottom margin-left margin-right)

  取值:数字+px;

  margin:x y;       margin取两个值的时候x代表的是上下 y代表的是左右

  margin:x y z m;  取四个值的时候   上右左下的顺序

  左右设置为auto的话  居中显示

  有的块元素会存在默认的外边距例如  body  h1~h6  p

  垂直方向上的外边距合并问题:两个垂直外边距相遇时将会合成一个外边距,最终以较大的值显示

  继承性问题:给子元素设置margiin-bottom时,默认会被识别成父亲的margin-bottom

          解决方案:1给父亲设置边框  2通过父亲的padding解决

2:内边距

  1什么是内边距

    内边距时内容和边框之间的空白,内边距会扩大边框所占用的面积

  2属性

    padding   取值  数字+px

    padding:x y    以两个数字   x代表上下  y代表左右

    padding:x y z m 以四个数字  上右下左

3:背景

  1背景色

  background-color       背景颜色会填充到元素的边框,内边距,内容区域01

  transpartent透明

  2背景图片

  属性:background-image:url(“图片路径”)

  3背景重复

  默认的图片能铺满整个框(平铺)

  属性:background-repeat

  取值:repeat 默认值   repeat-x水平平铺  repeat-y垂直平铺  no-repeat不平铺

  4背景图片固定

  属性:background-attacment

  取值:fixed  固定

  5背景定位

  改变背景图片在元素中的位置

  属性:background-position

  xy   x代表水平方向 y代表垂直方向

  center    top  bottom 

3:文本格式化、

  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;

 

转载于:https://www.cnblogs.com/bxl-1016/p/10415006.html

你可能感兴趣的文章
【Linux】- CentOS 防火墙iptables和firewall
查看>>
selenium安装及官方文档
查看>>
【SVN】导出项目后报错汇总
查看>>
使用Redis存取数据+数据库存取(spring+java)
查看>>
MySQL教程(六)—— 数据库的创建与删除
查看>>
2018.11.24 poj2774Long Long Message(后缀数组)
查看>>
Python之路【第十六篇】Django基础
查看>>
nyoj 最长公共子序列(LCS)
查看>>
java基础 三 概念和java程序的结构.
查看>>
jedis应用实例
查看>>
Netty实战八之引导
查看>>
如何做一个自己的开源聊天项目?(仿微信)
查看>>
C#异步编程
查看>>
XML的简单读取与写入
查看>>
关于dojo模块化引入包的问题
查看>>
Linux下 网卡测速
查看>>
17秋 软件工程 团队第五次作业 Alpha Scrum1
查看>>
17秋 软件工程 团队第五次作业 Alpha 测试报告
查看>>
js 定时器
查看>>
iOS CoreAnimate 动画实现
查看>>