day46

目录

• 标签设置长宽
• 字体颜色 color后面能够跟不少种颜色数据
• 06a0de 直接用pycharm提供的吸管工具取色
• 取消a标签默认的下划线
• 背景图片 默认是铺满整个区域
• 边框
• 盒子模型
• 浮动
• 如何解决父标签坍塌问题？
• overflow溢出属性
• 定位

标签设置长宽

只有快级标签才能设置长宽

行内标签设置了没有任何做用

字体颜色 color后面能够跟不少种颜色数据

颜色英文形式 red

06a0de 直接用pycharm提供的吸管工具取色

rgb（1,1,1） 能够利用截图软件获取三基色数字

rgba（128,128,128,0.3） 最后一个数字 只能用来调节颜色的透明度

取消a标签默认的下划线

a {

text-decoration:none;

}

背景图片 默认是铺满整个区域

一般一个页面上的一个个小的图标 并非单独的

是一张大的图片 该图片上有网址所用的全部的小图标

经过控制背景图片的位置 来显示不一样的图标样式

边框

border 后面写三个参数 位置 没有关系

颜色

字体

样式

能够单独设置 样式 颜色 粗细

border-top-style：dotted

border-top-color：red

border-right-style ：solid

border-bottom-style：dotted

border-left-style ：none

能够设置某一边的样式

/*border-top: 3px solid red;*/
    /*border-left: 1px dotted green;*/
    /*border-right: 5px dashed blue;*/
    /*!*border-bottom: 10px solid pink;*!*/
    
    也能够简写统一设置
            border: solid 10px red;

display

inline  将块级标签变成行内标签
block 能将行内标签  设置成长宽和独占一行
inline-block 既能够设置长宽  也能够设置一行展现

display：none  隐藏标签  而且标签原来占的位置也没了
visibility：hidden  隐藏标签 可是标签原来的位置还在

盒子模型

谷歌浏览器body默认有8px外边框

body {
            margin:0px;
        }

以快递盒子为例

两个快递盒子之间的距离（标签与标签之间的距离） 外边距（margin）

快递盒子的厚度（边框） 边框border

物品之间的距离 （内部文本与内边框之间的距离） 内边框（padding）

物品的大小 （文本的大小） 内容（content）

margin: 10px 20px 30px 40px;  /*上  右   下  左*/
            padding简写规律跟margin同样

#d1 {
            margin: 0 auto;
        }
        只能左右居中  不能上下居中

浮动

float 在css中 ，任何元素均可以浮动

浮动的元素 是脱离正常文档流的（原来的位置会让出来）

浏览器会优先展现文本的内容

浮动带来的影响

会形成父标签塌陷（相似于口袋瘪了）

如何解决父标签坍塌问题？

.clearfix:after{
content：‘’；
clear：both；/左右两边都不能有浮动的元素
display：block；
}
哪一个父标签坍塌就给谁加clearfix这个类的属性值

overflow溢出属性

overflow:hidden；溢出的直接隐藏
overflow：auto  能够滚动

定位

全部的标签默认都是静态的 没法改变位置

position：static

必须将静态的状态修改为定位以后

相对定位，relative

相对于标签原来的位置移动

绝对定位（小米的购物出）absolute

相对于已经定位过（只要不是static均可以relative）的父标签 再作定位

固定定位（回到顶部）fixed

相对于浏览器 固定在某个位置不动

位置是否脱离文档流

不脱离文档流

相对定位

脱离文档流

浮动的元素

绝对定位

固定定位