css基础
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css基础相关的知识，希望对你有一定的参考价值。
一：盒模型
盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。
CSS盒子模型：W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在）
w3schools上对于盒子模型的图示如下
CSS盒子模型的属性：
内容属性：宽=width 高=height
内填充属性（内容与边框之间的距离）：padding
外边距属性：margin（使用该属性的时候注意浏览器的兼容性）
内填充与边界的规则：
如果有四个参数：表示上右下左,也可以单单指定某个方向
如果只有一个参数：表示上右下左
如果有两个参数： 第一个参数表示上下 第二个参数表示左右
如果三个参数：表示上 左右 下
边框属性：border
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #bigBox { 8 width: 300px; 9 height: 300px; 10 background:pink; 11 padding: 20px 0px 0px 20px; 12 margin: 20px; 13 } 14 15 #smallBox { 16 width: 150px; 17 height: 150px; 18 background: #6F9; 19 padding-top: 20px; 20 border:5px solid green; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="bigBox"> 26 大盒子 27 <div id="smallBox"> 28 小盒子 29 </div> 30 </div> 31 </body> 32 </html>
由上面代码看出，当我们在css中设计一个块级元素的width和height属性时，其中的width 和height仅仅是对content部分设置的，即定义上图中padding下虚线方框内区域的长和宽。而不是内容，内边距，边框的总和
对宽度为自动状态的静态（static）定位元素（即无定位），和相对定位（relatively positioned）元素来说，计算宽度的方法是，将他们包含块的宽度减去此元素的横向的所有外边距，内边距，边框，滚动条。也就是说，从包含块的宽度中除去元素的横向外边距，内边距，边框，滚动条（如果存在的话）的宽度，所剩的值就是了。
二：了解基本格式化，包含块。
包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
包含块简单说就是定位参考框，或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。
在css中，每一个元素都会生成一个框(或者叫盒子),这些框或者盒子为他们的子元素创建了一个包含块。但是，并不是一个元素的包含块一定是他的父元素。如以下情况，区分包含块的范围
根元素：
默认情况下，
非根元素分为两种情况：
1、对于没有设置position:absolute的非根元素如position:relative position:static
这种情况下包含块设置为最近的块级元素内容区的边缘，注意是内容区的边缘，而不是margin和padding边缘。
2、使用了position:absolute绝对定位的元素，这种情况下包含块设置在最近的postion不是static的祖先元素(这里的祖先元素可以是块级元素，也可是内联元素)
a、如果祖先元素是块级元素，包含块设为该块级元素的padding边沿
b、如果祖先元素是内联元素则包含块设为该内联元素的内容边沿
三：实现元素居中
1.使用自动外边距实现居中
CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：
1 div#container { 2 margin-left: auto; 3 margin-right: auto; 4 width: 168px; 5 }
2.使用text-align实现居中
另一种实现元素居中的方法是使用text-align属性，将该属性值设置为center并应用到父元素上即可。
div{ text-align:center; }
3.组合使用自动外边距和文本对齐
因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持：
1 body { 2 text-align: center; 3 } 4 #container { 5 margin-left: auto; 6 margin-right: auto; 7 border: 1px solid red; 8 width: 168px; 9 text-align: left 10 }
4.负外边距解决方案
负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。
下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。
然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。
#container { background: #ffc url(mid.jpg) repeat-y center; position: absolute; left: 50%; width: 760px; margin-left: -380px; }
实现元素垂直居中：
1.table-cell轻松设置文本图片水平垂直居中
让一个元素垂直居中的思路：把这个元素的容器设置为table-cell，也就是具有表格单元格的特性，再使用vertical-align(这个属性对block元素不起作用，但对table-cell元素是有效的)设置元素垂直居中，即可达到我们想要的效果。
1 <div class="img"> 2 <img src="../images/a-1.jpg" alt="" /> 3 </div> 4 样式规则 5 .img{ 6 display:table-cell; 7 vertical-align:middle; 8 width:400px; height:500px; 9 text-align:center; 10 border:#CCC 1px solid; 11 } 12 /*IE7不支持该方法*/
2.利用相对定位使元素垂直居中
要求元素有固定的高度，设置元素的top:50%,这样元素的上边边界线和该元素的父级元素的垂直方向的中线重合，设置margin-top,值为负的元素高度的一半，让元素向上移动半个高度的位置，就可以使元素的垂直方向的中线与父级元素的中线重合，即实现了元素的垂直居中。
3.使用line-height让单行文字垂直居中
这种方式是我们大家经常用到的，让标题，按钮等的文字垂直居中，IE6/7/8/9/10，FF,Chrome,Safari都支持
1 box_1{ 2 width:300px; 3 height:55px; 4 line-height:55px; 5 text-align:center; 6 border:#ccc 1px solid; 7 }
4.使用绝对定位让元素水平垂直居中
1 .box_2{ 2 width:300px; 3 height:200px; 4 border:#CCC 1px solid; 5 position:relative; 6 top:0; 7 left:0; 8 } 9 .box_2 span{ 10 display: block; 11 width:240px; 12 height:140px; 13 position:absolute; 14 top:0; 15 bottom:0; 16 left:0; 17 right:0; 18 margin:auto; 19 background-color:#ccc; 20 padding:5px; 21 } 22 /*IE7不支持,移动端的网页开发可以使用这种方式*/
以上是关于css基础的主要内容，如果未能解决你的问题，请参考以下文章