css前端基础（3）三大特性

css具有层叠 优先级 继承 三个特性

css 层叠行是指多种css样式的叠加
例如

//red会覆盖掉cyan
div{
	color:cyan;
	font-size:20px;
}
div{
	color:red;
}
<div></div>

继承性
css中某些样式可以子承父业
text-，font-，line-这些开头的都可以继承，以及color属性

//p元素中的值也会改变
div{
	color:pink;
	font-size:20px;
}
<div>
	<p>111111</p>
</div>

css优先级
css有个权重公式

标签
div
类
.hello{
}
#nihao{

}

<div class="hello" id="nihao"></div>

css布局有
盒子模型，浮动，定位三种模型
盒子模型如下图所示

边框属性：
border：border-width || border-style || border-color

边框属性-设置边框样式
边框样式用于定义页面中边框风格
常用值

一般简写

table表格知识

    table{
      width: 700px;
      height: 300px;
      border:2px solid red;
    }
    td{
      border:2px solid red;
    }

<!--cellpadding 单元边界与单元内容之间的间距-->
<!--cellspacing 单元格之间的空间-->
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
      <td>555</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
      <td>555</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
      <td>555</td>
    </tr>
  </table>

只添加cellspacing 和cellpadding能够去除边框间的空隙
不加cellspacing cellpadding 如图所示。

添加cellspacing cellpadding如图所示

可以发现中间部分两个边框重叠，导致厚度加重，边边处仍有间隙。
此时可以添加

border-collapse: collapse; //合并相邻边框

    table{
      width: 700px;
      height: 300px;
      border:2px solid red;
      border-collapse: collapse; //合并相邻边框
      /*text-align: center;  字体居中*/ 
    }
    td{
      border:2px solid red;
    }

<!--cellpadding 单元边界与单元内容之间的间距-->
<!--cellspacing 单元格之间的空间-->
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
      <td>555</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
      <td>555</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
      <td>333</td>
      <td>444</td>
      <td>555</td>
    </tr>
  </table>

效果如图

关于border-radius

div{
// 左上角 和右下角 是10px  右上角   左下角  40px
	border-radius:10px 40px;
}
div {
	border-radius:50%  //100px 50% 取宽度和高度的一半，会变成圆形
}
div{
	border-radius:10px 40px 80px 100px //左上角10 右上角40 右下角 80 右下角100
}
div{
//胶囊
	border-radius:100px;
	height:100px;
}
<div></div>

关于内边距 padding

padding:10px 30px; 上下10  左右30
padding:10px 30px 50px 上10 左右30 下50
padding:10px 20px 30px 40px //上  右 下 左

在盒子模型里padding会撑开盒子导致内外边距需要重新计算，具体避免方法就是
使用box-sizing:border-box

div {
	width:200px;
	height:200px;
	background-color:purple;
	padding:10px
	box-sizing:border-box; //padding border 不撑开盒子
}
<div></div>

box-shadow:水平位置 垂直位置 模糊距离 模糊 阴影

举例

  <style>
    div{
      width: 300px;
      height: 300px;
      background: #000 url("image/bird.jpg") no-repeat center center;
      border-radius: 50%;
      color: rgba(255,255,255,0.7);
      box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.4) inset,
      5px 4px 10px 5px rgba(240,215,225,0.3);
    }
  </style>

  <div>
    鸟图
  </div>

浮动
浮动就是设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
浮动的目的就是让块状元素在一行显示

举例
块状元素的特点是另起一行，如果想让他们排列在一行快速的方法就是

  display: inline-block;//转换为行内块元素

  <style>
    div:nth-child(1){
      width: 200px;
      height: 200px;
      background-color: cornflowerblue;
      display: inline-block;
    }
    div:nth-child(2){
      width: 200px;
      height: 200px;
      background-color: chartreuse;
      display: inline-block;
    }
    div:nth-child(3){
      width: 200px;
      height: 200px;
      background-color: darkslategray;
      display: inline-block;
    }
  </style>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

中间会有边距
效果如图

而解决掉这个的最好办法就是使用浮动

  <style>
    div{
      width: 200px;
      height: 200px;
      float: left;
    }
    div:nth-child(1){
      background-color: cornflowerblue;
    }
    div:nth-child(2){
      background-color: chartreuse;
    }
    div:nth-child(3){
      background-color: darkslategray;
    }
  </style>

  <div>
  </div>

  <div>
  </div>

  <div>
  </div>

浮动，如果想让两个块状元素水平对齐由标准流改为浮动流可以使用

float:left

即可
如果第一个块状元素未使用浮动流，那么其还是标准流会把第二个元素挤在底下那一行，位置并不会发生改变。

行内元素添加浮动后也会具有行内块元素的特点。