盒子模型语法

盒子模型语法

边框

border-color

border-width

border-style

border-width

• thin
• medium
• thick
• 像素值(px)

border-top-width：5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

border-style

• none
• hidden
• dotted
• dashed(虚线)
• solid(实线)
• double(双实线)

border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;

同时设置边框的颜色、粗细和样式

.border:1px solid #3a6587;
border:1px dashed red;

外边距

margin

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

margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
/*同时设置四个方向的边距*/
margin:3px 3px 3px 3px;
margin:3px 5px;
margin:8px

网页居中对齐

margin:0px auto;

网页居中对齐必要条件

• 块元素
• 固定宽度

内边距

padding

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

用法和margin一样
*{
	*代表所有标签
}

margin和padding默认有值，使用可以清楚

盒子模型总尺寸=border+padding+margin+内容宽度

box-sizing: content-box | border-box | inherit;

• content-box 默认值，盒子总尺度
• border-box 盒子的宽度或高度等于元素内容的宽度或高度
• inherit 元素继承父元素的盒子模型模式

圆角边框

border-radius:20px 10px 50px 30px;

左上开始，四个属性按顺时针排列

没有时找对角

圆形

利用border-radius属性制作圆形的两个要点

• 元素的宽度和高度必须相同
• 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

半圆形

利用border-radius属性制作半圆形的两个要点

• 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

  /*上半圆*/
  div:nth-of-type(2){
  	width:100px;
  	height:50px;
  	border-radius:50px 50px 0 0;
  }
  /*下半圆*/
  div:nth-of-type(3){
  	width:100px;
  	height:50px;
  	border-radius:0px 0px 50px 50px;
  }
  

• 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

  /*右半圆*/
  div:nth-of-type(2){
  	width:100px;
  	height:50px;
  	border-radius:0 50px 50px 0;
  }
  /*左半圆*/
  div:nth-of-type(3){
  	width:100px;
  	height:50px;
  	border-radius:50px 0px 0 50px;
  }
  

扇形

利用border-radius属性制作扇形遵循

“三同,一不同“ 原则

• “三同” 是元素宽度、高度、圆角半径相同
• “一不同” 是圆角取值位置不同

/*扇形*/
div:nth-of-type(2){
	width:50px;
	height:50px;
	border-radius:0 50px 0 0;
}

盒子阴影

box-shadow:inset x-offset y-offset blur-radius color,.....;

• inset阴影类型 向外
• x-offset x轴位移，指定阴影水平位移量
• y-offset y轴位移，用来指定阴影垂直位移量
• blur-radius 阴影模糊半径阴影向外模糊的模糊范围
• color 阴影颜色，定义绘制阴影时所使用的颜色

网页布局及display

**标准文档流：**指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。是元素默认的排列方式

标准文档流组成

块级元素(block)

​ <h1>、<p>、<div>、列表

内联元素(inline)

​ <span>、<a>、<img>、<strong>

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

内联元素默认不支持宽高，需设置display

display:block;

none设置鼠标选中和不选中的样式设置

display的特性

• 块元素与行级元素的转变(block,inline)
• 控制块元素排到一行(inline-block)
• 控制元素的显示和隐藏(none)

浮动属性

float属性

属性值	说明
	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

float:left;
float:right;

inline-block和float的区别

display:inline-block

• 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
• 位置方向不可控制，会解析空格
• IE 6、IE 7上不支持

float

• 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
• float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清楚浮动的样式

清除浮动

clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

img{
	clear:both;	
}

解决父级边框塌陷的问题

• 浮动元素后面加空div

  <div class="clrar"></div>
  .class{
      clear:both;
  }
  

  简单，空div会造成HTML代码冗余

• 设置父元素的高度

  #father{
  	height:400px;
  }
  

  简单，元素固定高会降低扩展性

• 父级添加overflow属性

  #father{
  	overflow:hidden;
  }
  

  简单，下拉列表框的场景不能用

• 父级添加伪类after

  <div class="clrar"></div>
  .class:after{
      content:''; /*在clear类后面添加内容为空*/
      display:block;/*把添加的内容转化为快元素*/
      clear:both;/*清除这个元素两边的浮动*/
  }
  

  写法比上面稍微复杂一点，但是没有副作用，推荐使用

overflow属性

#content{
	overflow:visible;
}

position属性

• static：默认值，没有定位
• relative：相对定位
  • 相对自身原来位置进行偏移
  • 偏移设置：top、left、right、bottom
• absolute：绝对定位
• fixed：固定定位

相对定位

relative属性值

#first{
	position:relative;
	top:-20px;
	left:20px;
}

相对定位元素的特点

1. 设置相对定位的盒子会相对它原来的位置，通过制定偏移 ，达到新的位置
2. 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
3. 设置相对定位的盒子原来的位置会被保留下来
4. 层级比浮动定位高

绝对定位

absolute属性值

• 偏移设置：left、right、top、bottom
• 依据浏览器右上角来进行定位的

绝对定位的特性

• 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移
• 如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位，超过一屏会随滚动条移动
• 绝对定位的元素从标准文档流中脱离，这意味着他们对其他元素的定位不会造成影响
  • 元素位置发生偏移后，他原来的位置不会被保留下来

设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

固定定位

fixed属性值

• 偏移设置：left、right、top、bottom

div:nth-of-type(1){
    position:fixed;
    right:0;
    bottom:0;
}

类似于绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口；

不会随滚动条的移动而移动；

Z-index属性

调整元素定位时重叠层的上下位置

• z-index属性值：整数，默认值为0
• 设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系
• z-index值大的层位于其值小的层上方

.tipText{
	z-index: 1;
}

CSS设置元素透明度

属性	说明	举例
opacity：x	x值为0~1，值越小越透明	opacity：0.4
filter:alpha(opacity=x)	x值为0~100,值越小越透明	filter:alpha(opacity=40);

网页中的元素含有两个对叠层级

• 未设置绝对定位时所处的环境，z-index是0
• 设置绝对定位时所处的对叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下对叠顺序，只需调整绝对定位层的z-index即可