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 | dashed
border-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)