CSS总结

引入样式方法：

• 内联：style属性
• Style标签
• 外部文件 css link
• @import url(./b.css)

横排样式布局

• 给子级元素设置float:left;
• 父级元素添加clearfix/overflowh:hidden/为父级添加高度;

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

元素脱离文档流的方式：

1. position:fixed 相对于屏幕固定 top:0 left:0
   一旦脱离文档流 那你的父元素的高度就不受你控制了 就不管你了 只管其他文档流元素

2. 子绝父相：子级元素position:absolute;父级元素position:relative;（绝对定位是相当于整个页面来的，父级元素给相对定位就相对于父级了）;

span空格

<span>和</span>之间有东西 如果有一个回车 就会产生空格
例如：<span class="rs">RS</span>（回车）
<span class="card">card</span>
展示效果：RS card 会产生空格
例如：<span class="rs">RS</span><span class="card">card</span>
展示效果：RScard 不会产生空格

css布局

左右布局

<style>
  .clearfix{content: '';display: block;clear: both;}
  .left,.right{width: 400px;height: 400px;background: red;}
  .left{float: left;}
  .right{float: right;}
</style>

<div class="clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

左中右布局

• 可以前两个元素左浮动，第三个元素右浮动；也可以都左浮动

<style>
  .clearfix{content: '';display: block;clear: both;}
  .left,.middle,.right{width: 400px;height: 400px;background: red;float: left;}
  .left,.middle{margin-right: 20px;}
</style>

<div class="clearfix">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

居中

水平居中

1. 内联元素/内联块水平居中

• 只需给父级元素设置一个text-align:center;这里需要注意的是如果给内联元素设置了display:inline-block也必须在线面紧接着写一个vertical-align:top;要不然下面会有几像素的间距。

<style>
  p{text-align: center;}
</style>

<p><span>aaaaa</span></p>

2. 块级元素水平居中

• 只需为其设置一个宽度后，使用margin: 0 auto;
• 块级元素里面的文字内容水平居中也是使用text-align:center;

<style>
div{
  width: 300px;height: 300px;background: red;margin: 0 auto;
}
</style>

<div>aaa</div>

垂直居中

1. 让元素的高度等于行高及height=line-height的值；

<style>
  div{
    width: 300px;
/*这两步是实现垂直居中的，上面可以不用看*/
    height: 300px;line-height: 300px;
/*下面可以不用看*/
    margin: 0 auto;background: red;text-align: center;
  }
</style>

<div>aaa</div>

2. 给上下一个相同的padding值

<style>
div{
background: red;text-align: center;
/*上面可以不用看*/
padding: 20px 0;
}
</style>

<div>aaa</div>

image

小技巧

• 只要是设置了绝对定位，就一定要给他的父级元素设置相对定位（子绝父相）；
• 用css布局时尽量不要写宽和高两个属性（因为块级元素的宽度和高度都是由内部的文档流元素决定的），一般情况下可以用padding来填充。
• 内联元素不能设置宽和高，margin只对左右起作用，padding都起作用。
• 若要使用:after和:before属性（1）.必须加一个content:’’;（2）.必须设置成块级元素。
• 只要加了inline-block就一定要加vertical-align:top。
• 元素只要是设置了position为fixed或者absolute就会变成块级元素。
• 阻止 margin 合并
  希望谁不要跟它的子元素的 margin 合并，就在它的::before /::after加一个 display:table;

.noCollapse::before{
    content: '';
    display: table;
}

::before 阻止任何东西把 margin （手）伸到外面去

.noCollapse::after{
    content: '';
    display: table;
}

::after 阻止任何东西把 margin （脚）伸到外面去