day4 学习主要内容

  • 盒子的组成
  • 内容(width、height) 边框(border)  内填充(padding) 外填充(margin)

  • Padding 内填充 内补丁 内补白
  • 特性:内容和边界之间的距离,padding会撑大盒子,padding区域会出现背景颜色和背景图片,不能设置负值。

    一个值 代表上下左右都是

    两个值 代表  上下  左右

    三个值 代表  上  左右  下

    四个值 代表  上  右  下  左

    可以单独设置某一个方向padding-left/right/top/bottom

  • Margin 外填充  外补丁  外补白
  • 特性:盒子与盒子之间的距离,margin不会撑大盒子(如果单独拿一个盒子来说margin不会撑大盒子,如果一个大盒子里放置多个小盒子margin的存在会影响大盒子一排摆放小盒子的个数,此时可以说margin会影响盒子的大小),margin区域不会出现背景颜色和背景图片,能设置负值。

    一个值 代表上下左右都是

    两个值 代表  上下  左右

    三个值 代表  上  左右  下

    四个值 代表  上  右  下  左

    可以单独设置某一个方向margin-left/right/top/bottom

  • 盒子实际宽高的算法
  • 实际宽=(border-left)+(padding-left)+width+(padding-right)+(border-right)+(margin-left)+(margin-right)

    实际高=(border-top)+(padding-top)+height+(padding-bottom)+(border-bottom)+(margin-top)+(margin-bottom)

  • 怪异盒模型
  • 在怪异盒模型里border和padding是不会撑大盒子的,盒子的大小就是我们给定的宽高

    标准盒模型与怪异盒模型之间转换的属性是box-sizing:border-box(怪异盒)/content-box(默认值 标准盒)

    如果html的基本结构中不存在<!Doctype html>ie浏览器会自动触发怪异盒模型

  • Margin-top的传递(子元素的margin-top传递给父元素)解决方法:
  • A:给父元素添加border  会撑大盒子

    B:给父元素添加padding 会撑大盒子

    C:给父元素添加float  float的元素会脱离正常文档流

    D:给父元素添加overflow:hidden; 属性  内容溢出会被裁切

    E:给元素本身添加float属性  float的元素会脱离正常文档流

    F:给元素本身添加display:inline-block/table-caption;

  • 上下margin的计算方式
  • 如果两个元素都没有float 上下margin会发生重叠,取较大值

    两个元素都float时,上下margin不会发生重叠, 算加法

  • 圆角属性border-radius(css3.0低版本浏览器不支持)

最多可以设置8个值

一个值代表 这四个角都是此值  (如果值大于等于宽高一半或者用50% 可以形成一个圆形)

两个值   左上右下  右上左下

三个值  左上   右上左下  右下

四个值  左上  右上  右下  左下

反斜杠的值代表y轴方向的弧度

  • 页面制作
  1. 创建html页面(首页一般叫index.html)
  2. 创建css样式表
  3. 图片截图(切图)
  4. 在css里重置样式:

*{margin:0; padding:0;}

A{text-decoration:none;}

Li{list-style:none;}

Img{vertical-align:middle;}

  1. 网页的外围结构
  2. 添加对应内容设置对应css
  3. 去掉搭建结构时不需要的背景颜色
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值