我也很懒

    这个周末很蛋疼,宅了两天,出门见光眼睛都疼,所以 ,得出经验,周末还是要见见光,所以我现在发霉了,要出去晒晒,没时间写博客了,请见谅!!!!!

    就水一点哈!!!!

    Css

    CSS盒模型是可视化格式化基石,它是理解样式表如何工作的核心概念,盒模型可以用于元素定位和网页布局。

    元素盒不是CSS可视化格式模型中唯一的盒子。浏览器在浏览器窗口中格式化HTML每行文本时,会产生四个不可见的盒子:

    Em盒:在CSS中,EM盒是等于元素字体大小的一个正方形单元

    内容区:文本行中的每一个元素有一个内容区盒子,对于文本元素(其代码出现在源代码中),内容区的高度取决于元素的字体大小。对于匿名文本(文本不是包含在内嵌元素之间),字体大小是从父级元素继承的,对于图像(以及其他可替换元素),内容区是图像的高度和宽度所占区域

    内嵌盒:在一行文本中的每个字符和元素都会在运行时产生一个称为内嵌盒的盒子。这些内嵌盒被浏览器用作在后台计算文本流中的每一行的高度以及围绕元素的空间。内嵌盒的高度等于元素内容区的高度加上在内容区之上的以及其他的leading区域(leading的值等于元素的行高减去元素的字体大小)。对于图像以及可替换元素,内嵌盒是图像的像素高度加上img元素的border和margin高度。

  行盒:代表一行所需要的总高度。

 高度和宽度:使用with和height属性可以设置块级元素和内嵌可替换元素的大小,with和height不适合于内嵌文本元素(不可替换元素)

  border的边框样式:none(无边框) dotted(正方块虚线) dashed(长方块虚线) solid(实线) double(双线条) groove(线条加阴影) ridge(相对solid为细线条) inset(上左为实线,下右为虚线)  outset(与inset相反)

   正常文档流的布局:从上至下,从左至右是的格式布局

  元素浮动的几个基本行为:1》.当float不等于none引起元素浮动时,元素将被视作块级(block-level),等于设置display:block。2》.当浮动一个文本类型元素时,必须指定该元素的width属性,如果不设置宽度,元素内容就会折叠到最可能的最小宽度。3》.浮动元素停留到包含它的父级元素的内容域内,不会穿过padding区域。4》.浮动元素的margin是不会重合的。

   限制浮动元素的顶部顶部边缘高度的规则:1.浮动元素的顶部必需停留在它的父级元素的顶部内边缘之内。2.不被块级元素包含的浮动元素的顶部不能比前面的块级元素高。3.浮动元素的顶部不能比同在文档源中的前一个浮动元素高。4.如果浮动元素在一个元素的文本流的中部,那么它不会浮动到该元素的顶部,而是围绕的文本的行盒的顶部  

  定位

 容器块:1.一个元素盒的位置和大小有时是相对于一个称为元素的“容器块”的长方形盒子来计算的2.根元素(html)创建的容器块叫做“初始化容器块”。初始化容器块的长方形盒子填充了填充了浏览器窗口视口的大小。如果没有其他的容器块,css就使用初始化容器块。3.对于被设为静态或者相对定位的非根元素,容器块是他最近的块级元素,表格单元的内容区的边缘。5.对于绝对定位的非根元素,容器块是他最近的不是静态定位的祖先元素。话句话说,父级元素的position属性必须设置为relative,absolute或者fixed。有如下几种情况:如果祖先元素师块级元素,容器块扩充到该元素的padding边缘(也就是被border约束的区域)。对于如果祖先元素师内嵌元素,容器块为内容器的边缘。如果没有祖先元素,就使用初始化块。

转载于:https://my.oschina.net/u/1040993/blog/132009

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值