css课堂笔记（盒子模型，标准文档流，浮动，美化）

最新推荐文章于 2023-05-03 11:12:22 发布

weixin_30823683

最新推荐文章于 2023-05-03 11:12:22 发布

阅读量133

点赞数

原文链接：http://www.cnblogs.com/kasl007/p/7081677.html

版权

1.标准文档流

1.1 当浏览器解析网页的时候，遵循从上向下，从左向右的顺序来进行
解析
1.2 块级元素和行内元素的特性 -->如果元素一旦离开了标准文档流，那么这些特性将不会存在
1.3 空白折叠 
1.4 高矮不齐，底边对其 
1.5 单词一旦结束并且到达了边界将自动换行
1.6 如果单词始终没有空格来表示单词结束，那么单词不会换行

Tip：让元素脱离标准文档流的方式：
    1. 浮动float
    2. 定位position
标准文本流 : 主要针对的是网页中的文字(a标签和img也会被遵从文本流的规则来解析)
标准文档流 : 主要针对的是标签

2.盒子模型

网页中的任何一个标签都相当于是一个盒子模型，而所有盒子模型
都存在五个必要属性：
    width  height  padding border margin 

有一个div  ，width 300px padding:20px border:1px
那么此时这个div标签在网页中实际所占的宽度：
    300px + 40px + 2px = 实际所占的宽度
    
width height 宽度和高度 

padding: 内边距，内容距离边框之间的距离。
padding:10px;  上下左右四个方向的padding全部都是10px

padding-top:
padding-bottom:
padding-left:
padding-right:

准则：在使用css的时候，能够使用简写就使用简写
padding:10px 20px; 第一个值表示上下的padding 第二个值表示左右的padding
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px;  上  右 下 左 

padding:上为20px 下为30px 左右为15px；
padding:20px 15px 30px;

padding:20px; 上下左右
padding-left:30px;  左 30px

border: 边框 
    
border: 1px solid #ccc;

1px 边框的宽度
solid 边框的线型
#ccc 边框的颜色  英文单词 八进制表示 十六进制表示

border-width:边框的宽度
border-style:边框的线型
border-color:边框的颜色


margin  外边距
margin:10px 20px 30px 40px;规则同padding.

margin-top:
margin-bottom:
margin-left:
margin-right:

在使用margin时需要注意的点：
    1.塌陷  
    margin塌陷存在于块级元素之间
    如果元素变成了行内块元素或者行内元素则不会塌陷
    如果元素脱离了标准文档流则也不会塌陷
    
    2. 通过margin让盒子居中。
        让盒子左右居中margin:0 auto;
        
    使用margin:0 auto;让盒子居中需要注意的点:
        盒子必须要有明确的width
        盒子必须处于标准文档流中
        margin:0 auto ;是让盒子居中，而不是让盒子里面的
            文字居中。如果让文字居中用text-align:center;
            text-align:center / left /right
            
        Tip:如果想要移动子元素的位置，非必要情况下推荐使用父元素
        的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有
        border

3.浮动

float: left / right ;

浮动的特点：

1. 脱离标准文档流 (脱标)，元素一旦脱离标准文档流，后面的元素
   会占据浮动元素原本的位置，元素一旦浮动脱标，那么就不必
   遵守文档流中的块级元素和行内元素的特性。
    
2. 元素浮动，会脱离文档流，但是不会脱离文本流。所以会产生字围效果。

3. 相互贴靠

浮动带来的影响：

1. 能够让浮动之后的元素布局产生混乱
2. 子元素浮动会对父元素产生影响

清除浮动带来的影响：

1. 给浮动的外层父元素添加高度 不推荐
2. overflow:hidden 溢出 hidden 隐藏
3. clear:both 清除浮动带来的影响
4. 隔墙法 ： 外墙法  内墙法(不仅仅可以清除浮动还可以给父元素以高度)

行高和字号

    line-height行高
    font-size:字体大小
    
    font-size:20px;
    
    文字垂直居中：行高=盒子的高度
    (盒子高度-总行高 ) /2  = padding-top
    盒子高度 - padding-top = 新的盒子的高度
    多行文字垂直居中

font 字体

font:14px/30px "KaiTi";
上面的代码等同于下面的三句代码：
font-size:14px; 字体大小
line-height:30px;  行高
font-family:"KaiTi"; 字体族科

font-family:"KaiTi", "", "", ""

超链接的美化 --- 伪类

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    a {
        font-size: 100px;
    }
    a:link {
        color: gray;/*link必须在前，可以不写*/
    }

    a:visited {
        color: green;/*visited必须在link后，可以不写*/
    }

    a:hover {
        color: pink;/*hover必须在visited后，可以不写*/
    }

    a:active {
        color: red;/*active必须在hover后，可以不写*/
    }
</style>
</head>
<body>
<a href="http://www.yandex.com">yandex</a>
</body>
</html>

转载于:https://www.cnblogs.com/kasl007/p/7081677.html