前端学习--CSS

Posted 2020-07-31

• 盒模型
• 基本格式化-包含块
• float的使用，以及float与position的差异
• 详解position
• 实现元素居中

　　

　　盒模型（Box model）

html文档中的每个元素都被描述成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，模型称为盒模型。盒模型有四个边界来描述：margin(外边距)，border(表框)，padding(内边距)，content(内容区域)，如图：

 

• 元素所占水平位置大小（W3C 与 IE6及6以下的区别）

 

　　W3C 的规范：元素的宽度=margin-left+border-left+padding-left+content（内容宽度）+padding-right+border-right+margin-right

　　IE6及IE6以下规范：元素的宽度=margin-left+content（包括border-left+padding-left+content（内容宽度）+padding-right+border-right）+margin-right=margin-left+content+margin-right 

 

• CSS3 box-sizing

　　　　box-sizing有三个值：content-box |border-box|inherit

• • inherit:字如其名，就是会继承父元素的box-sizing的属性值就好
  • content-box：高度宽度分别应用到元素的内容框上，例：

 .demo{
            box-sizing: content-box;
            margin: 20px;
            padding: 15px;
            width: 100px;
        }

　　　　　

　　　　这里的width：100px=content的宽度；其实表达的意思和W3C是一致的。当然有一只也有不一致，如下：

• • border-box：元素设定的宽度和高度决定了元素的边框盒

    .demo{
                box-sizing: border-box;
                margin: 20px;
                padding: 15px;
                width: 100px;
            }
    

    

    这里的100px=border-left+padding-left+content+padding-right+border-right

　　

 

 

　　基本格式化-包含块

　　　浏览器在显示页面时，元素框的定位和尺寸的计算，都是取决于一个矩形的边界，这个矩形，被称作包含块（containing block）。元素生成的框会扮演他后代元素包含块的角色。每个元素都有属于他的包含块。

　　跟元素的包含块称为初始包含块

• • 在HTML中，根元素是html（有的会用使用body元素）
  • 初始包含块的direction属性与根元素相同。
  • 初始包含块的宽度可以由根元素width属性指定。如果该属性是“auto”，用户端提供原始宽度（即浏览器窗口宽度）。
  • 同样，初始包含块的高度可以由根元素height属性指定。如果属性是“auto”，包含块的高度将调整以适应文档内容（高度有内容决定）

 　　其他元素：

　　如果该元素的position为relative或static，他的包含块有最近的块级、单元格或是行内块祖先元素的内容框。（一般情况是父元素的内容框）

• • 如果元素的position为fixed，包含块有浏览器窗口创建，就是浏览器窗口
  • 如果position为absolute，包含块由最近的position属性为非static的祖先创建。（一般情况下是relative）
  • 如果该祖先元素是块元素，那么包含块的区域应该是该祖先元素的内边距边界
  • 如果祖先是行内元素面，包含块取决于祖先元素的direction属性
  • 如果不存在这样的祖先元素，则元素的包含块为初始包含块。

 

 

　　float的使用，以及float与position的差异

　　float浮动，出现的意义其实是用来让文字环绕图片。在平常的使用中，也只是在布局的过程。添加浮动（float:left /right；不浮动则是：float：none）会让元素脱离文档流，然后浮动在容器左边或是右边。

 

 <div class="box1">框1</div>
    <div class="box3">这是一段文字这是一段有情怀的文字这是一段有故事的文字
        这是一段文字这是一段有情怀的文字这是一段有故事的文字
        这是一段文字这是一段有情怀的文字这是一段有故事的文字</div>

.box{
        margin: 0 auto;  border: 2px solid #ccc;  width:500px;  height: 100px;
    }
.box1{
        width: 100px;  height: 50px;  background-color: #ffaa00 ;  float:left;
     }

　　

　　　 既然有高度塌陷，就有弥补的办法--清除浮动

• • 直接 <div style="clear: both"></div>当作最后一个子标签放在父标签中，兼容性强，只是有点浪费的感觉

  • .fix{overflow: hidden;zoom: 1;}比较简洁兼容性也强，可选。

  • .fix:after{
               display:block;
               content:‘.‘;
               clear:both;
               line-height:0;
               visibility:hidden;}
    

    　

　　　float与position的区别:

• float是相对定位的，当使用百分比来描述div的尺寸时，整个页面会随浏览器的大小和分辨率的变化而变化
• position则需要精确的像素单位px确定位置，不能随浏览器大小改变而改变页面，会自动出现滚动条。

　　position

 　　　任何元素都可以定位，不过绝对定位元素会生成一个块级框，而无论什么元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

　　　属性值：relative | absolute | fixed | static | inherit

<div id="parent">
     <div id="box1">box1</div>
     <div id="box2">box2</div>
</div>

　　

• relative：

　　　　　　上面box1和box2是同级关系，如果设定box1是relative属性，代码如下：

#box1{
    position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;
}

　　　　　　这样理解好了，如果不设置relative属性，box1的位置按照正常文档流，但是当他设置了position为relative后，将根据top，right，left，bottom的值进行位置的移动。不过这一切的移动都是基于对象的margin的左上侧。

• absolute：生成绝对定位元素，相对于static定位以外的第一个元素进行定位。
• • 　box1的父元素（就是parent，只要是父级对象）也设置了，position属性，且position属性为        absolute或是relative时，box1就按照这个父级元素进行句对定位，这里是从父元素padding开始的地方（padding左上角）进行定位。这样box1就不在原来的文档流中，就box2就获得box1的位置。
  • 如果没有一个有position属性的父对象，就以body为定位对象，就是按照浏览器窗口进行定位。
  • fixed：生成决对定位元素，相对浏览器窗口进行定位
    • fixed就是特殊的absolute，即fixed以body为定位对象，按照浏览器的窗口进行定位。
  • static：默认值。没有定位，元素在正常流中。
  • inherit：从父元素继承position属性的值

　　实现元素居中

 　　居中，当然有水平居中和垂直居中

　　水平居中

• 行内元素

　　　　　常用的行内元素a/img/unput/span等，标签内的HTML文本也属于此类。水平居中通过给父元素设置text-align:center就行。

• 块级元素
• 有宽度的块级元素：“margin-left/right ”的值为“auto”就能实现居中。
• 不定宽度块级元素
• 改变块级元素的display为inline或是inline-block，然后使用 text-align：center实现居
• 给父元素设置float，position:relative和left：50%，子元素设置 position:relative和left:-50%实现水平居中　　　　　　

　　　　垂直居中

• 单行文本元素：直接通过父元素的height和line-height高度一致来实现
• 父元素多行文本：设置display：table-cell，verticalalign：middle

 

　　　总结

　　　　很多东西是从自己的认识上来写的，还有看到其他博客后的的理解。写的时候才知道太多多东西还有待提高，以后继续努力才是。