文档流定义,盒子模型相关知识

1.什么是文档流

文档流(normal flow)

         网页是一个多层的结构,设置样式样式,也是一层一层的设置,最终我们看到的最上面的一层

           文档流是网页最底层

          我们创建的元素默认情况下,都在文档流中

          元素分为两种状态:在文档流中,脱离文档流

             

      元素在文档流中的特点

        块元素

           1:会独占一行

           2:块元素的宽度默认是父元素的100%

           3:块元素的高度默认是被内容撑开的

        内联元素(行内元素)

           1:不会独占一行

           2:宽度高度默认都是被内容撑开的,不能自己定义宽高

        行内块元素

           1、可以设置宽高

           2、而且不会独占一行

      元素脱离文档流后,就不再区分块元素,行内元素,也就不具有元素在文档流中具有的特点

      脱离文档流的元素会更加类似行内块元素

2.盒子模型

把元素想象成盒子,矩形 px可为正可负

        盒子模型,框模型,盒模型(box model)

        内容区  content  --冰箱

        内边距  padding  --塑料

        边框    border   --箱子

        外边距  margin   --快递距离(无关,盒子无影响)

1:border-width  默认值一般是3px

使用border-width可以分别指定四个边框的宽度

可以跟多个值

   4个值  上  右  下  左

   3个值  上  左右  下

   2个值  上下   左右

   1个值   上下左右

除了border-width,CSS中还提供了四个border-xxx-width

  xxx的值可能是top right bottom left

专门用来设置指定边的宽度  

2:border-color  设置边框的颜色  默认值是黑色

和宽度一样,color也提供四个方向的样式,可以分别指定颜色

border-xxx-color

3:border-style   设置边框的样式

   可选值:

     none,默认值,没有边框

   solid 实线

      double 双线

      dashed [dæʃt] 虚线

     dotted ['dɔtid] 点状边框

 style也可以分别指定四个边的边框样式,规则和width一致,

   同时它也提供border-xxx-style四个样式,来分别设置四个边

 border

   - 边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色

   - 而且没有任何的顺序要求

   - border一指定就是同时指定四个边不能分别指定

border-top border-right border-bottom border-left

  可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值