[四]HTML+CSS基础(学习笔记之盒模型)

CSS盒模型

1.盒模型介绍：

• CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
• 为什么要想象成盒子呢？

• 因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。

• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
• 一个盒子我们会分成几个部分：

• 内容区(content)
• 内边距(padding)
• 边框(border)
• 外边距(margin)

---

盒子的大小由内容区，内边距，边框共同决定

盒子.png

上图中实线之内是盒子；实线里面的虚线是盒子里面放置的东西；实线外面的虚线是此盒子与其他盒子的距离

2.盒模型边框：

为元素设置边框，必须指定三个样式

• border-width边框宽度 border-width:10px 加上边框宽度后，盒子大小变化。

• 四个边可以分别指定：border-width:10px 20px 30px 40px四个值分别代表上，右，下，左。顺序是顺时针方向
• border-width:10px 20px 30px：此时，10px代表上面，20px代表左右,下边是30px
• border-width:10px 20px：此时，上下为10px,左右为20px
• border-width:10px：此时，四个边都是10px
• 除了border-width,CSS还提供了四个border-xxx-width，xxx的值可能是top,left,right,bottom;专门用来设置指定边的宽度

• border-color边框颜色border-color:green，也可以像边框宽度那样设置

• border-color:green red blue orange
• border-color:green red blue
• border-xxx-color

• border-style边框样式border-style:solid，也可以像边框宽度那样设置

• 可选值：
  – none （没有边框）
  – dotted （点线）
  – dashed （虚线）
  – solid （实线）
  – double （双线）
  – groove （槽线）
  – ridge （脊线）
  – inset （凹边）
  – outset （凸边）

---

上面的三种属性可以合并了写，即简写样式

/*没有任何的顺序要求，不能分别指定，一指定就是四个边*/

/*border-xxx可以单独设置边*/

3.盒模型内边距：(padding)

指的是盒子的内容与盒子边框之间的距离。内边距会影响盒子的大小，元素的背景会延伸

• 一共有四个方向的内边距，可以通过：

• padding-top
• padding-right
• padding-bottom
• padding-left

• padding:10px 20px 30px; 分别指定上、左右、下四个方向的内边距
• padding:10px 20px; 分别指定上下、左右四个方向的内边距
• padding:10px; 同时指定上左右下四个方向的内边距
• 同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距

3.盒模型外边距：(margin)

是指当前盒子与其他盒子之间的距离。其不会影响盒子的大小，但是会影响盒子的位置。也可以指定为负值

• 用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。

• 由于页面中的元素都是靠左靠上摆放的。所以当设置上和左外边距的时候，会导致盒子自身的位置发生改变。而如果设置下和右外边距会改变其他盒子的位置

• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等(auto一般只给水平方向的margin，垂直方向上设置为auto，其实就是表示0)，所以这行代码margin:0 auto可以使元素居中。如果只指定左或者右的margin为auto,则会将外边距设置为最大值
• 和padding一样，可以同时设置四个值，三个值，两个值，一个值等

垂直外边距的重叠:在网页中垂直方向的相邻外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

上述代码结果图：两个div之间相距是100px,并没有变成200px

result.png

上述代码结果图：父子元素同时下移100px;解决方法是把上述代码中的注释部分释放开。也可以添加内边距来达到相同效果，为了不影响父元素的大小，可以改变父元素本来的height

result2.png

浏览器的默认样式，下图是没有经过任何样式添加的图，从图中可以发现，内容不是紧贴着上边和左边的，这是浏览器为了页面没有样式时，也有一个好的显示效果，设置的默认值。浏览器的默认样式在正常情况下是不需要显示的，所以在编写样式的时候会添加*{margin:0;padding:0},清楚浏览器默认样式

浏览器默认样式.png

内联元素盒模型： 例如

• 内联元素不能设置width和height
• 内联元素可以设置水平方向的内边距，可以影响到布局
• 内联元素可以设置垂直方向的内边距，但是不会影响页面的布局
• 内联元素可以设置边框，但是垂直方向不影响页面布局，水平方向会影响
• 内联元素可以支持水平方向的外边距，且水平方向的外边距不会重叠，会求和(两个测试)
• 内联元素不支持垂直方向的外边距

4.CSS定位属性

1.display:我们不能为行内元素设置width、height、margin-top和margin-bottom。我们可以通过修改display来修改元素的性质。

