6.学习html笔记

###盒子模型###

  • line-height:20px 设置行高
  • 网页设计需要先清除元素的默认边距设置
    • *{ margin:0px;
      padding:0px;}
    • body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
  • 固定元素的边框大小 box-sizing:
    • border-box;
    • cotent-box; 默认值
  • 盒子位置居中,可以通过margin设置,里面的元素居中通过padding设置
  • margin:0 auto; 水平居中
  • 盒子如果垂直居中,外面的盒子需要设置边框防止margin-top合并;
  • float 元素浮动排版,浮动排版是没有margin:0,auto;的,float的元素均水平排版,行级元素也可以设置宽高。
    • float:left;
    • float:right
    • float:none;
  • 浮动元素的文字围绕浮动元素;
  • 网页开发布局中,垂直标准排版,水平浮动排版;
  • 在标准排版中,内容可以撑起盒子的大小
  • 一个浮动元素不能撑起父元素的大小
  • 清除浮动
    • 设置父级元素大小
    • 元素的clear属性 none 默认按照浮动顺序排版
      • left 左侧浮动元素不换到上一个浮动元素后面
      • right
      • both 不在左侧也不再右侧,使用用到最多;
    • 外墙法,对于浮动垂直盒子的margin-top 和margin-bottom失效,中间可以添加块级元素clear:both;来隔离。
    • 内墙法,在第一个盒子所有元素的最后添加一个清除浮动的块级元素
  • 伪元素选择器 CSS3
    • div::befor{在制定标签内开始添加的内容或元素;}
    • div::after{}
      • visibility:hidden;添加元素隐藏
    • 可以利用伪元素选择器添加块级元素清除浮动 推荐实际设计中使用。IE6不支持,添加{*zoom:1;}
  • overflow:hidden; 将超出标签范围的内容剪掉
    • 清除浮动的方式,在第一个盒子中添加overflow:hidden
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值