盒模型和总结

盒模型：包含有外边距margin 和内边距padding 边框border和内容element

盒子的宽/高=margin*2+padding*2+border*2+element

也就是一个模型的总长度是所有的边距加盒子边框的粗度和元素本体的宽高

margin的方法：

margin-top margin-right margin-bottom margin-left

margin: top right bottom left

p {margin : 10%;}

h1 {margin: 0.25em 1em 0.5em;}	/* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* 等价于 1px 1px 1px 1px */

auto：水平（默认）书写模式下，margin-top/margin-bottom计算值为0，margin-left/margin-right取决于可用空间

也可以用百分比等来定义，auto属性会自定义的处在页面的中间部分

padding的方法：与margin的用法也一样

可以单条设置，也可以三个一起设置，4个参数对应4条边

3个参数，中间的对应左右两条边

两个参数，第一个对应上下，第二个对应左右

border：盒子的边，处在内边距和外边距的夹层中，他也可以设置粗细，盒子总体体积也会加上它的粗细度

写法可以单挑边的设置粗细，颜色和类型

如：border-left-style:solid;

border-right-color:blue:

berder-top-width:1px;

等，也可以一起设置：

border: 1px black solid;

位子随意，只要三个参数写到位就行

特殊的方法有

border-raduise:30%;

可以设置边框的圆角度，可以填单位px也可以填百分比，假如为50%时将会出现圆形

怎么用border-radius制作一个半圆，首先这个只分别按顺时针的顺序设置左上，右上，右下，左下四个角度的值，制作右半圆的过程：

 .n1{
     width: 50px;
     height: 100px;
     background-color: red;
     border-radius:0 50px 50px 0;
 }

设置一个宽50，高100的分别设置需要圆形的角的数值为它的半径的值；

同样我们设置边框粗细的时候也可以让它变为一个4种颜色的三角形，曾经百度的一道面试题就是怎样画出一个对话框底下的小三角，就是应用border知识来实现

flaot的使用，很简单使用关键字，然后参数为left、right关键是清除浮动产生的影响

我们一般可以用浮动来制作导航栏

关于浮动的两栏布局：

先设置一个浮动元素往右移动，然后设置一个块状元素会自动网上填充，然后让着个块状元素让出浮动元素的位子，就成了两栏布局

margin塌陷bug：垂直方向上的父子块两个margin-top是结合在一起的，取两个中最大的值

解决方法：1给父级顶端border加一条线

2：第二种方法触发bfc渲染机制，触发的4中基本方法：

a position absolute

b display line-block

c float left/right

d overflow : hidden

这两种方法可以解决margin塌陷的bug

通样处在相邻的上下两个块级元素，公用margin-top,下面的元素设置margin-top没用bug：

解决方案，将这两个放入同一个父级元素，并渲染父级元素，或者只将其中一个放如也行

那么我们来说说float如何处理溢出部分的问题，加入我们设置的父盒子的宽高装不下元素的所有部分，导致元素溢出，我们可以通过overfolw:hidden；溢出部分隐藏的方法来解决

浮动溢出

在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

方法一：
在html的child2后添加 <div class="clear"></div>，css为 .clear{clear:both;}
优点：简单，代码少，浏览器支持好　　
缺点：如果页面浮动布局多，则需要很多空标签方法二：
在parent中添加 overflow:auto;
优点：不存在结构和语义化问题，代码量极少　　
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等方法三:
在parent容器添加一个：after伪元素，并使用content："." 或者为" "在元素的后面生成了内容为一个点的块级元素，并使用一切方法使这个块级元素隐藏并清除浮动 clear:both.
.parent:after{
content: ".";/ 生成一个元素内容为"."，为" "时也好用/
display: block;/ 让元素为块级元素/
height: 0;/ 用以下两种方式让元素不渲染/
visibility: hidden;
clear: both;/ 清除浮动/
}
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）方法四:
让parent容器也浮动，只需给parent容器添加 float：left，也可闭合浮动。
优点：代码少
缺点：会导致整个页面大部分都处于浮动状态，容易出现问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css.css"type="text/css"/>
</head>
<body>
<div class="n1">
    <div class="nn2"></div>
    <div class="nn1"></div>
    <!--<div class="nn3"></div>-->
</div>
</body>
</html>

css、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

.nn1{
    float: left;
    width: 100px;
    height: 50px;
    background-color: green;
}
.nn2{

    width: 50px;
    height: 100px;
    background-color: #f40;
}
.n1{
   /* /!*第二种方法*!/
    overflow: hidden;*/
    border: 1px solid black;
    /*第四种方法,不过会引起大的问题不建议使用*/
    /*float: left;*/
    /*第三种方法伪元素,不过要记得先转换成块级元素*/
    content: "";
    display: block;
    clear: both;/*或者overflow-hidden也可以*/
    height: 0;
}
/*第一种方法
.nn3{
    clear: both;
    height: 0;
}
*/

 .n1{
     width: 50px;
     height: 100px;
     background-color: red;
     border-radius:0 50px 50px 0;
 }

猜你喜欢