CSS盒模型

CSS盒模型

元素尺寸

设置元素尺寸

div{

background: silver;

width:200px;

height:200px;

}

解释：设置元素的固定尺寸。

限制元素尺寸

div{

background: silver;

min-width:100px;

min-height:100px;

max-width:300px;

max-height:300px;

}

解释：这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最小的值。auto自适应

div{

width:auto;

height:auto;

}

解释：auto是默认值，width在auto下是100%的值；height在auto下是自适应。

百分比方式

#a{

background:silver;

width:200px;

height:200px;

}

#b{

background:gray;

width:80%;

height:80%;

}

<div id="a"><div id="b">我是html5</div></div>

解释：百分比就是相对于父元素长度来衡定的。（即b的weight和hight都是a的80%）

元素内边距

CSS盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距

设置四个内边距

div{

background: silver;

width: 200px;

padding-top:10px;

padding-bottom:10px;

padding-left:10px;

padding-right:10px;

}

<div>我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，我是HTML5，</div>

简写形式，分别为上10px、右10px、下10px、10px

div{

padding:10px 10px 10px 10px;

}

简写形式，分别为上10px，左右50px，下200px

div{

padding:10px 50px 200px;

}

简写形式，分别是上下10px，左右20px

div{

padding:10px 20px;

}

简写形式：上下左右均10px

div{

padding:10px;

}

元素外边距

CSS盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距

div{

background: silver;

width: 200px;

padding-top:10px;

padding-bottom:10px;

padding-left:10px;

padding-right:10px;

margin-top: 50px;

margin-left: 50px;

}

 

设置四个内边距

div{

margin-top:10px;

margin-bottom:10px;

margin-left:10px;

margin-right:10px;

}

 

简写形式，分别为上10px、右10px、下10px、左10px

div{

margin:10px 10px 10px 10px;

}

简写形式，分别为上10px，左右50px，下200px

div{

margin:10px 50px 200px;

}

简写形式，分别是上下10px，左边20px

div{

margin:10px  20px;

}

简写形式：上下左右均10px

div{

margin:10px;

}

处理溢出

当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。溢出主要朝两个方向：右侧和底部。我们可以通过overflow系列样式来控制它

设置溢出为auto值

div{

overflow-x:auto;

}

解释：

overflow-x 设置水平方向的溢出

overflow-y设置垂直方向的溢出

overflow 简写属性

auto浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否则就不显示滚动条。

hidden如果有溢出的内容，直接剪掉。

scroll不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式不同。

visible默认值，不管是否溢出，都显示内容

元素可见性

visible默认值，元素在页面上可见。

hidden元素不可见，但会占据空间。

collapse元素不可见，隐藏表格的行与列，如果不是表格，则和hidden一样

div {

    background: silver;

    width: 200px;

    height: 200px;

    visibility: visible;

}

<div>我是HTML5</div>

 

Sdfsdfsdf

设置元素隐藏，但占位

div {

    background: silver;

    width: 200px;

    height: 200px;

    visibility: hidden;

}

<div>我是HTML5</div>

 

Sdfsdfsdf

隐藏表格的行或列,但不占位，Chrome和Opera不支持

table tr:first-child{

visibility:collapse;

}

<table border="1">

    <tr>

       <td>1</td>

       <td>2</td>

       <td>3</td>

    </tr>

    <tr>

       <td>4</td>

       <td>5</td>

       <td>6</td>

    </tr>

</table>

元素盒类型

CSS盒模型中的display属性，可以更改元素本身盒类型。那么元素有哪些盒类型呢？主要有：

主要有：1.块级元素（区块）；2行内元素（内联）；3行内-块级元素（内联块）；4.隐藏元素（不占空间）。

1. 块级元素所谓块级元素，就是能够设置元素尺寸、隔离其他元素功能的元素。

比如：<div>、<p>等文档元素。（有换行功能，把其他元素隔离开，相邻文本或内容不会依附他的右边，而会在其下方）

2.行内元素，所谓行内元素，不能够设置元素尺寸，它只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。比如：<span>、<b>等文本元素。

3.行内-块元素，所谓行内-块元素，可以设置元素尺寸，但无法隔离其他元素的元素。比如<img>。（相邻文本或内容可以依附其右边）

将行内元素转成块级元素

span{

background:silver;

width:200px;

height:200px;

display:block;

}

将块级元素转换成行内元素

div{

background:silver;

width:200px;

height:200px;

display:inline;

}

将块级元素转化成行内-块元素

div{

background:silver;

width:200px;

height:200px;

display:inline-block;

}

将块级元素和行内元素转化成行内-块元素

<div>我是块级元素，将要转成行内块元素</div><span>我是行内元素，将要转成行内块元素</span>

 

Sdfsd

div,span {

    background: silver;

    width: 200px;

    height: 200px;

    display: inline-block;

}

将元素隐藏且不占位

div{

display:none;

}

元素的浮动

CSS盒模型有一种叫浮动盒，就是通过float属性建立盒子的浮动方向

left浮动元素靠左

right浮动元素靠右

none禁用浮动

实现联排效果

效果对比

<div id="a">我是a</div>

<div id="b">我是b</div>

<div id="c">我是c</div>

#a{

background:gray;

}

#b{

background:maroon;

}

#c{

background:navy;

}

<div id="a">我是a</div>

<div id="b">我是b</div>

<div id="c">我是c</div>

 

#a{

background:gray;

float:left;

}

#b{

background:maroon;

float:left;

}

#c{

background:navy;

float:left;

}

实现元素右浮动

#c{

background:navy;

float:right;

}

取消元素的浮动

影响后面的元素不会浮动到本层，如果上层元素是float，本层元素还会浮动

#a {

    background: maroon;

    float: none;

}

#b {

    background: green;

    float: left;

}

#c{

background:navy;

float:left;

}

刚才的浮动有一个问题：当一个元素盒子被浮动后，下面的元素会自动堆叠处理，导致元素不可见或部分不可见。我们可以使用clear属性来处理。

两边均不可浮动

#a {

    background: maroon;

    float: left;

}

#b {

    background: green;

    clear: both;

}

#c{

background:navy;

float:left;

}

#d {

 

    background: orange;

    float: left;

}

解释：本层不受上层的影响

none允许两边均可浮动

left左边界不得浮动

right右边界不得浮动

both两边都不得浮动