• 可选值：
  • block ：设置元素为块元素 ，此时独占一行
  • inline ：设置元素为行内元素
  • inline-block ：设置元素为行内块元素 ，既有行内元素的特点，又有块元素的特点，即可以设置宽高，又不会独占一行
  • none ：隐藏元素（元素将在页面中完全消失），并且不会在页面中占有位置

2.visibility属性主要用于元素是否可见。 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。

3.overflow: 可以通过其来控制下图出现的内容溢出的情况。

• 可选值：
  • visible ：默认值 ，元素会在父元素框外显示
  • scroll ：添加滚动条 ，该属性无论内容是否溢出，都会添加水平和垂直方向的滚动条
  • auto ：根据需要添加滚动条 ，如果垂直方向需要就添加垂直方向的滚动条。。
  • hidden ：隐藏超出盒子的内容

当相关标签里面的内容超出了样式的宽度和高度时，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。 如下图：绿色块表示盒子，红色表示内容

溢出.png

4.文档流：处在网页的最底层，它表示的是一个页面的位置，我们创建的元素默认都处在文档流中。

• 一个页面就是一个文档
• 元素在文档流中的特点：

• 块元素：
  • 1.块元素在文档流里面独占一行，块元素会自上向下排列
  • 2.块元素在文档流的默认宽度是父元素的100%
  • 3.块元素在文档流的默认高度默认被内容撑开
• 内联元素：
  • 1.内联元素在文档流中只占自身大小，会默认的从左向右排列，如果一行不足以排列素有的内联元素，则会换到下一行，并且也是自左向右
  • 2.内敛元素的宽高都是被内容撑开

当元素的宽度和高度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，一适应内边距

5.浮动：所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。 如果想要块元素在页面中水平排列，则需要浮动，从而脱离文档流。
浮动使用float属性。

• 可选值：
  • none ：不浮动 ，默认在文档流中排列
  • left ：元素会立即脱离文档流，向左浮动
  • right ：元素会立即脱离文档流，向右浮动

原图（没有浮动，即float:none）.png

• 当为一个元素设置float后(非none)，元素会立即脱离文档流，元素脱离文档流之后，他下边的元素会立即向上移动。元素浮动后，会尽量向叶面的左上或是右上浮动，直到遇到父元素的边框或者其他浮动元素

给三个块元素同时设置向左浮动的效果.png

• 如果浮动元素上面是一个没有浮动的块元素，则浮动元素不会超过块元素(第一个块元素（红色）没有浮动，第二个块元素（黄色）设置右浮动)

黄色块不会和没有浮动的红色块同行.png

• 如果一行容不下所有的浮动元素，则会自动换行

• 浮动的元素不会超过他的兄弟元素，最多一边齐

/*绿盒子不会超过黄盒子*/



    
    
    


    

    

    

result.png

• 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，通过浮动可以设置文字环绕图片的效果

    
    
    


    

    
这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。
　　沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。
　　路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
　　曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
　　月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
　　荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。树色一例是阴阴的，乍看像一团烟雾；但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有。
　　忽然想起采莲的事情来了。采莲是江南的旧俗，似乎很早就有，而六朝时为盛；从诗歌里可以约略知道。采莲的是少年的女子，她们是荡着小船，唱着艳歌去的。采莲人不用说很多，还有看采莲的人。那是一个热闹的季节，也是一个风流的季节。梁元帝《采莲赋》里说得好：
　　于是妖童媛女，荡舟心许；鷁首徐回，兼传羽杯；欋将移而藻挂，船欲动而萍开。尔其纤腰束素，迁延顾步；夏始春余，叶嫩花初，恐沾裳而浅笑，畏倾船而敛裾。
　　可见当时嬉游的光景了。这真是有趣的事，可惜我们现在早已无福消受了。
　　于是又记起《西洲曲》里的句子：
　　采莲南塘秋，莲花过人头；低头弄莲子，莲子清如水。今晚若有采莲人，这儿的莲花也算得“过人头”了；只不见一些流水的影子，是不行的。这令我到底惦着江南了。——这样想着，猛一抬头，不觉已是自己的门前；轻轻地推门进去，什么声息也没有，妻已睡熟好久了。

浮动元素不会盖住文字.png

• 块元素脱离文档流之后，高度宽度都会被内容撑开即由子元素决定

• 内联元素开启浮动后，即脱离文档流，此时会变成块元素，如果设置宽高，就会生效