2018-08-11-Python全栈开发day38-web前端css快速入门2

设置css的文本属性和边框属性

1.文本属性

　　1.1设置长和宽

　　　　

<style>
        div{
            height:500px;
            width: 50px;
            background: red;
        }
    </style>

　　1.2 横向居中

　　　　

text-align: center;

　　1.3 设置标签内字体高度

　　　　

line-height: 100px;

　　1.4首行缩进

　　

 text-indent: 150px;

　　1.5 字符间间距

　　

letter-spacing: 20px;

　　1.6 单词间间距

　　

 word-spacing: 20px;

2.边框属性

　　2.1 padding内边距

　　标签内字体和内边距的距离

　　2.2margin 

　　　　两个标签之间的举例

　　2.3 border　　

　　　　内边距和外边距之间的举例

3.边界塌陷

　　如果两个标签处于上下位置，当两个标签的margin一个是10px，一个是20px，则两个标签之间的距离为20px，以大的为准，但是左右的时候只是单纯的两个相加

4.E F父子之间的margin

　　如果E中没有任何东西，padding之类，那么可以认为这个E为空，则当F在找上边界的时候，会直接跳过E，找其他的边界、如果想要以E为标准，则给E加个东西

5.float属性

　　5.1文档流

　　　　在html中，标签经过渲染后默认显示方式是从左到右，从上到下

　　5.2 float

　　直接将a标签悬空，此时这个标签和普通标签不在一个层面，后面的标签会直接顶到a的位置，但是如果a标签中有文本内容，则不会顶上去。

　　5.2.1 清空float

　　　　<div style='claer:both'>左右两侧的flaot全部清空，但是不能清空上下的float，而且对于清空只能是改变自身的位置，以达到所谓清空的目的。并不改变其他标签的属性。

　　5.2.2 通过after清空浮动

　　

div:after{
            content:'';
            display:block;
            clear: both;
        }

　　5.3 overflow

　　当文本框超过标签的高度时进行隐藏。

6.css的定位

　　1.position

　　1.1 position=static

　　静态位置，此时position的left等方法不能使用，也就是不能修改标签的位置

　　1.2 position=relative

　　　相对位置

　　　　在标签进行移动的时候，位置的移动是相对于原位置来说的,移动之后原来的位置别的标签并不能顶上去

div{
            position: relative;
            width: 100px;
            height: 100px;
            background-color: red;
            left: 20px;
            margin: 0px;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 0px;
        }

 

　　1.3 position=absolute

　　直接将a标签从文档流中删除，其他标签直接顶上去，以已定位的祖先标签为原始位置进行移动，如果父类没有定位，则找爷爷辈，最后找到body

　　　　

div{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            left: 20px;
            margin: 0px;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 0px;

　　1.3 fixed固定

　　某个标签一直显示在浏览器的特定位置

7.maigin的定位

margin-top和relative类似，但是完全脱离了文档流，后面的标签可以顶上来，

　这样进行移动比较好，相对比较方便。

　　

转载于:https://www.cnblogs.com/hai125698/p/9461883.html