【不误正业】之前端CSS基础（二）
css离不开一些常用属性的书写，本章呢就从，链接伪类，行高，盒模型介绍，以及文档流和定位浮动的介绍。最近还是太忙了，已经好久没有去更行博客了，但凡有时间呢，JJ都会加以总结。对不务正业系列加以总结～
行高Lineheight
浏览器存在默认的字体大小16px，行高是基线与基线之间的距离。行高=文字高度+上下边距。单行文字行高和氟元素高度一致时，内容垂直居中显示。
行高单位
| 行高单位 | 文字大小 | 值 |
|---|---|---|
| 20px | 20px | 20px |
| 2em | 20px | 40px |
| 150% | 20px | 30px |
| 2 | 20px | 40px |
行高的继承性
| 行高单位 | 父文字大小 | 子元素文字大小 | 行高 |
|---|---|---|---|
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| 150% | 20px | 30px | 40px |
| 2 | 20px | 30px | 60px |
盒子模型
边框 border
1、边框的常用属性
border-top-style: solid | dotted | dashedborder-top-color边框颜色border-top-width边框粗细颜色
.eg1 {
width: 300px;
height: 390px;
background: #999;
border-top-style: solid; /*实线*/
border-top-color: red; /*边框颜色*/
border-top-width: 5px;
border-bottom-style: dashed;
border-bottom-color: green;
border-bottom-width: 10px;
}
2、border属性的连写
/*边框属性连写*/
border-top: red solid 5px;
/*四个边框值相同的写法*/
border: 12px solid red;
3、边框的合并 border-collapse: collapse;
table{
width: 300px;
height: 500px;
border: 1px solid red;
border-collapse: collapse;
}
td{
border: 1px solid red;
}
内边距
padding-left | right | top | bottom
1、padding 连写
padding: 10px; // 上下左右间距为20px
padding: 10px 20px; // 上下间距为10px，左右为20px
padding: 10px 20px 30px; // 上10px，左右20px 下30px
padding: 10px 20px 30px 40px; // 上10px 右20px 下30px 左40px
2、内边距会撑大盒子
盒子宽度 = 定义的宽度 + 边框的宽度 + 左右边距
3、继承的盒子一般不会被撑大
嵌套的盒子，如果字盒子没有定义宽度，给子盒子设置左右边距一般不会撑大盒子。
外边距
1、外边距连写
/*上下左右外边距是20px*/
margin: 20px;
/*上下20px 左右30px*/
margin: 20px 30px;
/*上20px 左右30px 下40px*/
margin: 20px 30px 40px;
/*上20px 右30px 下40px 左50px*/
margin: 20px 30px 40px 50px;
2、垂直方便外边距合并
两个盒子垂直，一个设置上外边距，一个设置下外边距，设置的值为较大值
3、嵌套的盒子外边距塌陷
- 给父盒子设置border
- 给父盒子overflow:hidden;
布局方式
文档流
元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父级元素的边框换行。
浮动布局
float: left | right
1、特点
- 元素脱标
- 浮动的盒子在一行显示
- 行内元素转换为快元素
2、清除浮动
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素位置放生错误
2.1 额外标签法（在最后一个浮动元素后添加标签）
<div class="main">
<div class="content">div>
<div class="sidebar">div>
<div style="clear:both;">div>
div>
2.2 给父集元素使用overflow:hidden；
- 如果有内容出了盒子，不能使用这个方法/
<style type="text/css">
.main{
background: #eee;
margin: 10px 0;
overflow: hidden;
}
style>
2.3 伪元素清除浮动
.clearfix:after{
content:".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
/*兼容ie浏览器*/
.clearfix{
zoom:1;
}
style>
<head>
<body>
<div class="header">div>
<div class="main clearfix">div>
<div class="left">div>
<div class="content">
<div class="content-top">div>
<div class="content-bot">div>
div>
<div class="right">div>
body>
CSS 的初始化
Overflow
| – | – |
|---|---|
| overflow:visible | 默认值。内容不会被修剪，会呈现在元素框之外 |
| overflow:hidden | 内容会被修剪，并且其余内容是不可见的 |
| overflow:scroll | 内容会被修剪, 但是浏览器会显示滚动条以便查看其余内容 |
| overflow:auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
定位
定位的方向：left | right | top | bottom
- postion: static; 静态定位
1、 绝对定位:postion:absolute;
1.1 特点
- 元素使用绝对定位之后不占据原来的位置(脱标)
- 元素使用绝对定位，位置是从浏览器出发。
- 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子的定位是从浏览器出发
- 给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）
2、 相对定位:position:relative
2.1 特点：
- 使用相对定位，位置从自身出发
- 还占据原来的位置
- 子绝父相（副元素相对定位，子元素绝对定位）
- 行内元素使用相对定位不能转行内块
3、 固定定位:position:fixed
3.1 特点：
- 固定定位之后，不占据原来的位置(脱标)
- 元素使用固定定位之后，位置从浏览器出发。
- 元素使用固定定位之后，会转化为行内块(不推荐，推荐使用display:inline- block)